CODEWITHSUNDEEP
react-nativeexpo
localdata01
localdata01

Reputation: 657

react native shows nothing if I use touchablewithoutfeedback

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.......................................................................................................................................

Upvotes: 0

Views: 612

Answers (1)

imKrishh
imKrishh

Reputation: 977

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

Upvotes: 1

Related Questions