Question 35259 in React native Question posted in
The official React Native documentation can be found here.

How to access to change te State of a component from an other – React native

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>

   );
}```
Tags:

2

Answers


  1. 0

    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)
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search