React native call function on original component from modal

Question

How can I call a function from the root component in a modal that is displayed over a component?

My HomePage.js calls the component as follows:

export default class HomePage extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false
    };
  }

 
  toggleModal = () => {
    this.setState({isModalVisible: !this.state.isModalVisible});
  };

 render() {
   return (
     <View style={styles.container}>
       <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')}
        />
     </View>
   );
 }
}

Then my modal is rendered as follows. My goal is that when the user clicks that they have an account, they'll be able to get navigated to the signInModal. To do that, I want to toggle the signUpModal off first.

const SignUpModal = (props) => {

    const [firstName, setFirstName] = useState('');

    return(
        <Modal isVisible = {props.display}>
                <View style={styles.container2}>
                <ScrollView style={styles.scrollView}>
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                        <Text style={styles.title}>Sign Up</Text>
                        <View>
                                <Text style={styles.fieldTitle}>Have an account?</Text>
                                <Text style={styles.accent} onPress={()=>HomePage.toggleModal()}>Sign In</Text>
                        </View>      
                </View>
                <Text style={styles.fieldTitle}>First Name</Text>
                <TextInput
                        style={styles.textbox}
                        onChangeText={firstName => setFirstName(firstName)}
                        defaultValue={firstName}
                />

                <Button title="Sign Up"/>
                </ScrollView>
                </View>
        </Modal>
        );
}
    
export default SignUpModal;

Guruparan Giritharan · Accepted Answer · 2020-07-14 18:01:34Z

1

You should pass a callback function to your modal like below

export default class HomePage extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false
    };
  }

 
  toggleModal = () => {
    this.setState({isModalVisible: !this.state.isModalVisible});
  };

 render() {
   return (
     <View style={styles.container}>
       <Button title = "Get Started" onPress = {this.toggleModal} style={{width:150, height:50}}/>
       <SignUpModal display = {this.state.isModalVisible} toggle={this.toggleModal}/>
       <Image
          style={{ width: 335, height: 356 }}
          source={require('../assets/images/PSHomePageMobile.png')}
        />
     </View>
   );
 }
}

You can call this function inside the modal

<Button title="Sign Up" onPress={props.toggle}/>

edited Jul 14, 2020 at 18:01

answered Jul 14, 2020 at 17:26

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DMop Over a year ago

Inside the modal if I do <Button title="Sign Up" onPress={props.toggle (without the this.) it works. Thanks!

Guruparan Giritharan Over a year ago

sorry its a functional component, missed that, Updated the answer

Collectives™ on Stack Overflow

React native call function on original component from modal

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related