How Reload WebView on react navigation

Question

How I can reload a webview to initial source when I click on button from navigator? I can reset a original componet using?

React.useEffect(() => {
     const unsubscribe = navigation.addListener('tabPress', e => {
  
});

Or I can reload the webview on component?

function TabOneNavigator({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('tabPress', e => {
      alert('Default behavior prevented');
    });

    return unsubscribe;
  }, [navigation]);

  return (
    <TabOneStack.Navigator>
      <TabOneStack.Screen
        name="Perfil"
        component={TabOneScreen}
        options={{ headerTitle: 'IzyJob' }}
      />
    </TabOneStack.Navigator>
  );
}

my screen

export default class App extends React.Component {
  state = {
    url: 'https://www.google.com'
  };
  render() {
    return <WebView 
    source={{ uri: this.state.url }} 
    style={{ marginTop: 0 }} />;
  }
}

My idea is when page on webview is different of state.url and has a click on tab navigation I reload to initial url

jamal · Accepted Answer · 2020-07-10 06:08:01Z

2

First create reference for the webview, like given below

<WebView
    ref={(ref) => { this.webview = ref; }}
    source={{ uri: this.state.url }} 
    style={{ marginTop: 0 }} />;

Then call this.webview.reload() where you want, this code will help you to refresh your webview

answered Jul 10, 2020 at 6:08

jamal

1,1151 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Guilherme Freire Over a year ago

how I can use this.webview.reload() in another component? i need use with ref?

jamal Over a year ago

create a ref in parent component and pass to webview component and give that ref to webview then you can refresh the webview by calling ref.reload() from parent

Collectives™ on Stack Overflow

How Reload WebView on react navigation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related