1- import React from 'react' ;
1+ import React , { useMemo , useRef } from 'react' ;
22import { StyleSheet , View } from 'react-native' ;
33import { useLocalization } from 'localization' ;
44import { Icon , MaterialTypeIconsMap } from 'common/Icon' ;
@@ -7,6 +7,7 @@ import { navigationPropType } from 'proptypes';
77import { TransparentButton } from 'common/Input/Button' ;
88import ScreenNames from 'navigation/ScreenNames' ;
99import { MaterialTypes } from 'constants' ;
10+ import BottomSheet from '@gorhom/bottom-sheet' ;
1011
1112const getItems = ( t ) => [
1213 {
@@ -38,19 +39,30 @@ const getItems = (t) => [
3839
3940const AddMaterialList = ( { navigation } ) => {
4041 const { t } = useLocalization ( ) ;
42+
43+ const bottomSheetRef = useRef ( null ) ;
44+
45+ const snapPoints = useMemo ( ( ) => [ '7%' , '40%' ] , [ ] ) ;
4146 return (
42- < View style = { styles . wrapper } >
43- { getItems ( t ) . map ( ( { title, iconName, route } ) => (
44- < TransparentButton
45- key = { title }
46- text = { title }
47- style = { styles . row }
48- textStyle = { styles . rowTitle }
49- leftIcon = { < Icon name = { iconName } /> }
50- onPress = { ( ) => navigation . navigate ( route ) }
51- />
52- ) ) }
53- </ View >
47+ < BottomSheet
48+ ref = { bottomSheetRef }
49+ index = { 1 }
50+ snapPoints = { snapPoints }
51+ backgroundStyle = { styles . backgroundStyle }
52+ >
53+ < View style = { styles . wrapper } >
54+ { getItems ( t ) . map ( ( { title, iconName, route } ) => (
55+ < TransparentButton
56+ key = { title }
57+ text = { title }
58+ style = { styles . row }
59+ textStyle = { styles . rowTitle }
60+ leftIcon = { < Icon name = { iconName } /> }
61+ onPress = { ( ) => navigation . navigate ( route ) }
62+ />
63+ ) ) }
64+ </ View >
65+ </ BottomSheet >
5466 ) ;
5567} ;
5668
@@ -59,11 +71,13 @@ AddMaterialList.defaultProps = {};
5971
6072export default AddMaterialList ;
6173
74+ const width = '80%' ;
75+
6276const styles = StyleSheet . create ( {
6377 wrapper : {
64- marginTop : 'auto' ,
78+ flex : 1 ,
6579
66- width : '80%' ,
80+ width,
6781 alignSelf : 'center' ,
6882
6983 borderTopRightRadius : Constants . borderRadius ,
@@ -72,6 +86,11 @@ const styles = StyleSheet.create({
7286 borderTopWidth : 2 ,
7387 borderRightWidth : 2 ,
7488 borderLeftWidth : 2 ,
89+
90+ backgroundColor : Colors . background ,
91+ } ,
92+ backgroundStyle : {
93+ backgroundColor : 'transparent' ,
7594 } ,
7695 row : {
7796 ...Styles . bottomBorder ,
0 commit comments