Ignite: backButton Android

Created on 10 Jan 2018  路  2Comments  路  Source: infinitered/ignite

The back button of Android closes the application rather than returning a screen, how do I just go back to the screen? I'm using ignite without devScreen. Thanks in advance

discussion question

Most helpful comment

Following https://reactnavigation.org/docs/guides/redux#Handling-the-Hardware-Back-Button-in-Android I have edited ReduxNavigation.js and back button is working. Maybe can it be added to boilerplate?

import React from 'react'
import { BackHandler } from 'react-native'
import { addNavigationHelpers, NavigationActions } from 'react-navigation'
import { connect } from 'react-redux'
import AppNavigation from './AppNavigation'

class ReduxNavigation extends React.Component {
  componentDidMount () {
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress)
  }

  componentWillUnmount () {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress)
  }

  onBackPress = () => {
    const { dispatch, nav } = this.props
    if (nav.index === 0) {
      return false
    }
    dispatch(NavigationActions.back())

    return true
  }

  render () {
    const { dispatch, nav } = this.props
    const navigation = addNavigationHelpers({
      dispatch,
      state: nav
    })

    return <AppNavigation navigation={navigation} />
  }
}

const mapStateToProps = state => ({ nav: state.nav })
export default connect(mapStateToProps)(ReduxNavigation)

All 2 comments

Following https://reactnavigation.org/docs/guides/redux#Handling-the-Hardware-Back-Button-in-Android I have edited ReduxNavigation.js and back button is working. Maybe can it be added to boilerplate?

import React from 'react'
import { BackHandler } from 'react-native'
import { addNavigationHelpers, NavigationActions } from 'react-navigation'
import { connect } from 'react-redux'
import AppNavigation from './AppNavigation'

class ReduxNavigation extends React.Component {
  componentDidMount () {
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress)
  }

  componentWillUnmount () {
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress)
  }

  onBackPress = () => {
    const { dispatch, nav } = this.props
    if (nav.index === 0) {
      return false
    }
    dispatch(NavigationActions.back())

    return true
  }

  render () {
    const { dispatch, nav } = this.props
    const navigation = addNavigationHelpers({
      dispatch,
      state: nav
    })

    return <AppNavigation navigation={navigation} />
  }
}

const mapStateToProps = state => ({ nav: state.nav })
export default connect(mapStateToProps)(ReduxNavigation)

We don't have this in our current boilerplate, but the next boilerplate we're releasing does.

Thanks for the code @mariomka !

Was this page helpful?
0 / 5 - 0 ratings

Related issues

GantMan picture GantMan  路  3Comments

jamonholmgren picture jamonholmgren  路  3Comments

ta-ssi-lo picture ta-ssi-lo  路  3Comments

vesper8 picture vesper8  路  3Comments

TitanKing picture TitanKing  路  3Comments