Native Base and Modal not working in React Native

Question

Is there any conflict with native base and react-native-modal? I can't get my modal to display the content. I was wondering if it is because the Container tag of native base.

Code: https://snack.expo.io/rJbAI_Cxr

Answer 1

I've had the same issue. just remove the flex:1 from Modal style and you will end up with centered modal without any style. Then you need to set all the styles for the modal by yourself.

Answer 2

You can use Modal from react native component also ,no need to use third party library.

import {Modal} from 'react-native';


constructor(props) {
        super(props);
        this.state = { 
          modalVisibility: false,
    };

  ShowModalFunction(visible) {
    this.setState({ modalVisibility: visible });
}



                       <Modal
                        transparent={true}
                        animationType={"slide"}
                        visible={this.state.modalVisibility}
                        onRequestClose={() => { this.ShowModalFunction(!this.state.modalVisibility) }} >


            <View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}>
 
            <View style={styles.ModalInsideView}>

            <Text style={{color:'white',fontSize:14,fontWeight:'700'}}>Hello </Text>
            </View>
        </View>
        </Modal>

const styles = StyleSheet.create({        
ModalInsideView:{
 
  justifyContent: 'center',
  alignItems: 'center', 
  backgroundColor : "#00BCD4", 
  height: 245 ,
  width: '90%',
  borderRadius:10,
  borderWidth: 1,
  borderColor: '#fff'
 
},
 

});

Try this if you face issue in this ,let me know.