react-nativeexporeact-native-webview

Refresh WebView to initial url after tab switch


I'm creating a simple application that displays the contents of the example.com store. The application has 2 navigation buttons (Shop and Basket).

I've created React Native + Expo app using Navigation template. I've added 2 tabs (index.tsx & basket.tsx). Tabs are almost identical, the only difference is the source attribute in the WebView component (https://example.com and https://example.com/basket):

import { StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
import { View } from '@/components/Themed';

export default function IndexScreen() {

  return (
    <View style={styles.container}>
      <WebView
        source={{ uri: 'https://example.com' }}
      />
    </View>
  );
}

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

The application and navigation buttons work properly. However, I want the WebView to ALWAYS be reloaded with the original URL (https://example.com/basket) when I press the Basket tab.


Solution

  • Solution was to add unmountOnBlur: true, as an option of the tab:

          <Tabs.Screen
            name="basket"
            options={{
              title: 'Basket',
              tabBarIcon: ({ color }) => <TabBarIcon name="shopping-cart" color={color} />,
              unmountOnBlur: true,
            }}
          />