How can I get back to my previous state when pressing at a random place of my screen?

Question

How can I get back to my previous state which is !isOpen on the press of a random place of my screen when the current state is isOpen. In my case I want to click on my + button which is in my header.js file which show 3 additional buttons (I already did that) but now I want to click on my background/anywhere on the screen and have it bringing me back to when there was only the + button. See in the code of my header.js file below:

import React, {useRef, useState} from 'react';
import {View, StyleSheet, Text, TouchableHighlight, Animated, TouchableWithoutFeedback} from 'react-native';
import {Feather, FontAwesome} from '@expo/vector-icons';
    
import testPage from './test';
import Create from './create';
import Home from './home';

    
import { useNavigation } from '@react-navigation/native';




function AddButton() {

  const [animation, setAnimation] = useState(new Animated.Value(0));

  const [isOpen, setIsOpen] = useState(false);


  const navigation = useNavigation();

  const buttonSize = new Animated.Value(1);
  const mode = new Animated.Value(0);
  
  


  const color = animation.interpolate({
    inputRange: [0, 0.2, 1.8, 2],
    outputRange: [
      'rgba(255, 255, 255, 0.0)',
      'rgba(45, 57, 82, 0.5)',
      'rgba(45, 57, 82, 0.8)',
      'rgba(255, 255, 255, 0.0)',
    ]
  })

  
  const handlePress = () => {

    Animated.sequence([
      Animated.timing(buttonSize, {
        toValue: 0.95,
        duration: 1,
        useNativeDriver: false
      }),
      Animated.timing(buttonSize, {
        toValue: 1,
        duration: 1,
        useNativeDriver: false,
      }),
      Animated.timing(mode, {
        toValue: mode._value === 0 ? 1 : 0,
        useNativeDriver: false
      }),
      Animated.delay(0)
    ]).start();

  };


  


  

  


    const background={
      backgroundColor: color
    };  

    const sizeStyle = {
      transform: [{scale: buttonSize}]
    };

    const rotation = mode.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '45deg']
    });

    const thermometerX = mode.interpolate({
      inputRange: [0, 1],
      outputRange: [-24, -100]
    });

    const thermometerY = mode.interpolate({
      inputRange: [0, 1],
      outputRange: [-50, -100]
    });

    const timeX = mode.interpolate({
      inputRange: [0, 1],
      outputRange: [-24, -24]
    });

    const timeY = mode.interpolate({
      inputRange: [0, 1],
      outputRange: [-50, -150]
    });

    const pulseX = mode.interpolate({
      inputRange: [0, 1],
      outputRange: [-24, 50]
    });

    const pulseY = mode.interpolate({
      inputRange: [0, 1],
      outputRange: [-50, -100]
    });

    

    return ( 
    
    
      <View style={{position: 'absolute', alignItems: 'center'}}>

      
  
        <Animated.View style={{position: 'absolute', left: thermometerX, top: thermometerY}}>
          <View style={styles.secondaryButton}>
            <Feather name="thermometer" size={24} color='#FFF' />
          </View>
        </Animated.View>

        <Animated.View style={{position: 'absolute', left: timeX, top: timeY}}>
          <View style={styles.secondaryButton}>
            <Feather name="clock" size={24} color='#FFF' />
          </View>
        </Animated.View> 

        <Animated.View style={{position: 'absolute', left: pulseX, top: pulseY}}>
          <View style={styles.secondaryButton}>
            <Feather name="activity" size={24} color='#FFF' />
          </View>
        </Animated.View>

 
        <Animated.View style={[styles.button, sizeStyle]}>
          <TouchableHighlight onPress={() => { setIsOpen(open => !open); }} underlayColor='#00FF6F'>
          
          {!isOpen ? (
            
          
            <Animated.View style={{ transform: [{rotate: rotation}] }}>               
                <FontAwesome name='plus' size={24} color='white' />                
            </Animated.View>
            
              
             ) : (

          
        <View>
          <View>
          
            <View>
              <Animated.View style={{ transform: [{rotate: rotation}] }}>
                <TouchableHighlight onPress={handlePress()}>                                   
                  <TouchableHighlight onPress={() => navigation.navigate(testPage)}>
                    <FontAwesome name='comment' size={24} color='white' />
                  </TouchableHighlight>                 
                </TouchableHighlight>
              </Animated.View>
            </View>                    

          </View>
        </View>

             
             )}
          </TouchableHighlight>
        </Animated.View>
      </View>
  
        
      );
    }

Answer 1

Is this what you are looking for ? Detect click outside React component

And when clicked >>> setIsOpen(!isOpen)