Entonces, actualmente tengo una función que representa un componente NewButton , en ese componente, ¿cómo llamo a la función toggleModalVisibility , que se define fuera de ese componente? Esa función cambiará muchos estados y llamará a otras funciones, y también cambiará la representación.
import React, { useState, useEffect} from 'react' import {Button, View, Text, StyleSheet,TextInput,ScrollView, Modal} from 'react-native' import { BottomSheet } from 'react-native-btr'; import NewButton from './NewButton' export default function CardFolder({navigation, navigation: {setOptions}}){ const [visible, setVisible] = useState(false); //many other states const toggleModalVisibility = () => { //changes states, calls other functions, change rendering, Toggle bottomSheet }; return( < > <Modal> modal containing a text field, change states </Modal> <BottomSheet>contains other options, upload something to db</BottomSheet> <View style = {{flex:1}}> <NewButton style = {{bottom: 50}} /> </View> </> ) }El componente:
import {View, Button} from 'react-native' export default class NewButton extends React.Component { return( <View style = {[styles.container,this.props.style]}> //how do I call the functon toggleModalVisibility here? <Button onPress={toggleModalVisibility}/> </View> ) } }puede agregarlo como accesorio al componente NewButton
<NewButton style={{bottom: 50}} toggleModalVisibility={toggleModalVisibility} />y la llaman como
<Button onPress={this.props.toggleModalVisibility}/>Como le sugirió @Krosf, debe pasar la función por accesorios y luego llamar a la función cuando se presiona el botón, en su caso está usando el componente de clase, por lo que debe usar la palabra clave " este " para acceder a sus " accesorios NewButton "
como esto:
<Button onPress={ this.props.toggleModalVisibility } />