React Native TextInput keeps unfocusing and refreshi8ng the whole page after I type one character

Question

return(
        <View style={styles.container}>
      <View style={styles.searchbarContainer}>
        <TouchableOpacity style={styles.ThreeLineButton} onPress={returnHome}>
          <Text style={{color: 'white', fontSize: 20,}}>Done</Text>
        </TouchableOpacity>
        {/* <Text style={{color: 'white', fontSize: 50, marginLeft: 50}}>UStudy</Text> */}
        {/* <TextInput style={styles.searchbarStyle} placeholder="Search Ustudy" placeholderTextColor='#FFF' onChangeText={setSearchText} value={searchText} onChange={refreshSearch} /> */}
        
      </View>
      <ScrollView
      refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <FlatList
                ref={(ref) => { this.commentListRef = ref; }}
                data={allComments}
                renderItem={({item}) => <CommentCard item={item} />}
                keyExtractor={item=>item.docID}
                showsVerticalScrollIndicator={false}
                style={{
                width: '110%',
                }}

                refreshControl={
                <RefreshControl
                    refreshing={refreshing}
                    onRefresh={onRefresh}
                />
                }
            />
      </ScrollView>
      </View>
    );
};

export default DynamicPostScreen

here is the code of my UI and how the TextInput is embeded. Whenever I type a character in my TextInput it refreshes the whole page and unfocuses from the TextInput. How do I stop this from happening?

Answer 1

Unfortunately, you didn't provide the full code of the component. I recommend you refactor the component and give it proper formatting, especially the indentation.

Also, you usually don't want a FlatList inside a ScrollView, there is probably an issue there.

About the question itself, I can't be 100% sure without the full code.

But it's possible that your setSearchText is triggering a useState change and therefore rerendering the component (that's what a state does).

This is a state management problem and you could move the TextInput to a separate component and manage the state from there so the parent component won't rerender.

Another possibility is that by using onChangeText and onChange you are triggering the render, probably with the refreshSearch function.

If this didn't help, please follow my instructions at the beginning and I'm happy to look at it again.