Answers for "how to set items to the bottom of the screen react native"

react native component at bottom center

bottomCenter: {
    flex: 1,
    justifyContent: 'flex-end',
    marginBottom: 30
}

react native bottom sheet above the bottom menu

//Use this package 
//https://github.com/gorhom/react-native-portal

If you want to use sheet not modal


import { PortalProvider,Portal,PortalHost } from '@gorhom/portal';

 const App = () => {

   return (
     <SafeAreaProvider>
          <PortalProvider>
              <Navigation />
          </PortalProvider>
     </SafeAreaProvider>
   );
 };

 export default App;



=========================================
// now wrap the sheet  with Portal on your screen 


  <Portal>
    <BottomSheet
    ref={bottomSheetRef}
    index={-1}
    snapPoints={snapPoints}
    onChange={handleSheetChanges}
    >
      <View style={styles.contentContainer}>
        <Text style={styles.bottomSheetTitle}>Add Customer</Text>
  </View>
  </BottomSheet>
  </Portal>

<PortalHost name="custom_host" /> // Name to be used as an id