React Native - ERROR TypeError: _this.props.setTabLugar is not a function

Question

Child:

class SceneAR extends Component {

  constructor(props) {
    super(props);
    this.state = {
...

const setTabLugar = (open_tabLugar) => {
        this.props.setTabLugar(open_tabLugar);
      };

return (    
...
onPress={() => setTabLugar(true)} >

Parent:

function ArScreen({ navigation }) {

  const [tabLugar, setTabLugar] = useState(false);
...
onPress={() => setTabLugar(true)} >

When I press the parent button it works fine, how do I make it work in child?

I get this error in child:

ERROR TypeError: _this.props.setTabLugar is not a function. (In '_this.props.setTabLugar(open_tabLugar)', '_this.props.setTabLugar' is undefined)

Answer 1

You could solve it by sending a callback function to the child component which takes care of toggling modal visibility.

import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";

class SceneAR extends Component {

  constructor(props) {
    super(props);
    this.state = {
...

const setTabLugar = (open_tabLugar) => {
  this.props.onPress(open_tabLugar);
};

return (    
  ...
  onPress={() => setTabLugar(true)} />
)

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);
  
  return (
    <View style={styles.centeredView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>
            <SceneAr onPress={setModalVisible} />
          </View>
        </View>
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress={() => setModalVisible(true)}
      >
        <Text style={styles.textStyle}>Show Modal</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  buttonOpen: {
    backgroundColor: "#F194FF",
  },
  buttonClose: {
    backgroundColor: "#2196F3",
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default App;