[Fix RN TextInput focus bug with react-navigation] Add the node tag in navigation params after mounting a sceneview

[gazoudoudou]

I noticed a bug while using react-navigation + the react-native TextInput component.

HOW TO REPRODUCE THE BUG :

Let’s consider the following app with only 2 pages :

Page1.js :

import React, { PureComponent } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';

export default class Page1 extends PureComponent {
  render() {
    return (
      <View>
        <TouchableOpacity
          style={{ backgroundColor: 'red', height: 30, justifyContent: 'center', alignItems: 'center' }}
          onPress={() => this.props.navigation.navigate('Page2')}
        >
          <Text>Go to page 2</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Page2.js :

import React, { PureComponent } from 'react';
import { TouchableOpacity, TextInput, Keyboard, View, Text } from 'react-native';

export default class Page2 extends PureComponent {
  componentDidMount() {
    this.textInput && this.textInput.focus();
  }

  render() {
    return (
      <View>
        <TextInput ref={ref => (this.textInput = ref)} placeholder={'Write something here'} />
        <TouchableOpacity
          style={{ backgroundColor: 'blue', height: 30, marginTop: 20, justifyContent: 'center', alignItems: 'center' }}
          onPress={Keyboard.dismiss}
        >
          <Text>Dismiss keyboard</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

App.js :

import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import * as Pages from './pages';

const RootNavigator = createStackNavigator(
  {
    Page1: {
      screen: Pages.Page1,
    },
    Page2: {
      screen: Pages.Page2,
    },
  },
  {
    initialRouteName: 'Page1',
  }
);

const AppContainer = createAppContainer(RootNavigator);

class App extends Component {
  render() {
    return <AppContainer />;
  }
}

export default App;

On Page1 you have a single button to navigate to Page2. On Page2, you’d like that a TextInput is focused when you arrive on this page. You also have a « dismiss » button to close the keyboard when the textinput is focused.

You could use the TextInput props « autoFocus » so that it is focused at the beginning. There is absolutely no bug in this case.
But instead, I tried to create a ref « textinput », and called this.textinput.focus() in the componentDidMount method to focus it at the beginning. It works, but when I press the dismiss button, the keyboard won’t close.

After digging, I found that a blur call is made when you arrive on Page2, coming from the @react-navigation/native/src/KeyboardAwareNavigator.js file. In _handleTransitionStart, transitionProps.index !== prevTransitionProps.index is true because you are switching pages, and !!currentField too in the « this.textinput.focus() » case. As a consequence, it blurs the textinput, the TextInput.State.currentlyFocusedField() becomes null, and you cannot dismiss the keyboard anymore.

MY FIX :

I tried to add another condition in addition to the if(currentField) one, to decide when we should blur the currently focused textinput. According to me, it should be something like if(currentField && previousPage includes currentField) or if(currentField && currentPage does not include currentField).

To do so, I used the viewIsDescendantOf method from UIManager, react-native (to check if the currently focused field is a child of the previous scene). In addition to the tag of the currently focused field (which is precisely currentField), I needed the tag of the previous scene.

In this PR, I tried to add the node tag of a sceneview in the nav params.
The rest is made in this PR : react-navigation/native#6

[ericvicenti]

See my review here: react-navigation/native#6 (review)

I think we need to go back to the drawing board on this one. It is a real issue, but I think we should fix it with a context API that allows text inputs to negotiate focus with navigators.