3

I am currently having an annoying problem with (I think) LayoutAnimation.

My problem is the following, I have an app where I can search throughout my FlatList, with a search button I open the panel and get the focus on the TextInput which open the keyboard. The problem comes when I want to close it for some reason if I close it manually with the back button of the phone It closes and everything is fine same by tapping on the list to close it, but the problem comes when I close the search (so the TextInput is remove from the screen and the keyboard is closed automatically even without calling .blur() but I also tried and got the same problem.

Here are some screens to explain : List everything is fine Keyboard opened All the zone that was covered by the keyboard that is now gone is not used anymore for some reason

Now here is some chunk of the code : 

 _onPressSearch() {
LayoutAnimation.easeInEaseOut();
this.setState({ 
  showSearch: !this.state.showSearch
 }, function () {
  ( this.state.showSearch ? 
    this.refs.searchInput.focus() : 
    this.setState({
      searchString: "",
      filtered: null
    }) )
});

}

    var searchBar = (this.state.showSearch ?
  <View>
    <TextInput
      style={styles.searchInput}
      ref='searchInput'
      onChangeText={this._onChangeText.bind(this)}
      value={this.state.searchString}
      underlineColorAndroid={Colors.search}
      maxLength={25}
      autoCapitalize='none'
      autoCorrect={false}
      placeholder={I18n.t('search')}
      placeholderTextColor={Colors.search}
      clearButtonMode='never' />
  </View> : <View />);


    <List style={{ flex: 1 }}>
      <FlatList
        data={(this.state.filtered === null ? this.state.listings : this.state.filtered)}
        keyExtractor={this._keyExtractor}
        extraData={this.state}
        renderItem={this._renderItem} />
    </List>

I am using : 

    "react": "16.0.0-alpha.12",
    "react-native": "0.52.0",

which I updated from 0.49.4 to 0.52.0 hoping it would fix the problem but seems not

For information : no problem in IOS, and I did active the animation on android to get the animation. Furthermore, if I remove the animation LayoutAnimation.easeInEaseOut(); everything works except that I don't have animation of course.

Thanks a lot

Clad Clad
  • 2,653
  • 1
  • 20
  • 32
  • I'm still looking for an answer. It appears to be a known issue for which there seems no urgency to resolve. https://github.com/facebook/react-native/issues/25832 – Mike S. Jan 27 '20 at 21:57
  • I had a similar problem and was able to solve it by enabling react-native-screens. Not sure if it is totally related to your issue, but just in case you can take a look at the answer: https://stackoverflow.com/a/63719002/138392 – bberak Sep 03 '20 at 07:45

0 Answers0