swipeUp component was updated

.ondevice/storybook.requires.js

@@ -57,6 +57,7 @@ const getStories = () => {
     "./storybook/stories/RadioButton/RadioButton.stories.js": require("../storybook/stories/RadioButton/RadioButton.stories.js"),
     "./storybook/stories/StatusChip/StatusChip.stories.js": require("../storybook/stories/StatusChip/StatusChip.stories.js"),
     "./storybook/stories/Svg/Svg.stories.js": require("../storybook/stories/Svg/Svg.stories.js"),
+    "./storybook/stories/SwipeUp/SwipeUp.stories.js": require("../storybook/stories/SwipeUp/SwipeUp.stories.js"),
     "./storybook/stories/Text/Text.stories.js": require("../storybook/stories/Text/Text.stories.js"),
   };
 };

App.tsx

@@ -1,31 +1,10 @@
 import React from 'react';
-import {Text} from 'react-native';
-import {GestureHandlerRootView} from 'react-native-gesture-handler'
-import BottomDrawer from './src/components/BottomDrawer';
-import RadioButton from './src/components/RadioButton'
-
-	const dataItem = [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
-
-	const renderItem = ({item,index}) => {
-		return (
-			<RadioButton checkSize='md' checkPosition='left' key={index}>
-				<Text>{item}</Text>
-			</RadioButton>
-		)
-	}
+import {View, Text} from 'react-native';
 
 const App = () => (
-	<GestureHandlerRootView style={{ flex: 1 }}>
-		<BottomDrawer 
-			typeList='flatList'
-			snapPoints={['25%', '50%','75%']}
-            index={0}
-			data={dataItem}
-			renderItem={renderItem}
-			children={null}
-			containerStyle={{backgroundColor:'rgba(0,0,0,0.5)'}}
-			/>
-	</GestureHandlerRootView>
+	<View>
+		<Text>UI native</Text>
+	</View>
 );
 
-export default App;
+export default App;

index.js

@@ -5,5 +5,7 @@ import App from './App';
 import {name as appName} from './app.json';
 import Storybook from './storybook';
 
-const Component = App;
+
+const Component = __DEV__ ? Storybook : App;
+
 AppRegistry.registerComponent(appName, () => Component);

package.json

@@ -42,7 +42,7 @@
 	"homepage": "https://github.com/janis-commerce/ui-native#readme",
 	"peerDependencies": {
 		"react": ">=17.0.2 <=18.2.0",
-		"react-native": ">=0.67.5 <=0.71.5"
+		"react-native": ">=0.67.5 <=0.71.7"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.12.9",

src/components/SwipeUp/childComponents/index.tsx

@@ -0,0 +1,43 @@
+import React,{EffectCallback, DependencyList, JSX} from 'react';
+import { BottomSheetFlatList, BottomSheetScrollView, BottomSheetScrollableProps, BottomSheetView } from '@gorhom/bottom-sheet';
+import {FlatListProps, ScrollViewProps, ViewProps} from 'react-native'
+
+interface BottomSheetFocusProps {
+    focusHook?: (effect: EffectCallback, deps?: DependencyList) => void
+}
+
+type SwipeUpFlatListProps <T,> = FlatListProps<T> & BottomSheetScrollableProps
+type SwipeUpScrollViewProps = ScrollViewProps & BottomSheetScrollableProps
+type SwipeUpViewProps = ViewProps & BottomSheetFocusProps
+
+export const SwipeUpFlatList = <T,> ({data = [] ,renderItem, ...props} : SwipeUpFlatListProps<T>) : JSX.Element | null => {
+
+    if(!data || !data.length || !renderItem) return null
+
+   return (
+    <BottomSheetFlatList data={data} renderItem={renderItem} {...props}/>
+   ) 
+}
+
+export const SwipeUpScrollView = ({children, ...props} : SwipeUpScrollViewProps) : JSX.Element | null => {
+
+    if(!children) return null
+
+    return (
+        <BottomSheetScrollView  {...props}>
+        {children}
+      </BottomSheetScrollView>
+    )
+}
+
+
+export const SwipeUpView = ({children, ...props} :SwipeUpViewProps) : JSX.Element | null => {
+
+    if(!children) return null
+
+    return (
+        <BottomSheetView {...props}>
+            {children}
+        </BottomSheetView>
+    )
+}

src/components/SwipeUp/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import BottomSheet, { BottomSheetProps } from '@gorhom/bottom-sheet'
+import { ViewStyle } from 'react-native'
+
+export interface SwipeUpProps extends BottomSheetProps {
+    onChangeSnap?: () => void
+    swipeWrapperStyle?: ViewStyle
+    snapPosition?: number
+}
+
+const SwipeUp =({
+        children, 
+        snapPoints = ['100%'], 
+        snapPosition = 0,
+        style,
+        onChangeSnap, 
+        backgroundStyle,
+        swipeWrapperStyle,
+        ...props} : SwipeUpProps) => {
+
+    if(!children) return null;
+
+    return (
+        <BottomSheet 
+            snapPoints={snapPoints} 
+            index={snapPosition}
+            onChange={onChangeSnap}
+            style={style}
+            containerStyle={backgroundStyle}
+            backgroundStyle={swipeWrapperStyle}
+            {...props}>
+                {children}
+        </BottomSheet>
+    )
+}
+
+export default SwipeUp;

src/index.ts

@@ -9,7 +9,8 @@ import Input from './components/Input';
 import LoadingFullScreen from './components/LoadingFullScreen';
 import {palette} from './theme/palette';
 import RadioButton from './components/RadioButton';
-import BottomDrawer from './components/BottomDrawer';
+import SwipeUp from './components/SwipeUp';
+import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView } from './components/SwipeUp/childComponents'; 
 
 export {
 	Text,
@@ -23,5 +24,8 @@ export {
 	palette,
 	LoadingFullScreen,
 	RadioButton,
-	BottomDrawer
+	SwipeUp,
+	SwipeUpFlatList,
+	SwipeUpScrollView,
+	SwipeUpView
 };

storybook/stories/SwipeUp/SwipeUp.stories.js

@@ -0,0 +1,95 @@
+import React from 'react'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import {Text, StyleSheet, View } from 'react-native'
+import SwipeUp from '../../../src/components/SwipeUp'
+import RadioButton from '../../../src/components/RadioButton'
+import Svg from '../../../src/components/Svg'
+import { SwipeUpFlatList, SwipeUpView } from '../../../src/components/SwipeUp/childComponents'
+
+
+export default {
+    title: 'Components/SwipeUp',
+    argTypes: {
+        snapPoints: {
+            options:[["25%","50%","100%"],[120,240,460]],
+            control: {type: 'select'}
+        },
+        snapPosition:  {
+            options: [0,1,2],
+            control: {type: 'radio'}
+        }
+    }
+}
+
+const styles = StyleSheet.create({
+    screenStyle: {
+        height:"100%",
+        width:"100%"
+    },
+    wrapperStyle: {
+        backgroundColor:'rgb(122, 193, 224)'
+    },
+    contentStyle: {
+        flex:1,
+        justifyContent:'center',
+        alignItems:'center',
+        backgroundColor:'rgb(122, 193, 224)'
+    }
+
+})
+
+const dataItem = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
+
+const renderItem = ({item,index}) => {
+    return (
+        <RadioButton checkSize='md' checkPosition='right' key={index}>
+            <Text>{item}</Text>
+        </RadioButton>
+    )
+}
+
+export const WithSwipeUpViewComponent = (props) => {
+    return (
+         <GestureHandlerRootView style={styles.screenStyle}>
+            <SwipeUp
+            swipeWrapperStyle={styles.wrapperStyle}
+			{...props}>
+				<SwipeUpView style={styles.contentStyle}>
+                    <Svg name='empty-list-illustration' size={250}/>
+                </SwipeUpView>
+		    </SwipeUp>
+        </GestureHandlerRootView>
+    )
+}
+
+export const WithSwipeUpFlatListComponent = (props) => {
+    return (
+         <GestureHandlerRootView style={styles.screenStyle}>
+            <View>
+                <Text>To render scrollable components, you must use the next additional components as children:</Text>
+                <Text>SwipeUpFlatList</Text>
+                <Text>SwipeUpSCrollView</Text>
+            </View>
+            <SwipeUp
+            swipeWrapperStyle={styles.wrapperStyle}
+			{...props}>
+				<SwipeUpFlatList data={dataItem} renderItem={renderItem}/>
+		    </SwipeUp>
+        </GestureHandlerRootView>
+    )
+}
+
+
+WithSwipeUpViewComponent.args = {
+    snapPoints: ["25%","50%","100%"],
+    snapPosition:0
+}
+
+WithSwipeUpViewComponent.storyName = 'render with static children;'
+
+WithSwipeUpFlatListComponent.args = {
+    snapPoints: ["1%","50%","100%"],
+    snapPosition:1
+}
+
+WithSwipeUpFlatListComponent.storyName = 'render with scrollable component'