iOS Development

ios – react-navigation native-stack, learn how to change the modal peak?

Spread the love


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

import PersonalNewSecurity from './screens/PersonalNewSecurity';
import Residence from './screens/Residence';
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();

operate TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ targeted, coloration, measurement }) => {
          let iconName;

          if (route.identify === 'Residence') {
            iconName = targeted ? 'dwelling' : 'dwelling';
          } else if (route.identify === 'Settings') {
            iconName = targeted
              ? 'account-circle-outline'
              : 'account-circle-outline';
          } else if (route.identify === 'ScanQR') {
            iconName = targeted ? 'qrcode-scan' : 'qrcode-scan';
          }

          // You possibly can return any element that you simply like right here!
          return (
            <Icon
              identify={iconName}
              measurement={measurement}
              coloration={coloration}
            />
          );
        },
        tabBarActiveTintColor: 'black',
        tabBarInactiveTintColor: 'grey',
        tabBarStyle: { backgroundColor: '#E5E7EB' },
      })}
    >
      <Tab.Display
        identify="Residence"
        element={DetailCheckOut}
        // choices={{ tabBarBadge: 3, headerShown: false }}
        choices={{ headerShown: false }}
      />
      <Tab.Display
        identify="ScanQR"
        element={StackNavigator}
        choices={{ headerShown: false }}
      />
      <Tab.Display
        identify="Settings"
        element={PersonalNewSecurity}
        choices={{ headerShown: false }}
      />
    </Tab.Navigator>
  );
}

operate StackNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        presentation: 'modal', // or formSheet
        cardOverlayEnabled: true,
        gestureEnabled: true,
        animation: 'slide_from_bottom',
      }}
    >
      <Stack.Display
        identify="Choose Location"
        element={SelectLocation}
        choices={{ headerShown: false }}
      />
      <Stack.Display
        identify="Different Location"
        element={Others}
        choices={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
}

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

navigation.js

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

export default operate OthersScreen({ navigation }) {
  return (
    <View className={'ml-4 p-3 mr-4 mt-1'}>
      <Textual content className={'text-3xl font-bold'}>Different Location</Textual content>
      <Textual content className={'text-sm mt-4 mb-1'}>Latitude: 19.67</Textual content>
      <Textual content className={'text-sm mb-1'}>Longitude: 100.34</Textual content>
      <Textual content className={'text-sm mb-1'}>Timestamp: 2022-08-21 12:30 PM</Textual content>
      <Textual content className={'text-sm mt-4 font-bold'}>Remarks</Textual content>
      <TextInput
        className={'mt-1 border rounded-lg p-7'}
        placeholder="Please enter reamarks right 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()}
        >
          <Textual content className={'text-sm'}>Cancel</Textual content>
        </TouchableOpacity>
        <TouchableOpacity
          className={
            'bg-gray-400 p-3 w-40 items-center justify-center rounded-lg'
          }
        >
          <Textual content className={'text-sm text-white'}>Verify-In</Textual content>
        </TouchableOpacity>
      </View>
    </View>
  );
}

otherscreen.js

that is my present display for modal

i wannna make like this
that is my goal

is there any potential to alter the peak utilizing the react-navigation native-stack v6? i already take a look at the documentation which it doesn’t point out any styling which might change the peak of modal

im anticipating the peak of modal may be change

2 thoughts on “ios – react-navigation native-stack, learn how to change the modal peak?

Leave a Reply

Your email address will not be published. Required fields are marked *