0

I'm creating an application where I'm using a MaterialBottomTabBar and in the Home Screen I've a button which are supposed to open up a <Modal>.

After investigating this for quite some time I found out that I cannot present the modal when using the tabbar. I've tried to put the modal in all my tabbar-screens (without any success). And then moved the modal over to another screen which are not included in the tab-bar and the modal worked perfectly fine.

export default function Home({ route, navigation }){
  const [modal, setModal] = useState(false)

  return(
    <View style={styles.container}>
          
      <Modal visible={modal} transparent={true}>
        <View style={{height: "100%", width: "80%", backgroundColor: "blue"}}>
          <Text>TIFMNASIFAMNFISAMFIAOFMSAOFMAFOPSAMF</Text>
        </View>
      </Modal>

      <TouchableOpacity style={styles.addNewButton} onPress={() => setModal(true)}>
        <Text style={styles.addNewButtonText}>+</Text>
      </TouchableOpacity>
    </View>
  )
}

As you can see i'm using the React Native Hooks useState(false) and refers to it inside the Modal. But whenever I tap the <TouchableOpacity> the modal is not being presented.

NOTE! The modal is being presented if I replace the

<Modal visible={modal} transparent={true}>

to

<Modal visible={true} transparent={true}>

But would be runned instantly, which is not an option in my case. Do you have any idea how I can run this modal inside the screen?

Putte
  • 526
  • 1
  • 6
  • 15
  • Weird, I executed your code in Snack and everything works perfectly! By the way, the code is very good too! The problem comes from somewhere else! – Viktor Jovanovic Aug 17 '20 at 20:15
  • @ViktorJovanovic That’s strange. Hmm.. It does work perfectly fine when i’m adding the modal to another screen (which is not included in the MaterialBottomTabBar) but on every screen that has the tab-bar it won’t appear for me. Just when I add {true} on visibility as explained in the thread. Any idea? And thanks for your input! – Putte Aug 17 '20 at 20:18
  • Just to test, does it work in a BottomTabBarNavigator? Do you import the modal from react-native? I've already seen somewhere (I can't find the source anymore) that it's better to define a modal at the end of a component to avoid some "problems", try to do that (even if I don't believe in it much)? – Viktor Jovanovic Aug 17 '20 at 20:39
  • @ViktorJovanovic It does not work in the BottomTabBarNavigator. I do import the modal in ’react-native’ (i’m new to React Native and on my phone atm. But from the same source as View, Text etc). I’ll check out that tomorrow in the morning. Like at the very bottom, just above the last ? :) Thanks again! – Putte Aug 17 '20 at 20:42

0 Answers0