CODEWITHSUNDEEP
reactjsreact-native
anju baby
anju baby

Reputation: 43

React-native slow UI transitions Performance slow

I've built an android app in React Native that does location tracking, sending the lat/lng regularly to a server of the user's choosing. And admin user can track the users by listing the changes in locations regularly by initiating a polling with a time interval of 1 second and this creates UI to respond slowly and there is some lag in moving between components. I am using react-native-background-timer but it didn't worked as expected.

What will be the best method to invoke the polling function without blocking UI? Here is my code 

`onChangeTab(event) {
  if (event === 1) {
     intervalId = BackgroundTimer.setInterval(() => {
      this.props.actions.getAllLocationAction();
    }, 2000);
  } else {
    BackgroundTimer.clearInterval(intervalId);
  }
  this.setState({
    activeTab: event
  });
}`

Upvotes: 1

Views: 1676

Answers (1)

dentemm
dentemm

Reputation: 6379

If your UI consists of animations, you can make use of the InteractionManager API. There is a runAfterInteractions() method which allows you delay your (long running) operations until all animations are completed. For example:

import { InteractionManager } from 'react-native';

onChangeTab(event) {
  if (event === 1) {
    InteractionManager.runAfterInteractions(() => {
      this.props.dispatchTeamFetchStart();
    });
  }
  this.setState({
    activeTab: event
  });
}

Upvotes: 1

Related Questions