title: Why is the screen not clickable when changing backgroundColor on react-native to transparent?
body: <p>I have a code which will pop up and close the popup with a little animation in it. The problem arises when I add color to the background of the popup. Because when the popup is closed and the background color has changed, the screen can't be clicked.</p>
  
  <p>I thought about removing the background, but I didn't know how. I think setting backgroundColor to transparent will solve my problem. But it only removes the previous color and makes the screen not clickable.</p>
  
  <p>Previously I tried to use if else to close the background, but the animation on the application doesn't even work anymore.</p>
  
  <p>Here is the code I attached:</p>
  
  <pre><code>import React, { useState, useRef } from 'react';
  import { Text, View, TouchableHighlight, TouchableWithoutFeedback, Animated, KeyboardAvoidingView, Dimensions, ScrollView } from 'react-native';
  
  const testScreen = () =&gt; {
    const windowHeight = Dimensions.get('window').height;
    const bounceValue = useRef(new Animated.Value(windowHeight)).current;
    const [reportBackgroundColor, setReportBackgroundColor] = useState("");
  
    const _toggleSubviewAppear = () =&gt; {
  
      var toValue = 0;
  
      Animated.spring(
        bounceValue,
        {
          toValue: toValue,
          velocity: 3,
          tension: 2,
          friction: 8,
        }
      ).start();
      setReportBackgroundColor("rgba(0, 0, 0, 0.2)");
  
    };
  
    const _toggleSubviewDisappear = () =&gt; {
  
      var toValue = windowHeight;
  
      Animated.spring(
        bounceValue,
        {
          toValue: toValue,
          velocity: 3,
          tension: 2,
          friction: 8,
        }
      ).start();
  
    };
  
    console.log(JSON.stringify(reportBackgroundColor));
  
    return (
      &lt;View style={{ flex: 1, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center' }}&gt;
        &lt;TouchableHighlight onPress={() =&gt; {
          _toggleSubviewAppear();
        }}&gt;
          &lt;View style={{borderRadius: 100, height: 50, width: 50, backgroundColor: 'pink', justifyContent: 'center', alignItems: "center"}}&gt;
            &lt;Text&gt;
              Click to show
            &lt;/Text&gt;
          &lt;/View&gt;
        &lt;/TouchableHighlight&gt;
        &lt;View style={{ backgroundColor: reportBackgroundColor, flex: 1, top: 0, bottom: 0, right: 0, left: 0, position: 'absolute' }}&gt;
          &lt;Animated.View style={{ transform: [{ translateY: bounceValue }], flex: 1, zIndex: 1000, position: 'absolute', bottom: 0, left: 0, right: 0 }} &gt;
            &lt;KeyboardAvoidingView style={{ flex: 1 }}&gt;
              &lt;View style={{ borderColor: "#E0E0E0", borderWidth: 1, borderTopLeftRadius: 40, borderTopRightRadius: 40, backgroundColor: 'white' }}&gt;
                &lt;ScrollView showsVerticalScrollIndicator={false}&gt;
                  &lt;TouchableWithoutFeedback onPress={() =&gt; {
                    _toggleSubviewDisappear();
                    setReportBackgroundColor("transparent");
                  }}&gt;
                    &lt;View style={{ position: 'absolute', right: 27, top: 27, justifyContent: 'center', alignItems: 'center', borderRadius: 100, backgroundColor: 'white', borderWidth: 1, borderColor: '#E0E0E0', height: 29, width: 29 }}&gt;
                      &lt;Text&gt;
                        X
                      &lt;/Text&gt;
                    &lt;/View&gt;
                  &lt;/TouchableWithoutFeedback&gt;
                  &lt;Text style={{ marginTop: 27, alignSelf: "center", fontSize: 19, color: "#333333" }}&gt;Laporkan Penjual&lt;/Text&gt;
                  &lt;View style={{ marginBottom: 25 }}&gt;&lt;/View&gt;
                &lt;/ScrollView&gt;
              &lt;/View&gt;
            &lt;/KeyboardAvoidingView&gt;
          &lt;/Animated.View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    )
  }
  </code></pre>