0

I am new to React Native and currently learning on developing a chat app.

I have a Modal that contain Rating UI

Working with these approach

ChatScreen.js

<Modal isVisible={showRateModal}  >
    <RatingModal />
</Modal>

RatingModal.js

<View style={styles.container}>
    <RatingEmojiSection />
    <View style={styles.buttonContainer}>
            <Button/>
               
     </View>
</View>

Not Working

It works all fine but when I move `Modal` into `RatingModal.js`, the Modal wont be showing anymore. Here is my approach 
import { Modal } from 'react-native-paper';

<Modal isVisible={showRateModal}  >
    <View style={styles.container}>
        <RatingEmojiSection />
        <View style={styles.buttonContainer}>
                <Button/>
               
         </View>
    </View>
</Modal>

Anyone have idea why this could happen? PS: the showRateModal state is working fine. I just curious why can't I move the Modal wrapper into RatingModal.js?

Teo
  • 876
  • 9
  • 22
  • Can you please update the code with imports and also if you are getting any errors ,please update the question with them :) – codehesh Sep 28 '21 at 07:46
  • Are you trying to put Modal in another Modal? If so, it won't work, since you can't open one Modal inside another. – Mod3rnx Sep 28 '21 at 07:54
  • Nono, I had updated my question with imports. And also, originally I used `Modal` in ChatScreen.js, I want to move `Modal` into RatingModal.js but the modal cannot show. – Teo Sep 28 '21 at 10:22

1 Answers1

0

I think there are two problems with your current code

First you are rendering two Modals: ChatScreen.js contains a <Modal>, and then you RatingModal code also contains a <Modal> rendering.

Second: from the react-native docs you can see that the required property is not isVisible but visible.

Fixing these two issues should fix your problem.

Thomas
  • 7,933
  • 4
  • 37
  • 45
  • Hi, I had updated my question, the bottom is actually my trial and it is not working. The top 2 snippets are the working one. And also I am using `react-native-paper` so the `Modal` props is `isVisible` – Teo Sep 28 '21 at 10:23