RenderIfAuthenticated - React Native component to validate if the user has a valid token

App.js

import { createStackNavigator } from 'react-navigation'

import LoginComponent from './components/Login'
import HomeComponent from './components/Home'
import SplashComponent from './components/Splash'
import { renderIfAuthenticated } from './components/Auth'

const Main = createStackNavigator(
  {
    LoginComponent: { screen: LoginComponent },
    HomeComponent: { screen: renderIfAuthenticated(HomeComponent) },
    SplashComponent: { screen: SplashComponent },
  },
  {
    index: 0,
    initialRouteName: 'SplashComponent',
    headerMode: 'none'
  }
)

Auth.js

import React, { Component } from 'react'
import { AsyncStorage } from 'react-native'
import { goToComponent } from '../Utils'

const validateToken = async (token) => {
  try {
    //Validate token with a request or something like that
    return getUserInfo(token)
  } catch (error) {
    AsyncStorage.multiRemove(['user', 'token'])
    return false
  }
}

export const renderIfAuthenticated = (ScreenComponent) => {
  return class extends Component {
    
    async componentWillMount() {
      const token = await AsyncStorage.getItem('token')
      const isValidToken = await validateToken(token)
      if (!isValidToken) {
        goToComponent(this.props.navigation, 'LoginComponent')
      }
    }

    render() {
      return (
          <ScreenComponent {...this.props} />
      )
    }
  }
}

Splash.js

import React, { Component } from 'react'
import {
  View,
  StatusBar,
  AsyncStorage
} from 'react-native'
import Style from './style'
import { goToComponent } from '../Utils'

class SplashComponent extends Component {
  
  componentWillMount() {
    StatusBar.setHidden(true)
  }

  componentDidMount() {
    //Show a custom animation using lottie or something like that
    loadAnimation()
    setTimeout(() => this.redirectUser(), 3000)
  }
  
  async redirectUser() {
    let routeName = 'HomeComponent'
    try {
      const currentUser = await AsyncStorage.getItem('user')
      if (!currentUser) {
        routeName = 'LoginComponent'
      }
    } catch (error) {
      routeName = 'LoginComponent'
    }
    const { navigation: { isFocused } } = this.props
    //useful to validate redirections with deep links
    if (!isFocused()) return
    StatusBar.setHidden(false)
    goToComponent(navigation, routeName)
  }
  
  render() {
    return (
      <View style={Style.container}>
      </View>
    )
  }
}

export default SplashComponent
      

Utils.js

import { StackActions, NavigationActions } from 'react-navigation'

export const goToComponent = (navigation, routeName, params) => {
  let newRoute = { routeName }
  if (params) {
    newRoute.params = params
  }
  const resetAction = StackActions.reset({
    index: 0,
    actions: [
      NavigationActions.navigate(newRoute)
    ]
  })
  navigation.dispatch(resetAction)
}

An example here: https://www.facebook.com/jdnichollsc/videos/10156452822939331/?l=3836471881201830275