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 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,
}}
/>