MyProtectedComponent.js

import {withAuthorization} from 'with-auth'

class MyProtectedComponent extends Component {
  render () {
    <View>...</View>
  }
}

export default withAuthorization(MyProtectedComponent)

with-auth.js

/**
 * @flow
 */
import React, { Component } from 'react'
import { isAuthenticated } from 'cugn-vost-shared/dist/flux/selectors'
import { connect } from 'react-redux'
import { Wait } from '../common'
import { Routes } from './constants'
import { Alert } from 'react-native'
import { NavigationActions } from 'react-navigation'
import { bindActionCreators } from 'redux'

type Props = {
  authenticated: boolean,
  actions: {
    navigate: Function,
    back: Function
  }
}
type State = {}

export const withAuthorization = (ProtectedRoute: *) => {
  class WithAuthHOC extends Component<Props, State> {
    componentDidMount () {
      if (this.props.authenticated) return

      Alert.alert(
        'Oups',
        'Pour accéder à cette fonctionalité vous devez vous connecter',
        [
          {text: 'Ok', onPress: () => {}}
        ]
      )

      this.props.actions.navigate({routeName: Routes.SIGN_IN_VIEW})
    }

    render () {
      return (
        <Wait until={this.props.authenticated}>
          <ProtectedRoute
            {...this.props}
          />
        </Wait>
      )
    }
  }

  const mapStateToProps = (state) => ({
    authenticated: isAuthenticated(state)
  })

  const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators({
      navigate: NavigationActions.navigate,
      back: NavigationActions.back
    }, dispatch)
  })

  return connect(mapStateToProps, mapDispatchToProps)(WithAuthHOC)
}