react-navigation native-stack, how to change the modal height?

Question

/* eslint-disable react/no-unstable-nested-components */
import React from 'react';
import { View } from 'react-native';

import PersonalNewSecurity from './screens/PersonalNewSecurity';
import Home from './screens/Home';
import SelectLocation from './screens/SelectLocation';
import CameraScreen from './screens/CameraScreen';
import HomeToCheckOut from './screens/HomeToCheckOut';
import HomeAfterCheckOut from './screens/HomeAfterCheckout';
import ScanQR from './screens/ScanQR';
import DetailCheckIn from './screens/DetailCheckIn';
import DetailCheckOut from './screens/DetailCheckOut';
import UpdateAccount from './screens/UpdateAccount';
import Others from './screens/OthersScreen';

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'home' : 'home';
          } else if (route.name === 'Settings') {
            iconName = focused
              ? 'account-circle-outline'
              : 'account-circle-outline';
          } else if (route.name === 'ScanQR') {
            iconName = focused ? 'qrcode-scan' : 'qrcode-scan';
          }

          // You can return any component that you like here!
          return (
            <Icon
              name={iconName}
              size={size}
              color={color}
            />
          );
        },
        tabBarActiveTintColor: 'black',
        tabBarInactiveTintColor: 'gray',
        tabBarStyle: { backgroundColor: '#E5E7EB' },
      })}
    >
      <Tab.Screen
        name="Home"
        component={DetailCheckOut}
        // options={{ tabBarBadge: 3, headerShown: false }}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name="ScanQR"
        component={StackNavigator}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name="Settings"
        component={PersonalNewSecurity}
        options={{ headerShown: false }}
      />
    </Tab.Navigator>
  );
}

function StackNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        presentation: 'modal', // or formSheet
        cardOverlayEnabled: true,
        gestureEnabled: true,
        animation: 'slide_from_bottom',
      }}
    >
      <Stack.Screen
        name="Select Location"
        component={SelectLocation}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Other Location"
        component={Others}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
}

export default function RootStack() {
  return (
    <NavigationContainer>
      <TabNavigator />
    </NavigationContainer>
  );
}

navigation.js

import { View, Text, TextInput, TouchableOpacity } from 'react-native';
import React from 'react';

export default function OthersScreen({ navigation }) {
  return (
    <View className={'ml-4 p-3 mr-4 mt-1'}>
      <Text className={'text-3xl font-bold'}>Other Location</Text>
      <Text className={'text-sm mt-4 mb-1'}>Latitude: 19.67</Text>
      <Text className={'text-sm mb-1'}>Longitude: 100.34</Text>
      <Text className={'text-sm mb-1'}>Timestamp: 2022-08-21 12:30 PM</Text>
      <Text className={'text-sm mt-4 font-bold'}>Remarks</Text>
      <TextInput
        className={'mt-1 border rounded-lg p-7'}
        placeholder="Please enter reamarks here"
        placeholderTextColor="#000"
      />
      <View className={'mt-4 items-center flex-row space-x-5 '}>
        <TouchableOpacity
          className={'p-3 w-40 items-center justify-center border rounded-lg'}
          onPress={() => navigation.goBack()}
        >
          <Text className={'text-sm'}>Cancel</Text>
        </TouchableOpacity>
        <TouchableOpacity
          className={
            'bg-gray-400 p-3 w-40 items-center justify-center rounded-lg'
          }
        >
          <Text className={'text-sm text-white'}>Check-In</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

otherscreen.js

this is my current screen for modal

i wannna make like this this is my target

is there any possible to change the height using the react-navigation native-stack v6? i already look at the documentation which it does not mention any styling which can change the height of modal

im expecting the height of modal can be change

Answer 1

The modal's height should now match the value you entered in the styles' height attribute.modalCard object.

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  modalCard: {
    height: 400, // Set the desired height here
    borderRadius: 10,
    backgroundColor: 'white',
  },
});

export default function OthersScreen({ navigation }) {
  return (
    <View className={'ml-4 p-3 mr-4 mt-1'}>
      <Text className={'text-3xl font-bold'}>Other Location</Text>
      <Text className={'text-sm mt-4 mb-1'}>Latitude: 19.67</Text>
      <Text className={'text-sm mb-1'}>Longitude: 100.34</Text>
      <Text className={'text-sm mb-1'}>Timestamp: 2022-08-21 12:30 PM</Text>
      <Text className={'text-sm mt-4 font-bold'}>Remarks</Text>
      <TextInput
        className={'mt-1 border rounded-lg p-7'}
        placeholder="Please enter reamarks here"
        placeholderTextColor="#000"
      />
      <View className={'mt-4 items-center flex-row space-x-5 '}>
        <TouchableOpacity
          className={'p-3 w-40 items-center justify-center border rounded-lg'}
          onPress={() => navigation.goBack()}
        >
          <Text className={'text-sm'}>Cancel</Text>
        </TouchableOpacity>
        <TouchableOpacity
          className={
            'bg-gray-400 p-3 w-40 items-center justify-center rounded-lg'
          }
        >
          <Text className={'text-sm text-white'}>Check-In</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

<Stack.Screen
  name="Other Location"
  component={Others}
  options={{
    headerShown: false,
    cardStyle: styles.modalCard,
  }}
/>

Answer 2

Adding a to the root of my app seemed to interfere with the that was already there (which already uses PortalProvider under the hood). Only every other bottom sheet I opened would become visible.

I got mine working simply by wrapping my react-navigation modal screen's contents in a :

 function AppStack() {
            return (
                <NativeStack.Navigator>
                    {/* ... */}
                    <NativeStack.Group screenOptions={{ presentation: 'modal' }}>
                        <NativeStack.Screen 
                            name="MyScreenThatNeedsToBeAbleToOpenABottomSheetModal" 
                            component={MyScreenThatNeedsToBeAbleToOpenABottomSheetModal} 
                        />
                    </NativeStack.Group>
                </NativeStack.Navigator>
            )
        }
    
function 
import React from 'react';
import { View, Button } from 'react-native';
import { BottomSheetModalProvider, BottomSheetModal } from '@gorhom/bottom-sheet';
import { NativeStackScreenProps } from '@react-navigation/native-stack';

type RootStackParamList = {
  MyScreenThatNeedsToBeAbleToOpenABottomSheetModal: undefined;
};

type Props = NativeStackScreenProps<RootStackParamList, 'MyScreenThatNeedsToBeAbleToOpenABottomSheetModal'>;

const MyScreenThatNeedsToBeAbleToOpenABottomSheetModal: React.FC<Props> = ({ navigation }) => {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  const handleOpenBottomSheetModal = () => {
    bottomSheetModalRef.current?.present();
  };

  return (
    <BottomSheetModalProvider>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button title="Open Bottom Sheet Modal" onPress={handleOpenBottomSheetModal} />
      </View>
      <BottomSheetModal
        ref={bottomSheetModalRef}
        index={0}
        snapPoints={[300, 200, 0]} // Define your desired snap points here
      >
        {/* Content of your bottom sheet modal */}
        <View style={{ backgroundColor: 'white', padding: 16 }}>
          {/* Your bottom sheet modal content here */}
        </View>
      </BottomSheetModal>
    </BottomSheetModalProvider>
  );
};

export default MyScreenThatNeedsToBeAbleToOpenABottomSheetModal;