Question 32813 in React native Question posted in
The official React Native documentation can be found here.

Modal window react-native – React native

How do I create a modal window that is used almost everywhere on ios? It opens from the bottom, contains some content, there are 2 buttons on top: cancel and save, and the name in the center. This is the default window on iOS, on Android I think it is displayed exactly the same, but in a different design. The problem is that I just don’t know its name, so I haven’t been able to find it for several hours

This window most often opens when you click on the plus sign in the upper right corner of the page. An example is a window from the Calendar application enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found my answer. For navigation, I used @react-navigation/native-stack, which has a built-in way to create exactly the modals I need.

    <NavigationContainer>
            <Stack.Navigator screenOptions={{headerBackTitleVisible: false}}>
                <Stack.Screen name="Home" component={HomeScreen}/>
                <Stack.Group screenOptions={{ presentation: 'modal' }}>
                    <Stack.Screen name={"myModal"} component={ModalScreen}/>
                </Stack.Group>
            </Stack.Navigator>
        </NavigationContainer>

    myModal opens exactly like the screenshot I attached to my post


  2. 0

    I don’t think there is something out of the box in React Native to open a Window like shown in your image. I feel you will need to create one by yourself. If you are interested in creating a Modal in React Native, I would suggest you have a look at this Modal library.

    If you plan to create a custom Modal then I suggest you create a custom Component. You will make a Component as follows giving the parent Component all the liberty to change it through props.

     render() {
  const { isVisible, message, textValue, animationType, backDropColor, 
  style, onModalHide, children } = this.props;
  return (
    <Modal
     animationType= {animationType || 'slide'}
     transparent={transparent || false}
     isVisible={isVisible || false}
     backdropColor={backdropColor || "white"}
     style={[modalStyle, style]}
     onModalHide={onModalHide}>
     {children}
   </Modal>
 );
}

    Then in your parent component, you need to import this component like this:

    import ModalComponent from '../ModalComponent'; //path to your component

<ModalComponent isVisible={true}>
  <View>
   //any custom view you want to be rendered in the modal
  </View>
</ModalComponent>

    UPDATE

    Useful link: Integrate Native calendar in React Native

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search