How to access to change te State of a component from an other-CodePudding

Any body knows how can I change the true value of SetIsOpen from my component BottomSheetBtn? I think I tryed every thing I know but it results me impossible

import { StyleSheet, Text, View } from 'react-native';
import BottomSheet, {BottomSheetView} from '@gorhom/bottom-sheet';
import { TextInput } from 'react-native-gesture-handler';
import BottomSheetBtn from './BottomSheetBtn';


export default function UserInksBottomSheet(){
   
   const sheetRef = useRef<BottomSheet>(null);
   const [isOpen, SetIsOpen] = useState(true);
   
   const snapPoints = ['60%','90%']

   return(
      <BottomSheet
         ref={sheetRef}
         snapPoints={snapPoints}
      >
         <BottomSheetView style={styles.container}>
            BOTTOMSHEET CONTENT
            <BottomSheetBtn/> <--- This button is which needs to change the state
         </BottomSheetView>
      </BottomSheet>

   );
}```

CodePudding user response：

Just pass it as props in the main component:

<BottomSheetBtn isOpen={isOpen} SetIsOpen={SetIsOpen}/>

Change the value in the BottomSheet Component as if it's a regular function:

const changeValue = () => props.SetIsOpen(!props.isOpen)

CodePudding user response：

Pass the setIsOpen function to the onPress Functionality of the BottomSheetBtn Component.

<BottomSheetBtn onPress={() => SetIsOpen(!isOpen)}/> // this will provide the toggle functionality.

and then pass the onPress props to the TouchableOpacity or the Button component in the body of BottomSheetBtn

<TouchableOpacity onPress={props.onPress} >
{...}
</TouchableOpacity>