CODEWITHSUNDEEP
react-native
Joe Caraccio
Joe Caraccio

Reputation: 2035

Make transitions smoother?

I have a more general question. On my app I am using React Native Router Flux to move from page to page. I have noticed depending on the page, it will transition in smoother. In particular, when trying to open up a page that utilizes the camera, the transition is choppy and awful. Obviously there is a lot utilized, as the camera is called up and a live feed of it is loaded into the page once that page is load.

Are there anyways to move these transitions look good, like in many other apps? Are there methods like ComponentDidMount or the constructor to avoid logic? Is there some strategy to implement.

Any advice would be incredible!

Upvotes: 1

Views: 97

Answers (1)

jevakallio
jevakallio

Reputation: 35970

You can use the InteractionManager.runAfterInteractions callback to delay expensive renders until the current transition has finished.

class SomeView extends Component {
  state = {
    ready: false
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.setState({ready: true})
    });
  }

  render() {
    if (!this.state.ready) {
      // render some placeholder view
    }

    // render the actual view
  }
}

Upvotes: 1

Related Questions