React-native-router-flux: Navigation is not smooth

Created on 2 Nov 2016 · 5Comments · Source: aksonov/react-native-router-flux

I am using

react-native-router-flux v3.35.0
react-native v0.34.1

Navigation between pages is not smooth.It takes more than 4 seconds to go to other page.
I am working on Android with Geny Motion. I turned off Dev Mode and disabled live reload,Hot reloading.

My App has lot of static images(so far around 10+). It will get bigger.Kindly assist what need to be done. So that it will be a smooth navigation.

Source

ManiSJ

Most helpful comment

You should try rendering a placeholder while the animation is in progress, this is mentioned in the core RN docs. See if this helps:

constructor() {
      super();
      this.state = {
        renderPlaceholderOnly: true,
      };
    }

    componentDidMount() {
      InteractionManager.runAfterInteractions(() => {
        this.setState({
          renderPlaceholderOnly: false,
        });
      });
    }

    render() {
        if (this.staterenderPlaceholderOnly) {
            return null; // render some non-heavy component
        }

        // render images here
    }

Ehesp on 2 Nov 2016

👍9 🎉2

All 5 comments

You should try rendering a placeholder while the animation is in progress, this is mentioned in the core RN docs. See if this helps:

constructor() {
      super();
      this.state = {
        renderPlaceholderOnly: true,
      };
    }

    componentDidMount() {
      InteractionManager.runAfterInteractions(() => {
        this.setState({
          renderPlaceholderOnly: false,
        });
      });
    }

    render() {
        if (this.staterenderPlaceholderOnly) {
            return null; // render some non-heavy component
        }

        // render images here
    }

Ehesp on 2 Nov 2016

👍9 🎉2

I don't get it right now what u said. But after reducing the dimension of images and reducing the size of images to few KB navigation is smooth now. Few of my image was in few MB and higher dimensions.

I will look into what u said since I just now started to explore React Native

ManiSJ on 2 Nov 2016

Yeah you're images should not be MB, they should be <200kb if you can help it.

Check out: https://facebook.github.io/react-native/docs/performance.html#slow-navigator-transitions

Ehesp on 2 Nov 2016

👍1

relate to this topic #1717 let us talk about it.