Skip to content

Commit 8a24a59

Browse files
BartoszKlonowskiBartoszKlonowski
authored
Include all properties in Example app - Props tab (#455)
* Install and build the pager-view into the example app * Provide the example TS config with jsx flag * Wrap the existing examples into PagerView * Add new tab for Props only
1 parent 5227194 commit 8a24a59

File tree

7 files changed

+318
-22
lines changed

7 files changed

+318
-22
lines changed

‎example/ios/Podfile.lock‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,8 @@ PODS:
302302
- React-jsinspector (0.70.1)
303303
- React-logger (0.70.1):
304304
- glog
305+
- react-native-pager-view (6.1.1):
306+
- React-Core
305307
- react-native-slider (4.3.3):
306308
- React-Core
307309
- React-perflogger (0.70.1)
@@ -422,6 +424,7 @@ DEPENDENCIES:
422424
- React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
423425
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
424426
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
427+
- react-native-pager-view (from `../node_modules/react-native-pager-view`)
425428
- "react-native-slider (from `../node_modules/@react-native-community/slider`)"
426429
- React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
427430
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -498,6 +501,8 @@ EXTERNAL SOURCES:
498501
:path: "../node_modules/react-native/ReactCommon/jsinspector"
499502
React-logger:
500503
:path: "../node_modules/react-native/ReactCommon/logger"
504+
react-native-pager-view:
505+
:path: "../node_modules/react-native-pager-view"
501506
react-native-slider:
502507
:path: "../node_modules/@react-native-community/slider"
503508
React-perflogger:
@@ -562,6 +567,7 @@ SPEC CHECKSUMS:
562567
React-jsiexecutor: 47201924064085223b63ec7e3ee9fd40ad8508e8
563568
React-jsinspector: 1363be638eccfe1aea1b10dd42e632b0397e5ec8
564569
React-logger: 7bd569e3857d74ed412ce0a5c51f421ff7d4ca7f
570+
react-native-pager-view: 3c66c4e2f3ab423643d07b2c7041f8ac48395f72
565571
react-native-slider: 7d19220da2f2ae7cbb9aa80127cb73c597fa221f
566572
React-perflogger: 48c6b363e867d64b682e84f80ca45636bd65e19c
567573
React-RCTActionSheet: 33c74fe5c754835e3715c300618da9aa2f7203fa

‎example/package-lock.json‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,12 @@
3535
"copyfiles": "^2.4.1",
3636
"eslint": "^7.32.0",
3737
"jest": "^26.6.3",
38+
"metro-config": "^0.72.2",
3839
"metro-react-native-babel-preset": "^0.72.1",
40+
"react-native-pager-view": "^6.1.1",
3941
"react-test-renderer": "18.1.0",
4042
"rimraf": "^3.0.2",
41-
"typescript": "^4.8.2",
42-
"metro-config": "^0.72.2"
43+
"typescript": "^4.8.2"
4344
},
4445
"jest": {
4546
"preset": "react-native",

‎example/src/App.tsx‎

Lines changed: 84 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,94 @@
1-
import React from 'react';
2-
import {Platform, ScrollView, StyleSheet, Text, View} from 'react-native';
3-
import {examples} from './Examples';
1+
import React, {useState} from 'react';
2+
import {
3+
Platform,
4+
SafeAreaView,
5+
ScrollView,
6+
StyleSheet,
7+
Text,
8+
View,
9+
} from 'react-native';
10+
import {examples, Props as ExamplesTabProperties} from './Examples';
11+
import {propsExamples, Props as PropsTabProperties} from './Props';
12+
import PagerView from 'react-native-pager-view';
13+
import Slider from '@react-native-community/slider';
414

515
const App = () => {
16+
const [currentPage, setCurrentPage] = useState(0);
17+
const titles = ['Examples', 'Props'];
18+
19+
const renderExampleTab = (
20+
sliders: PropsTabProperties[] | ExamplesTabProperties[],
21+
filtered?: boolean,
22+
) => {
23+
return (
24+
<View>
25+
<ScrollView
26+
style={styles.scrollView}
27+
contentContainerStyle={styles.container}>
28+
{(filtered
29+
? (sliders as ExamplesTabProperties[]).filter(
30+
e => !e.platform || e.platform === Platform.OS,
31+
)
32+
: sliders
33+
).map((e, i) => (
34+
<View key={`slider${i}`} style={styles.sliderWidget}>
35+
<Text style={styles.instructions}>{e.title}</Text>
36+
{e.render()}
37+
</View>
38+
))}
39+
</ScrollView>
40+
</View>
41+
);
42+
};
43+
644
return (
7-
<ScrollView
8-
style={styles.scrollView}
9-
contentContainerStyle={styles.container}>
10-
<Text testID="testTextId" style={styles.title}>
11-
{'<Slider />'}
12-
</Text>
13-
{examples
14-
.filter(e => !e.platform || e.platform === Platform.OS)
15-
.map((e, i) => (
16-
<View key={`slider${i}`} style={styles.sliderWidget}>
17-
<Text style={styles.instructions}>{e.title}</Text>
18-
{e.render()}
19-
</View>
20-
))}
21-
</ScrollView>
45+
<SafeAreaView style={styles.homeScreenContainer}>
46+
<View>
47+
<Slider
48+
step={1}
49+
maximumValue={3}
50+
minimumValue={0}
51+
style={pageViewPositionSlider.style}
52+
value={currentPage + 1}
53+
thumbTintColor={pageViewPositionSlider.thumbColor}
54+
disabled
55+
maximumTrackTintColor={pageViewPositionSlider.trackColor}
56+
minimumTrackTintColor={pageViewPositionSlider.trackColor}
57+
/>
58+
<Text testID="testTextId" style={styles.title}>
59+
{titles[currentPage]}
60+
</Text>
61+
</View>
62+
<PagerView
63+
initialPage={0}
64+
style={styles.pagerViewContainer}
65+
onPageSelected={e => {
66+
setCurrentPage(e.nativeEvent.position);
67+
}}>
68+
{renderExampleTab(examples, true)}
69+
{renderExampleTab(propsExamples)}
70+
</PagerView>
71+
</SafeAreaView>
2272
);
2373
};
2474

2575
export default App;
2676

77+
const pageViewPositionSlider = {
78+
trackColor: '#ABABAB',
79+
thumbColor: '#1411AB',
80+
style: {
81+
width: '100%',
82+
},
83+
};
84+
2785
const styles = StyleSheet.create({
86+
pagerViewContainer: {
87+
flex: 1,
88+
},
89+
homeScreenContainer: {
90+
flex: 1,
91+
},
2892
scrollView: {
2993
backgroundColor: '#F5FCFF',
3094
},
@@ -34,7 +98,8 @@ const styles = StyleSheet.create({
3498
paddingVertical: 20,
3599
},
36100
title: {
37-
fontSize: 20,
101+
fontSize: 30,
102+
color: pageViewPositionSlider.thumbColor,
38103
textAlign: 'center',
39104
width: '100%',
40105
marginVertical: 20,

‎example/src/Examples.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@ import React, {useState} from 'react';
22
import {Text, View, StyleSheet} from 'react-native';
33
import Slider, {SliderProps} from '@react-native-community/slider';
44

5+
export interface Props {
6+
title: string;
7+
render(): JSX.Element;
8+
platform?: string;
9+
}
10+
511
const SliderExample = (props: SliderProps) => {
612
const [value, setValue] = useState(0);
713
return (
@@ -72,7 +78,7 @@ const styles = StyleSheet.create({
7278
},
7379
});
7480

75-
export const examples = [
81+
export const examples: Props[] = [
7682
{
7783
title: 'Default settings',
7884
render() {

0 commit comments

Comments
 (0)