Skip to content
Ready to use solution using HOC to expose props.isFocused for react-navigation. No Redux needed.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
ExampleNavigation add decorators support Jan 10, 2018
.gitignore version 1.0.0 May 24, 2017
.npmignore version 1.0.0 May 24, 2017
LICENSE Initial commit May 23, 2017
README.md Update readme about React-Navigation V2 feature Sep 5, 2018
index.js Fix compilation error (issue 11) Jan 10, 2018
issue_template.md version 1.0.0 May 24, 2017
package.json increment patch version number Jan 11, 2018

README.md

Please Star

react-navigation-is-focused-hoc npm version

NOTE: Since React-Navigation v.2+ this package functionality was included into the core.

Welcome React Navigation user seeking focus 😀

This is a quick, ready to use solution using HOC to expose props.isFocused. No Redux needed

Installation

  1. Install the latest version of react-navigation
  2. Install the latest version of react-navigation-is-focused-hoc from npm
yarn add react-navigation-is-focused-hoc

or

npm install --save react-navigation-is-focused-hoc

Full Usage Example

To see more of the react-navigation-is-focused-hoc in action, you can check out the source in ExampleNavigation folder.

Usage

app.js

import React from 'react'
import { StackNavigator } from 'react-navigation'
import { updateFocus, getCurrentRouteKey } from 'react-navigation-is-focused-hoc'

import MyScreenView from './screens/myScreenView'

// navigation
const AppNavigator = StackNavigator({
  MyScreenView: { screen: MyScreenView },
}, {
  initialRouteName: 'MyScreenView',
})

export default class App extends React.Component {

  render() {
    return (
      <AppNavigator
        onNavigationStateChange={(prevState, currentState) => {
          // If you want to ignore the state changed from `DrawerNavigator`, use this:
          /*
            if (/^Drawer(Open|Close|Toggle)$/.test(getCurrentRouteKey(currentState)) === false) {
              updateFocus(currentState)
              return
            }
          */
          updateFocus(currentState)
        }}
      />
    )
  }
}

myScreenView.js

import React from 'react'
import PropTypes from 'prop-types'
import {
  View,
  Text,
} from 'react-native'
import { withNavigationFocus } from 'react-navigation-is-focused-hoc'

class MyScreenView extends React.Component {
  static propTypes = {
    isFocused: PropTypes.bool.isRequired,
    focusedRouteKey: PropTypes.string.isRequired,
  }

  componentWillReceiveProps(nextProps) {
    if (!this.props.isFocused && nextProps.isFocused) {
      // screen enter (refresh data, update ui ...)
    }
    if (this.props.isFocused && !nextProps.isFocused) {
      // screen exit
    }
  }

  shouldComponentUpdate(nextProps) {
    // Update only once after the screen disappears
    if (this.props.isFocused && !nextProps.isFocused) {
      return true
    }

    // Don't update if the screen is not focused
    if (!this.props.isFocused && !nextProps.isFocused) {
      return false
    }

    // Update the screen if its re-enter
    return !this.props.isFocused && nextProps.isFocused
  }

  render() {
    if (!this.props.isFocused /*&& this.props.focusedRouteKey.indexOf('Drawer') !== 0*/) {
      return null
    }

    return (
      <View>
        {this.props.isFocused
          ? <Text>I am focused</Text>
          : <Text>I am not focused</Text>
        }
      </View>
    )
  }
}

// second argument is optional and is for defining your initial route
// ie: export default withNavigationFocus(MyScreenView, true)
export default withNavigationFocus(MyScreenView)

Or with ES7 decorators:

 @withNavigationFocus('MyScreenView')
 export default class MyScreenView extends React.Component {
   // ...
 }

Contributiors

|
Peter Machowski

|
Patrick Wozniak

|
Charles Crete

|
Ulises Giacoman


Special thanks

Thanks to Adam (@skevy), Mike (@grabbou), Satyajit (@satya164) and others for the react-navigation module

You can’t perform that action at this time.