How can I hide/show components by touching not button but screen on React Native?

Question

I'm learning React Native for the first time. I want to implement a function to show/hide the component by touching the screen, not a specific button.

(Please check the attached file for the example image.)

enter image description here

In this code, I've tried to make a function. if I touch the screen (<View style={style.center}>, then show/hide the renderChatGroup() and renderListMessages() included in <View style={style.footer}>. The source code is below.

In my code, it works. However, the two <View> tag is not parallel. the footer view is center View's child.

I want to make them parallel. but I couldn't find the contents about controlling another <View> tag, not a child. In this code, I used setState, then I couldn't control another the below <View>.

Of course, I tried Fragment tag, but it didn't render anything.

How could I do implement this function? Please help me!

    export default class Streamer extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isVisibleFooter: true,
        };
    }
    
    renderChatGroup = () => {
    const { isVisibleFooter } = this.state;
    if (isVisibleFooter) {
      return (
        <ChatInputGroup
          onPressHeart={this.onPressHeart}
          onPressSend={this.onPressSend}
          onFocus={this.onFocusChatGroup}
          onEndEditing={this.onEndEditing}
        />
      );
    }
    return null;
  };
  
  onPressVisible = () => {
    const { isVisibleFooter } = this.state;
    this.setState(() => ({ isVisibleFooter: !isVisibleFooter }));
  };

  render() {
      return (
        <SafeAreaView style={styles.container}>
          <SafeAreaView style={styles.contentWrapper}>
            <View style={styles.header} />
            <TouchableWithoutFeedback onPress={this.onPressVisible}>
              <View style={styles.center}>
                <View style={styles.footer}>
                  {this.renderChatGroup()}
                  {this.renderListMessages()}
                </View>
              </View>
            </TouchableWithoutFeedback>
          </SafeAreaView>
        </SafeAreaView>
      );
    }
  }