Android hardware back exit or back page

[forster-thomas]

Hi guys!

I need some help. I'm newest on react-native. And I don't know how fix that problem. I try any solutions, but neither one fix my occurrence.
That's the hell.

I have on "Home.js" and a "Detail.js".
When I'm on Home.js, and press android hardware button, I need to app close. That work's perfectly. But, when I go to Detail, and press android hardware button, the app close too. BUT I want to go back, and not close it.

See my files and show me the WAY. Thnks 4all.

Home.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import AXIOS from 'axios';
import { AsyncStorage, BackHandler, FlatList } from 'react-native';
import { Body, Button, Container, Content, Footer, FooterTab, Header, Icon, Left, Right, Text, Title } from 'native-base';
import { List, ListItem } from 'react-native-elements';
import { SetUserArticles, UserSession, modifySESSIONID } from '../actions/auth';
import Loading from '../components/Loading/Loading';
import { Login } from '../routes/Screens';

class Home extends Component {
constructor(props) {
super(props);

this.state = {
  keyname: '',
  visible: true,
  loading: true,
  state: false,
  sessionid: '',
  url: '',
  email: '',
  password: '',
  ticketids: '',
  chamados: []
};

}

componentWillMount() {
this.setState({ keyname: this.props.navigation.state.key });
}

componentDidMount() {
console.disableYellowBox = true;
console.log(this.props);

BackHandler.addEventListener('hardwareBackPress', () => {
  if (this.state.keyname === 'Home') {
    this._handleBackButton();
  }
});
this._loadAsyncArticles();

}

_handleBackButton() {
BackHandler.exitApp();
}

_loadAsyncArticles() {
AsyncStorage.getItem('UserArticles').then((ARTICLES) => {
if (ARTICLES === null) {
this._loadSession();
} else {
const DataArticles = JSON.parse(ARTICLES);
this.setState({
visible: false,
chamados: DataArticles.Articles
});
}
});
}

_reloadLogin = async () => {
const url = this.state.url;
const email = this.state.email;
const password = this.state.password;

try {
  return await AXIOS({
    url: `${url}/nph-genericinterface.pl/Webservice/AppTicket/Session`,
    method: 'POST',
    params: {
      UserLogin: email,
      Password: password,
    }
  });
} catch (error) {
  console.log('reloadLogin: ', error);
}

}

_loadSession = async () => {
try {
await AsyncStorage.getItem('UserSession').then((session) => {
if (session != null) {
const DataSession = JSON.parse(session);
this.setState({
sessionid: (DataSession.sessionid !== '') ? DataSession.sessionid : null,
});

      if (this.state.sessionid !== null) {
        this._loadUserData().then(() => {
          const url = this.state.url;
          const SessionID = this.state.sessionid;

          AXIOS({
            url: `${url}/nph-genericinterface.pl/Webservice/AppTicket/TicketSearch`,
            method: 'GET',
            params: {
              SessionID,
              Limit: 25
            }
          }).then((GETSESSION) => {
            const DATA = GETSESSION.data;

            if (Object.prototype.hasOwnProperty.call(DATA, 'Error')) {
              this._reloadLogin().then((result) => {
                if (Object.prototype.hasOwnProperty.call(result.data, 'SessionID')) {
                  this.props.modifySESSIONID(result.data.SessionID);

                  this.setState({
                    sessionid: result.data.SessionID
                  });

                  const sessionid = result.data.SessionID;
                  this.props.UserSession({ sessionid });
                }

                this._loadSession();
              });
            } else {
              const IDS = DATA.TicketID;
              let TICKETIDS = '';
              IDS.forEach((ticket) => { TICKETIDS += `${ticket},`; });
              TICKETIDS = TICKETIDS.slice(0, -1);

              this.setState({
                ticketids: `${TICKETIDS}`
              });

              this._loadArticles().then((result) => {
                const Articles = {
                  Articles: result.data.Ticket,
                  Timestamp: Date.now()
                };

                this.props.SetUserArticles(Articles);
                this._loadAsyncArticles();
              });
            }
          });
        });
      }
    }
  });
} catch (error) {
  console.log(error);
}

}

_loadUserData = async () => {
try {
await AsyncStorage.getItem('UserLogin').then((info) => {
if (info != null) {
const DataInfo = JSON.parse(info);
this.setState({
url: (DataInfo.url !== '') ? DataInfo.url : null,
email: (DataInfo.email !== '') ? DataInfo.email : null,
password: (DataInfo.password !== '') ? DataInfo.password : null,
});
}
});
} catch (error) {
console.log(error);
}
}

_loadArticles = async () => {
const url = this.state.url;
const SessionID = this.state.sessionid;
const TicketID = this.state.ticketids;
const AllArticles = 1;

try {
  return await AXIOS({
    url: `${url}/nph-genericinterface.pl/Webservice/AppTicket/TicketGet`,
    method: 'GET',
    params: {
      AllArticles,
      SessionID,
      TicketID
    }
  });
} catch (error) {
  console.log(error);
}

}

_handleTicket = (ticket) => {
BackHandler.removeEventListener('hardwareBackPress', this._handleBackButton);
this.props.navigation.navigate('Detail', ticket);
}

_handleClearArticles() {
AsyncStorage.removeItem('UserArticles');
this.setState({ visible: true });
this._loadAsyncArticles();
}

_handleExit() {
AsyncStorage.removeItem('UserSession');
this.props.navigation.navigate(Login);
}

render() {
if (this.state.visible) {
return (

);
}

return (
  <Container>
    <Header style={{ marginBottom: -20 }}>
      <Left>
        <Button transparent onPress={() => this.props.navigation.navigate('DrawerOpen')}>
          <Icon name='menu' />
        </Button>
      </Left>
      <Body>
        <Title>Header</Title>
      </Body>
      <Right />
    </Header>
    <Content>
      <List>
        <FlatList
          data={this.state.chamados}
          renderItem={({ item }) => (
            <ListItem onPress={() => this._handleTicket(item)} title={item.Title} subtitle={item.Created} subtitle={item.Created} />
          )}
          keyExtractor={item => item.TicketID}
        />
      </List>
    </Content>
    <Footer>
      <FooterTab>
        <Button vertical onPress={() => this._handleExit()}>
          <Icon name='exit' />
          <Text>Sign Out</Text>
        </Button>
        <Button vertical onPress={() => this._handleClearArticles()}>
          <Icon name='trash' />
          <Text>Clear Articles</Text>
        </Button>
      </FooterTab>
    </Footer>
  </Container>
);

}
}

