Include all properties in Example app - Props tab (callstack#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
harmit001 · Nov 27, 2022 · 8a24a59 · 8a24a59
1 parent 5227194
commit 8a24a59
Show file tree

Hide file tree

Showing 7 changed files with 318 additions and 22 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -302,6 +302,8 @@ PODS:
   - React-jsinspector (0.70.1)
   - React-logger (0.70.1):
     - glog
+  - react-native-pager-view (6.1.1):
+    - React-Core
   - react-native-slider (4.3.3):
     - React-Core
   - React-perflogger (0.70.1)
@@ -422,6 +424,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
+  - react-native-pager-view (from `../node_modules/react-native-pager-view`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -498,6 +501,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
+  react-native-pager-view:
+    :path: "../node_modules/react-native-pager-view"
   react-native-slider:
     :path: "../node_modules/@react-native-community/slider"
   React-perflogger:
@@ -562,6 +567,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 47201924064085223b63ec7e3ee9fd40ad8508e8
   React-jsinspector: 1363be638eccfe1aea1b10dd42e632b0397e5ec8
   React-logger: 7bd569e3857d74ed412ce0a5c51f421ff7d4ca7f
+  react-native-pager-view: 3c66c4e2f3ab423643d07b2c7041f8ac48395f72
   react-native-slider: 7d19220da2f2ae7cbb9aa80127cb73c597fa221f
   React-perflogger: 48c6b363e867d64b682e84f80ca45636bd65e19c
   React-RCTActionSheet: 33c74fe5c754835e3715c300618da9aa2f7203fa

diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -35,11 +35,12 @@
     "copyfiles": "^2.4.1",
     "eslint": "^7.32.0",
     "jest": "^26.6.3",
+    "metro-config": "^0.72.2",
     "metro-react-native-babel-preset": "^0.72.1",
+    "react-native-pager-view": "^6.1.1",
     "react-test-renderer": "18.1.0",
     "rimraf": "^3.0.2",
-    "typescript": "^4.8.2",
-    "metro-config": "^0.72.2"
+    "typescript": "^4.8.2"
   },
   "jest": {
     "preset": "react-native",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,30 +1,94 @@
-import React from 'react';
-import {Platform, ScrollView, StyleSheet, Text, View} from 'react-native';
-import {examples} from './Examples';
+import React, {useState} from 'react';
+import {
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {examples, Props as ExamplesTabProperties} from './Examples';
+import {propsExamples, Props as PropsTabProperties} from './Props';
+import PagerView from 'react-native-pager-view';
+import Slider from '@react-native-community/slider';
 
 const App = () => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const titles = ['Examples', 'Props'];
+
+  const renderExampleTab = (
+    sliders: PropsTabProperties[] | ExamplesTabProperties[],
+    filtered?: boolean,
+  ) => {
+    return (
+      <View>
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.container}>
+          {(filtered
+            ? (sliders as ExamplesTabProperties[]).filter(
+                e => !e.platform || e.platform === Platform.OS,
+              )
+            : sliders
+          ).map((e, i) => (
+            <View key={`slider${i}`} style={styles.sliderWidget}>
+              <Text style={styles.instructions}>{e.title}</Text>
+              {e.render()}
+            </View>
+          ))}
+        </ScrollView>
+      </View>
+    );
+  };
+
   return (
-    <ScrollView
-      style={styles.scrollView}
-      contentContainerStyle={styles.container}>
-      <Text testID="testTextId" style={styles.title}>
-        {'<Slider />'}
-      </Text>
-      {examples
-        .filter(e => !e.platform || e.platform === Platform.OS)
-        .map((e, i) => (
-          <View key={`slider${i}`} style={styles.sliderWidget}>
-            <Text style={styles.instructions}>{e.title}</Text>
-            {e.render()}
-          </View>
-        ))}
-    </ScrollView>
+    <SafeAreaView style={styles.homeScreenContainer}>
+      <View>
+        <Slider
+          step={1}
+          maximumValue={3}
+          minimumValue={0}
+          style={pageViewPositionSlider.style}
+          value={currentPage + 1}
+          thumbTintColor={pageViewPositionSlider.thumbColor}
+          disabled
+          maximumTrackTintColor={pageViewPositionSlider.trackColor}
+          minimumTrackTintColor={pageViewPositionSlider.trackColor}
+        />
+        <Text testID="testTextId" style={styles.title}>
+          {titles[currentPage]}
+        </Text>
+      </View>
+      <PagerView
+        initialPage={0}
+        style={styles.pagerViewContainer}
+        onPageSelected={e => {
+          setCurrentPage(e.nativeEvent.position);
+        }}>
+        {renderExampleTab(examples, true)}
+        {renderExampleTab(propsExamples)}
+      </PagerView>
+    </SafeAreaView>
   );
 };
 
 export default App;
 
+const pageViewPositionSlider = {
+  trackColor: '#ABABAB',
+  thumbColor: '#1411AB',
+  style: {
+    width: '100%',
+  },
+};
+
 const styles = StyleSheet.create({
+  pagerViewContainer: {
+    flex: 1,
+  },
+  homeScreenContainer: {
+    flex: 1,
+  },
   scrollView: {
     backgroundColor: '#F5FCFF',
   },
@@ -34,7 +98,8 @@ const styles = StyleSheet.create({
     paddingVertical: 20,
   },
   title: {
-    fontSize: 20,
+    fontSize: 30,
+    color: pageViewPositionSlider.thumbColor,
     textAlign: 'center',
     width: '100%',
     marginVertical: 20,

diff --git a/example/src/Examples.tsx b/example/src/Examples.tsx
@@ -2,6 +2,12 @@ import React, {useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import Slider, {SliderProps} from '@react-native-community/slider';
 
+export interface Props {
+  title: string;
+  render(): JSX.Element;
+  platform?: string;
+}
+
 const SliderExample = (props: SliderProps) => {
   const [value, setValue] = useState(0);
   return (
@@ -72,7 +78,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const examples = [
+export const examples: Props[] = [
   {
     title: 'Default settings',
     render() {