CODEWITHSUNDEEP
javascriptreact-native
Jonathan McDonnell
Jonathan McDonnell

Reputation: 311

React Native: How to call a function from another component

I am making a simple app to practice using modals. I have my modal component in a separate file from App.js. I have a button inside the modal and outside of the modal that should toggle the visibility of the modal. To handle the visibility toggle, I have a method in App.js, setVisibility, that takes in a boolean arg and sets the isVisibility state. When I had the modal component defined within App.js earlier everything was working fine, but I'm not sure about accessing and setting the state of a component from another file.

My modal component:

import React, { Component } from "react";
import { View, Modal, TouchableHighlight, Text } from 'react-native';

export default class AppModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.isVisible
        }
        this.toggleVisibility = this.toggleVisibility.bind(this);
    }

    toggleVisibility(show) {
        this.props.setVisibility(show);
    }

    render() {
        return (
        <View>
            <Modal
            animationType='slide'
            visible={this.state.isVisible}
            onRequestClose={() => this.toggleVisibility(false)}
            >
                <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
                    <Text>Inside the modal</Text>
                    <TouchableHighlight style={{padding: 10}} onPress={() => this.toggleVisibility(false)} >
                        <Text>Press me</Text>
                    </TouchableHighlight>
                </View>
            </Modal>
        </View>
        )
    }
}

My app.js:

import React, { Component } from 'react';
import { Text, View, TouchableHighlight } from 'react-native';

import AppModal from './AppModal'

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

    this.setVisibility = this.setVisibility.bind(this);
  }

  setVisibility(show) {
    this.setState({
      isVisible: show
    })
  }

  render() {
    return (
      <View style={{flex: 1}}>

        <AppModal toggle={this.setVisibility} isVisible={this.state.isVisible} />

        <View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
          <Text>Outside of the modal</Text>
          <TouchableHighlight style={{padding: 10}} onPress={() => {this.setVisibility(true); console.log(this.state);}} >
            <Text>Press me</Text>
          </TouchableHighlight>
        </View>
      </View>
    )
  }
}

Now I get an error when I press the button in the modal which tells me that 'this.props.setVisibility is not a function'.

Please let me know if I can explain my question better. Thank you in advance!

Upvotes: 1

Views: 181

Answers (1)

HuLu ViCa
HuLu ViCa

Reputation: 5452

You send the toggling callback method as toggle={this.setVisibility}, not setVisibility={this.setVisibility}, so your callback must be:

toggleVisibility(show) {
    this.props.toggle(show);
}

Upvotes: 1

Related Questions