const mapStateToProps = state => ({
sessionid: state.Spread.sessionid
});

export default connect(mapStateToProps, { SetUserArticles, UserSession, modifySESSIONID })(Home);

Detail.js
import React, { Component } from 'react';
import { NavigationActions } from 'react-navigation';
import { Body, Button, Container, Content, Header, Icon, Left, Subtitle, Title } from 'native-base';

class Detail extends Component {
render() {
const title = this.props.navigation.state.params.Title;
const ticketNumber = Ticket#${this.props.navigation.state.params.TicketNumber};

return (
  <Container>
    <Header noShadow style={{ marginBottom: -20 }}>
      <Left>
        <Button
          transparent
          onPress={() => {
            const dispatch = this.props.navigation.dispatch;
            dispatch(NavigationActions.back());
          }}
        >
          <Icon name='arrow-back' />
        </Button>
      </Left>
      <Body style={{ marginLeft: -100 }}>
        <Title> {title} </Title>
        <Subtitle> {ticketNumber} </Subtitle>
      </Body>
    </Header>
    <Content />
  </Container>
);

}
}

export default Detail;

[react-native-bot]

Thanks for posting this! It looks like your issue may be incomplete. Are all the fields required by the Issue Template filled out?

If you believe your issue contains all the relevant information, let us know in order to have a maintainer remove the No Template label. Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[kunalqss]

@forster-thomas I use react-navigation in my project and it handles app navigation properly without me having to add back button listener.

When navigating from Login to Detail, use

this.props.navigation.navigate('Login')

and when navigating back from Detail to Login, simply invoke goBack() function on the navigation prop.

this.props.navigation.goBack()

Make sure both of these screens are declared in a single StackNavigator Object in your main router. That is only when the system will treat both screens as part of a single stack, and then push detail page on top of login initially, and pop the detail page from stack when goBack is invoked.

[christoph-jerolimov]

Hi, I created a PR which fixes this issue. Maybe you can verify this this change and give a thump up for #19077.

[react-native-bot]

This issue looks like a question and not an actual bug report. Please try asking over on Stack Overflow instead.