REACT NATIVE - Trigger Modal on App Screen using a Custom Component

Question

I am trying to trigger on the App Screen a modal using a custom button component.

I created a reusable button named SelectBoxLong.js

      <TouchableOpacity style={styles.containerLong} onPress={onPress}>
        <Text style={styles.text}>{text}</Text>
        <MaterialCommunityIcons name="menu-down" size={10} />
      </TouchableOpacity>

Also, I created a modal component named FilterModal.js which includes the useState that triggers the modal:

const FilterModal = ({ text, onPress }) => {
  const [modalVisible, setModalVisible] = React.useState(false);

on the App Screen , I included the component and the FilterModal But I can't manage to make a connection between this 3.

What I want is that when the user taps on the SelectBoxLong the modal triggers the modal, and the header of the modal gets the title of the button

I Tried

-Create a function inside Modal that triggers Modal

-Pass as props the useState

Answer 1

App screen:

const [modalVisible, setModalVisible] = React.useState(false);
const [buttonTitle, setButtonTitle] = React.useState(‘’);

onPress = () => {
  setModalVisible(true);
}


render(){
    return(
        ……
        <SelectBoxLong.js onPress={onPress} text={text}/>
        <FilterModal modalVisible={modalVisible} onPress={onPress} text={buttonTitle} />
        ….
    );
}

FilterModal.js

const FilterModal = ({ modalVisible , text, onPress }) => {
  const [modalVisible, setModalVisible] = React.useState(modalVisible);


  useEffect(() => {
    setModalVisible(modalVisible);
  }, [modalVisible]);