React-navigation touches sometimes don't work

I'm hoping this is a known problem as I can't provide much to go on to get help solving it.

I'm using react-navigation for my app with the following setup:

• AppContainer
  • Splash Screen
  • Setup Screen (A stack navigator)
  • Main screen (A stack navigator)

When my app starts it goes to the splash screen which decides if this is the first time running or not and depending on this decision calls this.props.navigation.navigate() with either main screen or setup screen.

So far this all works and is fairly standard.

When my app is launched for the first time the user is sent to the setup screen where they navigate through a series of screens entering data and selecting a next button to proceed to the next screen. This is where the problem occur. My first screen simply has some text and a next button (which is a regular button component) which when clicked calls this.props.navigation.push('nextviewname', {data: data}) to move to the next view.

The next view contains a textinput as well as back and next buttons which is where I'm having problems. When I reach this screen after freshly installing a release version of my app onto my Android X phone none of the inputs work. I can't:

• Click next of back
• Click the back arrow in the top left that is part of the header
• Click the text input (the cursor does briefly show up in the text input but the keyboard never appears)
• Click the hardware back key

On very rare occasions some of the above does work (e.g. the text input will sometimes work) and sometimes I'll even make it to the next step of my setup but it's rare that I make it all the way through

Weirdly this all works when I'm debugging my app on my phone.

Update: I've just tested on an Android 9 emulator and I'm getting the same issue.

Update 2: This is getting weird, when the app is in a broken state I can still bring up the react native debug menu however when I click Toggle Inspector nothing happens (i.e. I don't get the inspector UI). It's looking like this is somehow breaking everything.

Has anyone seen/solved this issue before? At the moment it's effectively made my app useless.

Update 3: Some code to hopefully make things clearer:

const SetupUser = createStackNavigator(
  {
    SetupUser: WelcomeScreen,
    SetupName: UserName,
    SetupCurrentWeight: CurrentWeight,
    SetupGoalWeight: GoalWeight,
    SetupGoalDate: GoalDate,
    Summary: Summary,
    LogWeight: LogWeight,
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#001830',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  },
);

const MainApp = createStackNavigator(
  {
    LogWeight: LogWeight,
    LogWeightSummary: LogWeightSummary,
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#001830',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  },
);

export default createAppContainer(
  createSwitchNavigator(
    {
      MainApp: MainApp,
      SplashScreen: SplashScreen,
      SetupUser: SetupUser,
    },
    {
      initialRouteName: 'SplashScreen',
    },
  ),
);

In getting this code snippit together (I've removed the tab navigator as the error is still there even without it) I think I've managed to track down the source of the issue however I'm still not sure how to fix it. The first view loaded is the splash screen which looks like this:

export default class SplashScreen extends React.Component {
constructor(props) {
    super(props);

    GoBinder.verifyDatabase()
      .then(GoBinder.getLastUser())
      .then(user => {
        this.props.navigation.navigate(
          user.user == null ? 'SetupUser' : 'MainApp',
        );
      })
      .catch(error => {
        GoBinder.toast('Error while checking initial user state: ' + error);
      });
  }
render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

In the above code, GoBinder.verifyDatabase() and GoBinder.getLastUser() are calls to native code which perform some database operation to get things setup and check to see if there are any existing users. I believe the issue is this.props.navigation.navigate is firing too quickly which is causing react-navigation to load the next screen but get messed up in the process.

I've tried following the suggestions in this post https://www.novemberfive.co/blog/react-performance-navigation-animations about moving blocking code into InteractionManager.runAfterInteractions under componentDidMount however this made no difference. However, it I manually trigger the move to the new screen using a button everything works correctly so its really looking like the act of programatically changing screens is messing things up.

Thanks for your help