React native call function on original component from modal Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of React native call function on original component from modal without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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;

Answer

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}/>
We are here to answer your question about React native call function on original component from modal - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji