Merge pull request #34 from cleathley/feature/horizontal-mode

Feature/horizontal mode
sosog · Nov 26, 2023 · abd4d9f · abd4d9f
2 parents 814ffb9 + b6a3ed5
commit abd4d9f
Show file tree

Hide file tree

Showing 9 changed files with 237 additions and 88 deletions.
diff --git a/README.md b/README.md
@@ -4,9 +4,8 @@ React Native Picker for Android and IOS with dynamically updating selected items
 Idea was taken at [react-native-swipe-picker]( https://github.com/ninio/react-native-swipe-picker
 )
 
-
-![](README/android.gif)
-![](README/ios.gif)
+![Android](README/android.gif)
+![Ios](README/ios.gif)
 
 ## Installation
 
@@ -100,6 +99,7 @@ const styles = StyleSheet.create({
 | transparentItemRows   |     3      |  `number`  | Set number of items at top and bottom of selected index.                                                                |
 | width   |     300      |  `number`  | -                                                                |
 | height   |     300      |  `number`  | -                                                                |
+| horizontal | false | `boolean` | If true then a Horizontal picker.|
 | allItemsColor          |      #000       |  `string`  | - |
 | selectedItemBorderColor          |      '#cecece'       |  `string`  | - |
 | fontSize          |      -       |  `number`  | - |

diff --git a/README/android.gif b/README/android.gif
diff --git a/README/ios.gif b/README/ios.gif
diff --git a/__tests__/__snapshots__/index.test.tsx.snap b/__tests__/__snapshots__/index.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`Component renders correctly with gradient disabled 1`] = `
   }
 >
   <RCTScrollView
+    horizontal={false}
     onLayout={[Function]}
     onMomentumScrollBegin={[Function]}
     onMomentumScrollEnd={[Function]}
@@ -204,6 +205,7 @@ exports[`Components renders correctly with defaults 1`] = `
   }
 >
   <RCTScrollView
+    horizontal={false}
     onLayout={[Function]}
     onMomentumScrollBegin={[Function]}
     onMomentumScrollEnd={[Function]}
@@ -494,6 +496,7 @@ exports[`Components renders correctly with updated params 1`] = `
   }
 >
   <RCTScrollView
+    horizontal={false}
     onLayout={[Function]}
     onMomentumScrollBegin={[Function]}
     onMomentumScrollEnd={[Function]}

diff --git a/__tests__/index.test.tsx b/__tests__/index.test.tsx
@@ -25,6 +25,7 @@ it('Components renders correctly with defaults', () => {
         fakeItem={false}
         isSelected={false}
         allItemsColor={'black'}
+        horizontal={false}
         fontSize={14}
         height={30}
         fontFamily={'Georgia'}
@@ -88,6 +89,7 @@ it('Components renders correctly with updated params', () => {
         fakeItem={false}
         isSelected={false}
         allItemsColor={'pink'}
+        horizontal={false}
         fontSize={22}
         height={40}
         fontFamily={'Arial'}

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -5,16 +5,25 @@ import DynamicallySelectedPicker from 'react-native-dynamically-selected-picker'
 import CustomPickerListItem from './components/CustomPickerListItem';
 
 export default function App() {
-  const [selectedItemIndex, setSelectedItemIndex] = useState<number>(0);
+  const initialSelectedIndex = 1;
+  const initialHorizontalSelectedIndex = 3;
+
+  const [selectedItemIndex, setSelectedItemIndex] =
+    useState<number>(initialSelectedIndex);
+  const [selectedHorizontalItemIndex, setSelectedHorizontalItemIndex] =
+    useState<number>(initialHorizontalSelectedIndex);
   const [selectedCustomItemIndex, setSelectedCustomItemIndex] =
     useState<number>(0);
 
-  const initialSelectedIndex = 1;
   const windowWidth = Dimensions.get('window').width;
-  const height = 300;
 
   return (
     <View style={styles.container}>
+      <View style={styles.selectedItemWrapper}>
+        <Text>Default rendering</Text>
+        <Text>Selected item index: {selectedItemIndex}</Text>
+      </View>
+
       <DynamicallySelectedPicker
         items={[
           {
@@ -45,16 +54,68 @@ export default function App() {
         onScrollBeginDrag={({ index }) => setSelectedItemIndex(index)}
         onScrollEndDrag={({ index }) => setSelectedItemIndex(index)}
         initialSelectedIndex={initialSelectedIndex}
-        height={height}
+        height={300}
         width={windowWidth}
       />
+
       <View style={styles.selectedItemWrapper}>
-        <Text>Selected item index {selectedItemIndex}</Text>
+        <Text>Example of a Horizontal Picker</Text>
+      </View>
+
+      <View style={styles.horizontalPickerWrapper}>
+        <View style={styles.container}>
+          <Text>Selected Index: {selectedHorizontalItemIndex}</Text>
+        </View>
+        <View style={styles.horizontalPicker}>
+          <DynamicallySelectedPicker
+            items={[
+              {
+                value: 1,
+                label: '1',
+              },
+              {
+                value: 2,
+                label: '2',
+              },
+              {
+                value: 3,
+                label: '3',
+              },
+              {
+                value: 4,
+                label: '4',
+              },
+              {
+                value: 5,
+                label: '5',
+              },
+            ]}
+            onScroll={({ index }) => setSelectedHorizontalItemIndex(index)}
+            onMomentumScrollBegin={({ index }) =>
+              setSelectedHorizontalItemIndex(index)
+            }
+            onMomentumScrollEnd={({ index }) =>
+              setSelectedHorizontalItemIndex(index)
+            }
+            onScrollBeginDrag={({ index }) =>
+              setSelectedHorizontalItemIndex(index)
+            }
+            onScrollEndDrag={({ index }) =>
+              setSelectedHorizontalItemIndex(index)
+            }
+            initialSelectedIndex={initialHorizontalSelectedIndex}
+            horizontal={true}
+            height={30}
+            width={windowWidth * 0.666}
+            fontSize={24}
+            transparentItemRows={2}
+          />
+        </View>
       </View>
 
       <View style={styles.selectedItemWrapper}>
         <Text>Example of custom rendering</Text>
-        <Text>(Selected item index {selectedCustomItemIndex})</Text>
+        <Text>Selected item index: {selectedCustomItemIndex}</Text>
       </View>
 
       <DynamicallySelectedPicker
@@ -81,9 +142,9 @@ export default function App() {
         onMomentumScrollEnd={({ index }) => setSelectedCustomItemIndex(index)}
         onScrollBeginDrag={({ index }) => setSelectedCustomItemIndex(index)}
         onScrollEndDrag={({ index }) => setSelectedCustomItemIndex(index)}
-        height={214}
+        height={128}
         width={windowWidth}
-        transparentItemRows={2}
+        transparentItemRows={1}
       />
     </View>
   );
@@ -95,18 +156,19 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: 'white',
-  },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
-  },
-  gradientWrapper: {
-    position: 'absolute',
-    width: '100%',
+    fontSize: 16,
   },
   selectedItemWrapper: {
     alignItems: 'center',
-    marginTop: 25,
+    margin: 12,
+  },
+  horizontalPickerWrapper: {
+    flexDirection: 'row',
+  },
+  horizontalPicker: {
+    flex: 2,
+  },
+  underline: {
+    textDecorationLine: 'underline',
   },
 });