react-nativeapireact-functional-componenttouchableopacityonpress

Render a component onPress(TouchableOpacity/Button) in React Native


I have a functional that has a fetch call to Wordnik Api and it returns one random word. It works all fine, but am trying to set up a TouchbaleOpacity/Button that will render that component onPress so I can get a random word every time the user clicks on the button. I have the other component in a separate file, how do call it on button Press?

`export default function HomeScreen({ navigation }) {
  const onPress = () => {
    //return component
  };
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <TouchableOpacity onPress={onPress}>
        <Button title="Next word" />
      </TouchableOpacity>
      <Wordnik />
    </View>
  );
}`

Solution

  • Add a props key on your component and change that key every time on your button's onPress so component will render every time when key change as following :

    export default function HomeScreen({ navigation }) {
      const [tempKey, setTempKey] = useState(0);
      const onPress = () => {
        //return component
        setTempKey(tempKey+1);
      };
      return (
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
          <TouchableOpacity onPress={onPress}>
            <Button title="Next word" />
          </TouchableOpacity>
          <Wordnik key={tempKey.toString()} />
        </View>
      );
    }