Merge pull request #48 from troberts-28/patch/v2.0.3

Patch v2.0.3

Author: troberts-28

.github/workflows/unit-test.yml

@@ -3,6 +3,10 @@ on:
   pull_request:
     branches:
       - main
+    types:
+      - opened        # When PR is first created
+      - synchronize   # When new commits are pushed to the PR
+      - reopened      # When a closed PR is reopened
 
 jobs:
   release:
@@ -17,10 +21,10 @@ jobs:
         node-version: 20
         registry-url: https://registry.npmjs.org
     - name: Install react
-      run: yarn add [email protected]
+      run: yarn add [email protected] -D
     - name: Install react-native
-      run: yarn add [email protected]
+      run: yarn add [email protected] -D
     - name: Install dependencies
-      run: yarn install -D
+      run: yarn install
     - name: Test
       run: yarn test

README.md

@@ -528,8 +528,10 @@ import { TimerPicker } from "react-native-timer-picker";
 
 ```
 
+Please note that this solution does not work for all bottom-sheet components (e.g. `@tamagui/sheet`) as it depends on the implementation of each component.
+
 **Important**:
-The custom component needs to have the same interface as React Native's `<FlatList />` in order for it to work as expected. A complete reference of the current usage can be found [here](/src/components/DurationScroll/index.tsx)
+The custom component needs to have the same interface as React Native's `<FlatList />` in order for it to work as expected. A complete reference of the current usage can be found [here](/src/components/DurationScroll/index.tsx).
 
 #### Generic feedback
 

examples/example-expo/package.json

@@ -10,12 +10,12 @@
     },
     "dependencies": {
         "@expo/vector-icons": "^14.0.3",
-        "expo": "^52.0.11",
-        "expo-av": "~15.0.1",
-        "expo-haptics": "~14.0.0",
-        "expo-linear-gradient": "~14.0.1",
+        "expo": "~52.0.31",
+        "expo-av": "~15.0.2",
+        "expo-haptics": "~14.0.1",
+        "expo-linear-gradient": "~14.0.2",
         "react": "18.3.1",
-        "react-native": "0.76.3"
+        "react-native": "0.76.7"
     },
     "devDependencies": {
         "@babel/core": "^7.24.0",

package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/troberts-28"
     },
     "license": "MIT",
-    "version": "2.0.2",
+    "version": "2.0.3",
     "main": "dist/commonjs/index.js",
     "module": "dist/module/index.js",
     "types": "dist/typescript/index.d.ts",

src/components/Modal/styles.ts

@@ -1,13 +1,6 @@
 import { StyleSheet } from "react-native";
 
 export const styles = StyleSheet.create({
-    container: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-    },
     backdrop: {
         position: "absolute",
         top: 0,

src/components/TimerPicker/styles.ts

@@ -125,6 +125,7 @@ export const generateStyles = (
         },
         durationScrollFlatList: {
             minWidth: 1,
+            width: "300%",
             ...customStyles?.durationScrollFlatList,
         },
         durationScrollFlatListContainer: {

src/tests/DurationScroll.test.tsx

@@ -24,9 +24,11 @@ describe("DurationScroll", () => {
         const { getByTestId } = render(
             <DurationScroll
                 aggressivelyGetLatestDuration={false}
-                numberOfItems={1}
+                interval={1}
+                maximumValue={1}
                 onDurationChange={onDurationChangeMock}
                 padWithNItems={0}
+                repeatNumbersNTimesNotExplicitlySet={true}
                 styles={emptyStyles}
                 testID="duration-scroll"
             />
@@ -39,24 +41,28 @@ describe("DurationScroll", () => {
         const { getAllByTestId } = render(
             <DurationScroll
                 aggressivelyGetLatestDuration={false}
-                numberOfItems={2}
+                interval={1}
+                maximumValue={23}
                 onDurationChange={onDurationChangeMock}
                 padWithNItems={1}
+                repeatNumbersNTimesNotExplicitlySet={true}
                 styles={emptyStyles}
             />
         );
         const items = getAllByTestId("picker-item");
-        expect(items).toHaveLength(7);
+        expect(items).toHaveLength(10);
     });
 
     it("renders the label if provided", () => {
         const { getByText } = render(
             <DurationScroll
                 aggressivelyGetLatestDuration={false}
+                interval={1}
                 label="Duration"
-                numberOfItems={59}
+                maximumValue={59}
                 onDurationChange={onDurationChangeMock}
                 padWithNItems={1}
+                repeatNumbersNTimesNotExplicitlySet={true}
                 styles={emptyStyles}
             />
         );