fix(provider): remove provider needs

AppAndFlow · Jun 7, 2024 · 004900b · 004900b
1 parent ed8b3a8
commit 004900b
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 87 deletions.
diff --git a/example/src/third-party/gorhom-bottom-sheet/index.tsx b/example/src/third-party/gorhom-bottom-sheet/index.tsx
@@ -10,88 +10,8 @@ import {
 import { MagicScroll } from '../../../../src';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-const Form = () => {
-  const insets = useSafeAreaInsets();
-
-  return (
-    <MagicScroll.ScrollView
-      scollViewProps={{
-        contentContainerStyle: {
-          paddingHorizontal: 16,
-          paddingBottom: insets.bottom + 20,
-          paddingTop: 100,
-        },
-      }}
-    >
-      <MagicScroll.TextInput
-        name="username"
-        textInputProps={{
-          placeholder: 'Username',
-          style: {
-            height: 50,
-            backgroundColor: '#ddd',
-            borderRadius: 6,
-            paddingHorizontal: 16,
-          },
-        }}
-      />
-      <MagicScroll.TextInput
-        name="first_name"
-        containerStyle={{ marginTop: 8 }}
-        textInputProps={{
-          placeholder: 'First Name',
-          style: {
-            height: 50,
-            backgroundColor: '#ddd',
-            borderRadius: 6,
-            paddingHorizontal: 16,
-          },
-        }}
-      />
-      <MagicScroll.TextInput
-        name="last_name"
-        containerStyle={{ marginTop: 8 }}
-        textInputProps={{
-          placeholder: 'Last Name',
-          style: {
-            height: 50,
-            backgroundColor: '#ddd',
-            borderRadius: 6,
-            paddingHorizontal: 16,
-          },
-        }}
-      />
-      <MagicScroll.TextInput
-        name="email"
-        containerStyle={{ marginTop: 8 }}
-        textInputProps={{
-          placeholder: 'Email',
-          style: {
-            height: 50,
-            backgroundColor: '#ddd',
-            borderRadius: 6,
-            paddingHorizontal: 16,
-          },
-        }}
-      />
-      <MagicScroll.TextInput
-        name="password"
-        containerStyle={{ marginTop: 8 }}
-        textInputProps={{
-          placeholder: 'Password',
-          style: {
-            height: 50,
-            backgroundColor: '#ddd',
-            borderRadius: 6,
-            paddingHorizontal: 16,
-          },
-        }}
-      />
-    </MagicScroll.ScrollView>
-  );
-};
-
 const Example = () => {
+  const insets = useSafeAreaInsets();
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   const snapPoints = useMemo(() => ['25%', '80%'], []);
@@ -127,9 +47,80 @@ const Example = () => {
         enablePanDownToClose
       >
         <BottomSheetView style={[styles.contentContainer]}>
-          <MagicScroll.SmartScrollView>
-            <Form />
-          </MagicScroll.SmartScrollView>
+          <MagicScroll.ScrollView
+            scollViewProps={{
+              contentContainerStyle: {
+                paddingHorizontal: 16,
+                paddingBottom: insets.bottom + 20,
+                paddingTop: 100,
+              },
+            }}
+          >
+            <MagicScroll.TextInput
+              name="username"
+              textInputProps={{
+                placeholder: 'Username',
+                style: {
+                  height: 50,
+                  backgroundColor: '#ddd',
+                  borderRadius: 6,
+                  paddingHorizontal: 16,
+                },
+              }}
+            />
+            <MagicScroll.TextInput
+              name="first_name"
+              containerStyle={{ marginTop: 8 }}
+              textInputProps={{
+                placeholder: 'First Name',
+                style: {
+                  height: 50,
+                  backgroundColor: '#ddd',
+                  borderRadius: 6,
+                  paddingHorizontal: 16,
+                },
+              }}
+            />
+            <MagicScroll.TextInput
+              name="last_name"
+              containerStyle={{ marginTop: 8 }}
+              textInputProps={{
+                placeholder: 'Last Name',
+                style: {
+                  height: 50,
+                  backgroundColor: '#ddd',
+                  borderRadius: 6,
+                  paddingHorizontal: 16,
+                },
+              }}
+            />
+            <MagicScroll.TextInput
+              name="email"
+              containerStyle={{ marginTop: 8 }}
+              textInputProps={{
+                placeholder: 'Email',
+                style: {
+                  height: 50,
+                  backgroundColor: '#ddd',
+                  borderRadius: 6,
+                  paddingHorizontal: 16,
+                },
+              }}
+            />
+            <MagicScroll.TextInput
+              name="password"
+              containerStyle={{ marginTop: 8 }}
+              textInputProps={{
+                placeholder: 'Password',
+                style: {
+                  height: 50,
+                  backgroundColor: '#ddd',
+                  borderRadius: 6,
+                  paddingHorizontal: 16,
+                },
+              }}
+            />
+          </MagicScroll.ScrollView>
         </BottomSheetView>
       </BottomSheetModal>
     </View>

diff --git a/src/Provider.tsx b/src/Provider.tsx
@@ -76,7 +76,7 @@ export default function SmartScrollView(props: PropsWithChildren<{}>) {
   );
 }
 
-export function ScrollView(
+function InsideScrollView(
   props: PropsWithChildren<{
     scollViewProps?: AnimatedScrollViewProps;
     additionalPadding?: number;
@@ -96,6 +96,18 @@ export function ScrollView(
     </Animated.ScrollView>
   );
 }
+export const ScrollView = (
+  props: PropsWithChildren<{
+    scollViewProps?: AnimatedScrollViewProps;
+    additionalPadding?: number;
+  }>
+) => {
+  return (
+    <SmartScrollView>
+      <InsideScrollView {...props} />
+    </SmartScrollView>
+  );
+};
 
 const currentFocusAtom = selectAtom(elementsAtom, (val) =>
   Object.keys(val)

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,4 +1,4 @@
-import SmartScrollView, { useFormSmartScroll, ScrollView } from './Provider';
+import { useFormSmartScroll, ScrollView } from './Provider';
 import { TextInput } from './TextInput';
 import ViewWrapper from './ViewWrapper';
 import { withSmartScroll } from './withSmartScroll';
@@ -9,5 +9,4 @@ export const MagicScroll = {
   ViewWrapper,
   TextInput,
   withSmartScroll,
-  SmartScrollView,
 };