react native shows nothing if I use touchablewithoutfeedback - react-native

Question

I create a form but if I add touchablewithoutfeedback then it shows nothing more. If I use View its show but why?
import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, ImageBackground, TextInput, Dimensions, KeyboardAvoidingView } from 'react-native';
import { TouchableOpacity, ScrollView, TouchableWithoutFeedback } from 'react-native-gesture-handler';
import { Ionicons } from '#expo/vector-icons';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const createRoom = () => {
return (
<TouchableWithoutFeedback style={{flex: 1,alignItems: 'center', justifyContent: 'center'}}>
<KeyboardAvoidingView behavior="position">
<View style={{backgroundColor: 'red', width: width * 0.8, padding: 20, borderRadius: 8, elevation: 2}}>
<View style={{marginTop: 20, marginBottom: 20}}>
<TextInput placeholder="Username" style={styles.input} />
</View>
<View style={styles.locationContainer}>
<TouchableOpacity>
<Text>geolocation</Text>
</TouchableOpacity>
<View>
<Text>Test</Text>
</View>
</View>
<TouchableOpacity style={styles.button}>
<Text>Gruppe erstellen</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
)
};
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff'
},
input: {
padding: 4,
backgroundColor: '#fff',
},
image: {
height: 150,
borderRadius: 12,
},
locationContainer: {
flexDirection: 'row',
justifyContent: 'space-between'
},
button: {
color: '#fff',
justifyContent: 'center',
alignItems: 'center',
padding: 10
}
});
export default createRoom;
i am very thankful for your help. I dont know the issue.......................................................................................................................................

Answer 1

You can change the TouchableWithoutFeedback import from react-native-gesture-handler to react-native.
import {StyleSheet, Text, View, ImageBackground, TextInput, Dimensions, KeyboardAvoidingView, TouchableOpacity, ScrollView, TouchableWithoutFeedback} from 'react-native';
Or you can go for a new component Pressable