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