Invalid use of hooks when calling component with onPress

Question

I'm trying to work with modals when I click on a button from the header.

Say I have this component List, and List is using custom navigation options:

import { CustomModal } from './components/Modal';

const List = (props) => {
  const [enteredUrl, setEnteredUrl] = useState('');

  const urlInputHandler = (enteredUrl) => {
    setEnteredUrl(enteredUrl);
  };

  const addUrlHander = () => {
    console.log(enteredUrl);
  }

  return (
    <View></View>
  );
};

List.navigationOptions = (navData) => {
  return {
    headerTitle: 'Workouts',
    headerRight: (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title='Add'
          iconName='md-add'
          onPress={() => {
            CustomModal(); //here is the modal
          }}
        />
      </HeaderButtons>
    ),
    headerBackTitle: null
  };
};

My Modal component has this:

export const CustomModal = (props) => {
  const [modalVisible, setModalVisible] = useState(false);
  console.log(props);
  return (
    <Modal
      animationType='slide'
      transparent={false}
      visible={modalVisible}
      onRequestClose={() => {
        Alert.alert('Modal has been closed.');
      }}
    >
      <View style={{ marginTop: 22 }}>
        <View>
          <Text>Hello World!</Text>

          <TouchableHighlight
            onPress={() => {
              setModalVisible(!modalVisible);
            }}
          >
            <Text>Hide Modal</Text>
          </TouchableHighlight>
        </View>
      </View>
    </Modal>
  );
}

But it is giving me the invalid hook error. Why is it that my onPress in my navigationOptions giving me this? Am I doing this wrong?

Answer 1

onPress is a callback, you can't put components in it. Probably what you want is something like this:

      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <CustomModal/>
      </HeaderButtons>

and the modal looks like

export const CustomModal = (props) => {
  const [modalVisible, setModalVisible] = useState(false);
  console.log(props);
  return modalVisible?(
    <Modal
      animationType='slide'
      transparent={false}
      visible={modalVisible}
      onRequestClose={() => {
        Alert.alert('Modal has been closed.');
      }}
    >
      <View style={{ marginTop: 22 }}>
        <View>
          <Text>Hello World!</Text>

          <TouchableHighlight
            onPress={() => {
              setModalVisible(!modalVisible);
            }}
          >
            <Text>Hide Modal</Text>
          </TouchableHighlight>
        </View>
      </View>
    </Modal>
  ):(
    <Item
      title='Add'
      iconName='md-add'
      onPress={() => setModalVisible(!modalVisible)}
    />
  );
}