Android backbutton not working for app

Expo SDK
1

Ive been trying to mqke andriod backbutton work on my expo react native app but it not working

2

Hi @ollie37

If you’re using React Navigation it should work, but you can customise it:

1 Like
3

Im using react webview

4

I’m not sure what you mean exactly.

Could you post some example code to show what you mean and explain what you want to happen when the back button is pressed?

5

This is my code below

import * as React from 'react';
import { WebView } from 'react-native-webview';
import { StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  return (
    <WebView
      style={styles.container}
      originWhitelist={['*']}
      source={{ html: '<h1><center>Hello world</center></h1>' }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
});

Now the andriod normal back button isnt working.

6

Please explain what you mean by “not working”. What are you expecting to happen when the user presses the back button?

7

Let say this is the code

import * as React from 'react';
import { WebView } from 'react-native-webview';
import { StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: 'https://google.com' }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
});

I want the app to go back when the andriod backbutton is presed but it keeps exiting the app.

8

OK, you still haven’t explained it very well :slight_smile:

But I think I can guess what you mean.

I suppose you mean that if the user clicks on a link within the WebView, you want them to be able to navigate back to the previous page inside the WebView if they press the Android back button?

If so, see the following section of the react-native-webview docs:

Page navigation gesture and button support

[…]
For Android, you need to use BackHandler.addEventListener and hook that up to call goBack on the WebView.

Click the link for the full info and an example.

9

I still don’t understand that it. Can you ive me an example code

10

I just combined the code from your previous comment with the example code from the react-native-webview documentation:

1 Like
11

Thank you so much. I hope one day, i become this good. Can you please give me a word of advice.

1 Like
12

Just keep at it :slight_smile: It’s sometimes hard, but it gets easier

13

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.