React native call functions and change states from a component-CodePudding

So I currently have a function that renders a component NewButton, in that component, how do I call the function toggleModalVisibility, which is defined outside of that component? That function will change many states and call other functions, and change rendering as well.

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>
        </>  
    )      
}

The Component:

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>
        )
    }
}

CodePudding user response：

you can add it as a prop to NewButton Component

<NewButton style={{bottom: 50}} toggleModalVisibility={toggleModalVisibility} />

and the call it like

<Button onPress={this.props.toggleModalVisibility}/>

CodePudding user response：

As @Krosf suggested you, you should pass the function by props and then call the function when Button is pressed, in your case you are using class component, so you should use the "this" keyword in order to access your "NewButton props"

like this:

<Button onPress={ this.props.toggleModalVisibility } />