I know there is a question about this topic, however that didn't fix my issue. I want a modal to be rendered when the 'Get Started' button is pressed, but the modal always appears as this red box, instead of popping over my display. Can someone help me make it so the modal only renders when Get Started is pressed and so that the modal
My modal is defined in signUpModal.js as:
import React, {Component} from 'react';
import {StyleSheet, Text, View, Button} from 'react-native';
import Modal from 'react-native-modal';
const SignUpModal = (props) => (
<Modal
isVisible={props.display}
animationType={'slide'}
onRequestClose={() => console.log('closed')}
>
<View style={{ flex: 1 }}>
<Text>I am the modal content!</Text>
<Button title="Hide modal" />
</View>
</Modal>
);
export default SignUpModal;
My modal is called from HomePage.js. The relevant code is below:
import React, {Component} from 'react';
import {StyleSheet, Text, View, Button, Image} from 'react-native';
import Swiper from 'react-native-swiper/src';
import { LinearGradient } from 'expo-linear-gradient';
import SignUpModal from '../modals/signUpModal';
export default class HomePage extends Component {
constructor(props) {
super(props);
this.state = {
isModalVisible: false
};
}
toggleModal = () => {
this.setState({isModalVisible: !this.state.isModalVisible});
};
render() {
return (
<Swiper
loop={false}
showsPagination={false}
index={0}
showsButtons = {true}
>
<View style={styles.container}>
<LinearGradient colors={['rgba(14, 25, 39, 0.5)', 'rgba(11, 19, 27, 0.8)']} style={styles.container}>
<Text style={styles.welcome}>Invest In Your Favorite Players</Text>
<Text style={styles.instructions}>{subtitle}</Text>
<Button title = "Get Started" onPress = {this.toggleModal} style={{width:150, height:50}}/>
<SignUpModal
display = {this.state.isModalVisible}
/>
<Image
style={{ width: 335, height: 356 }}
source={require('../assets/images/PSHomePageMobile.png')}
/>
</LinearGradient>
</View>
