bottomDrawer 2

App.tsx

@@ -1,10 +1,31 @@
 import React from 'react';
-import {View, Text} from 'react-native';
+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>
+		)
+	}
 
 const App = () => (
-	<View>
-		<Text>UI native</Text>
-	</View>
+	<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>
 );
 
 export default App;

index.js

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

src/components/BottomDrawer/index.tsx

@@ -1,11 +1,16 @@
 import React, { ReactElement } from 'react'
-import BottomSheet, {BottomSheetProps} from '@gorhom/bottom-sheet'
-import { ViewStyle, StyleSheet } from 'react-native';
-import {BottomDrawerFlatList} from './listComponents'
+import BottomSheet, {BottomSheetFlatList, BottomSheetProps, BottomSheetScrollView, BottomSheetView} from '@gorhom/bottom-sheet'
+import { FlatListProps } from 'react-native'
+
+
+type typeList = 'none' | 'flatList' | 'scrollView'
 
 
 export interface BottomDrawerProps extends BottomSheetProps {
     children: ReactElement | null
+    typeList?: typeList
+    data: any[],
+    renderItem: any
 }
 
 const BottomDrawer = ({
@@ -14,25 +19,33 @@ const BottomDrawer = ({
         index = 0,
         style,
         onChange, 
+        typeList = 'none',
         containerStyle,
+        data,
+        renderItem,
         ...props} : BottomDrawerProps) => {
 
-    if(!children) return null;
     if(!snapPoints || !snapPoints ) return null;
 
+    const wrapper = {
+        flatList: () => <BottomSheetFlatList data={data} renderItem={renderItem}/>,
+        scrollView: () => <BottomSheetScrollView>{children}</BottomSheetScrollView>,
+        none: () => <BottomSheetView>{children}</BottomSheetView>
+    }
+
+    const BottomContent = wrapper[typeList]
+
     return (
         <BottomSheet 
             snapPoints={snapPoints} 
             index={index}
             onChange={onChange}
             style={style}
+            containerStyle={containerStyle}
             {...props}>
-                {children}
+                {BottomContent}
         </BottomSheet>
     )
 }
 
-export {
-    BottomDrawer,
-    BottomDrawerFlatList
-};
+export default BottomDrawer

src/index.ts

@@ -9,7 +9,7 @@ import Input from './components/Input';
 import LoadingFullScreen from './components/LoadingFullScreen';
 import {palette} from './theme/palette';
 import RadioButton from './components/RadioButton';
-import {BottomDrawer,BottomDrawerFlatList} from './components/BottomDrawer';
+import BottomDrawer from './components/BottomDrawer';
 
 export {
 	Text,
@@ -23,6 +23,5 @@ export {
 	palette,
 	LoadingFullScreen,
 	RadioButton,
-	BottomDrawer,
-	BottomDrawerFlatList
+	BottomDrawer
 };