CODEWITHSUNDEEP
react-nativesubmituser-input
Marvin
Marvin

Reputation: 75

Text input becomes unusable after submitting data

I am implementing a page in my app that takes a user input and then searches a tv shows API for shows relating to what the user inputs. The form works, and data is returned succesfully, however once the search button has been clicked and the data has been returned, the search bar AND search button becomes unresponsive and will not bring up the keyboard. This was tested on a pixel 3 AVD, however on an iphone X using expo Go, the search button fully disapears from the page!

Here is the code:

import React, {useState} from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, FlatList, ActivityIndicator, Image } from 'react-native';
import {AntDesign} from '@expo/vector-icons';



const ShowDisplay = ({navigation}) => {

  const[text, changeText] = useState('');
  const[data, setData] = useState([]);


  const check = (item) => {
    if(item.show.image){
      return(
        <Image source={{uri:item.show.image.medium}} style={{width:'100%', height: 200}} />
      )
    }else{
      return(
        <Text>Poo</Text>
      )
    }
  }
  

 const showfind = () =>{
  fetch('https://api.tvmaze.com/search/shows?q=' + text)
  .then((response)=> response.json())
  .then((json)=> setData(json))
  .catch((error)=>alert(error));
 }

const showSearch = (text) =>{
  showfind();
}


const changeHandler = (text) =>{
 changeText(text)
}

console.log('text is currently '+ text)


 return( 
  <>
    <View style={styles.container}>
    <View style = {styles.searchform}>
    <TextInput 
      placeholder = 'Search for a show'
       style = {styles.search}
       onChangeText={text => changeHandler(text)}
  />
  <TouchableOpacity onPress={() => showSearch(text)}>
    <AntDesign name="search1" size={30} color='black' style = {{marginTop: 19, marginLeft: 15,}}/>
  </TouchableOpacity>
  </View>
</View>

<View>
  {data? (<View style={styles.resultsContainer}>
<FlatList
style = {styles.list}
keyExtractor={(item, index)=> index.toString()}
  numColumns= '3'
  data={data}
  renderItem={({item}) => (
    <>
    <TouchableOpacity style = {styles.show} onPress={() => navigation.navigate('toShow', {
     id: item.show.id,

    } )}>    
  
    <View style={styles.text}>
    {check(item)}
     </View>
  </TouchableOpacity>
   

</>
  )}
  
  />
</View>) : (<View style={styles.loadingContainer}>

<ActivityIndicator size="large" color="#000"/>

</View>)}


</View>




</>

);

}

const styles = StyleSheet.create({

container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',


},
search :{
  paddingLeft: 15,
  marginTop: 20,
  borderRadius:30,
  width: 200,
  height: 30,
  borderWidth: 1,
  borderColor: '#000'
}, header : {
  marginTop: 20,
  fontSize: 30,
},
searchform:{
flexDirection: 'row',
},

show:{
  width: '33.3%',
  height: 200,
  borderStyle: "solid",
  borderColor: 'white',
  borderWidth: 1,
}, 
list:{
 marginTop: 70,
 
}

});

  
  export default ShowDisplay;

I thought that maybe because the sumbit button runs a function, maybe the function never stops, and needs to be reset? When the sumbit button is pressed, it makes the call to the API.. I am unsure what is happening.

Upvotes: 0

Views: 42

Answers (1)

jnpdx
jnpdx

Reputation: 52347

Looks like you're getting a weird side effect by using a Fragment (<></>) as the root view. The style is getting thrown off in certain circumstances.

Since you don't actually have a reason to use a Fragment as the root (your container view is the root element), removing it seemed to solve the issue. I also removed the unnecessary fragment you were using in the search button.

return( 
<View style={styles.container}>
  <View style = {styles.searchform}>
    <TextInput 
      placeholder = 'Search for a show'
       style = {styles.search}
       onChangeText={text => changeHandler(text)}
    />
    <TouchableOpacity onPress={() => showSearch(text)}>
     <AntDesign name="search1" size={30} color='black' style = {{marginTop: 19, marginLeft: 15,}}/>
    </TouchableOpacity>
  </View>

  <View>
   {data? (<View style={styles.resultsContainer}>
      <FlatList
          style = {styles.list}
          keyExtractor={(item, index)=> index.toString()}
          numColumns= '3'
          data={data}
          renderItem={({item}) => (
             <TouchableOpacity style = {styles.show} onPress={() =>          
                  navigation.navigate('toShow', {
                    id: item.show.id,
                  } )}>    
  
              <View style={styles.text}>
                {check(item)}
              </View>
            </TouchableOpacity>
          )}
  
      />
      </View>) : (<View style={styles.loadingContainer}>

      <ActivityIndicator size="large" color="#000"/>

    </View>)}
  </View>
</View>
);

Upvotes: 1

Related Questions