Re-render web-view on bottomTabNavigator

Asked
Active3 hr before
Viewed126 times

7 Answers

render
90%

Solved by putting resetOnBlur: CarrinhoScreen after backBehavior: history You can put any other screen you want to reset on there., By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy. , Short story about someone who is exiled on a prison planet where some people bury themselves in the ground or grow extra limbs

Pretag
 Pretag team - issue, fix, solve, resolve
88%

Pretag
 Pretag team - issue, fix, solve, resolve
72%

im using bottomTabNavigator and still cant re-render my view,As far as I know, a component will be triggered to render itself when its state is changed or forceUpdate function is called explicitly. How to accomplish this with navigators?,I have a similar issue on beta11, DrawerNavigator not re-rendering when screenProps passed to navigationOptions change.

const ContactTabs = TabNavigator(
    {
        ContactList: {
            screen: ContactList,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: ({ tintColor }) => <TouchableOpacity onPress={()=>navigation.navigate('ContactList', {date: new Date()})} style={{flex: 1, alignItems:'center', justifyContent: 'center'}}><Text>All</Text></TouchableOpacity>,
            }),
        },
        Favorites: {
            screen: Favorites,
            navigationOptions: ({navigation}) => ({
                tabBarLabel: ({ tintColor }) => <TouchableOpacity onPress={()=>navigation.navigate('Favorites', {date: new Date()})} style={{flex: 1, alignItems:'center', justifyContent: 'center'}}><Text>Favorites</Text></TouchableOpacity>,
            }),
        },
    })
load more v
65%

Now, if you call this.resetWebViewToInitialUrl() it will force the WebView component to re-render, causing it to reset its internal url.,It would make more sense to reset it only when the url changes. To do this:,One of these things is resetting the WebView to the initial url once the user navigated away, to other urls.

One options would be to use the WebView ref methods to control the navigation:

class App extends Component {  goBack = () => {    this.webview.goBack();  };  render() {    return (      <WebView        ref={r => this.webview = r}        source={{ uri: yourInitialUrl }}      />    );  }}
load more v
75%

Learn React Native, the future of mobile app development!

Pretag
 Pretag team - issue, fix, solve, resolve
40%

If you come from the web. Just like in react-router, in react navigation, the navigation prop will be changed to cause re-render. And when you are like me, use one same list component for multiple tabs, you will have problems when trying to figure out how to not-render and re-render at the proper time. But that is something we will solve today.,React navigation provides a this.props.navigation.addListener method where you can subscribe the events.,React navigation v2 is a library for handling navigation in React Native. When you are using Tab / Screen, maybe you only want to render it when it is been displayed. Otherwise, something like re-rendering multiple lists in multiple tabs. That’s a disaster… Let’s see how to do that.

123456789101112131415161718
load more v
22%

Let's see an example of displaying a pop-up modal on clicking the button. Once we clicked the button, state variable isVisible sets to true and opens the Modal component. ,The React Native Modal is a type of View component which is used to present the content above an enclosing view. There are three different types of options (slide, fade and none) available in a modal that decides how the modal will show inside the react native app.,To implement the Modal component import Modal from the react-native library.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "render-undefined" queries related to "Re-render web-view on bottomTabNavigator"