fix: moved GestureHandlerRootView inside

one-am-it · Apr 12, 2024 · 70a37f4 · 70a37f4
1 parent efc359a
commit 70a37f4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 25 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Rheostat } from '@one-am/react-native-rheostat-slider';
 
 const mockValues = Array.from<number>(new Array(28)).map((_, index) => index);
 
 export default function App() {
   return (
-    <GestureHandlerRootView style={styles.container}>
+    <View style={styles.container}>
       <View style={styles.canvas}>
         <Rheostat
           double={true}
@@ -26,7 +24,7 @@ export default function App() {
           onValuesUpdated={(state) => console.log(state)}
         />
       </View>
-    </GestureHandlerRootView>
+    </View>
   );
 }
 

diff --git a/src/components/rheostat/index.tsx b/src/components/rheostat/index.tsx
@@ -4,6 +4,7 @@ import { type LayoutChangeEvent, View } from 'react-native';
 import type { RheostatProps } from './types';
 import SingleRheostat from './single';
 import DoubleRheostat from './double';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 type RheostatImplProps = Omit<RheostatProps, 'data'> & {
   double?: boolean;
@@ -71,27 +72,29 @@ function RheostatImpl({
   }, [data, max, min, step, unlimitedBottomBound, unlimitedUpperBound]);
 
   return (
-    <View style={[{ height: '100%' }, props.style]} onLayout={onLayout}>
-      {layout.width > 0 ? (
-        double ? (
-          <DoubleRheostat
-            {...props}
-            height={layout.height}
-            width={layout.width}
-            values={checkedValues}
-            data={snapPoints}
-          />
-        ) : (
-          <SingleRheostat
-            {...props}
-            height={layout.height}
-            width={layout.width}
-            values={checkedValues}
-            data={snapPoints}
-          />
-        )
-      ) : null}
-    </View>
+    <GestureHandlerRootView>
+      <View style={[{ height: '100%' }, props.style]} onLayout={onLayout}>
+        {layout.width > 0 ? (
+          double ? (
+            <DoubleRheostat
+              {...props}
+              height={layout.height}
+              width={layout.width}
+              values={checkedValues}
+              data={snapPoints}
+            />
+          ) : (
+            <SingleRheostat
+              {...props}
+              height={layout.height}
+              width={layout.width}
+              values={checkedValues}
+              data={snapPoints}
+            />
+          )
+        ) : null}
+      </View>
+    </GestureHandlerRootView>
   );
 }