React Native Android lag during animation

Question

I experience the lag during transition animation when Navigator goes to below scene ShiftEdit. Animation starts immediately but it stops for a millisecond. InteractionManager is used to postpone rendering of four picker components. Every picker component has list of items that is built from an array. There is lots of items. Is it possible that this is calculated even when picker component isn't rendered yet in ShiftEdit and this is the reason of the lag? Could you help me please?

'use strict'
    import React, {View, Text, StyleSheet, InteractionManager, TouchableOpacity} from 'react-native';
    import { connect } from 'react-redux';
    import Spinner from 'react-native-spinkit';
    import StyleCommon from '../styles';
    import TimePicker from '../components/time-picker';
    import ColorPicker from '../components/color-picker';
    import LabelPicker from '../components/label-picker';


    class ShiftEdit extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          isReady: false,
          shiftId: '',
          startHour: '',
          endHour: '',
          color: '',
        }
      }

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

      onChangeItem = (label, val) => {
        let data = {};
        data[label] = val;
        this.setState(data);
      }

      renderPlaceholder() {
         return (
           <View style={styles.container}>
             <Text>Loading...</Text>
           </View>
         )
       }

      render() {
        if (!this.state.isReady) {
          return this.renderPlaceholder();
        }

        return (
          <View style={{flex:1, flexDirection: 'column'}}>
            <TimePicker label={'Start hour'} value={this.state.startHour} onChange={this.onChangeItem.bind(this, 'startHour')} />
            <TimePicker label={'End hour'} value={this.state.endHour} onChange={this.onChangeItem.bind(this, 'endHour')} />
            <ColorPicker label={'Color'} value={this.state.color} onChange={this.onChangeItem.bind(this, 'color')} />
            <LabelPicker label={'Shift ID'} value={this.state.shiftId} onChange={this.onChangeItem.bind(this, 'shiftId')} />
          </View>
        )
      }
    };

I tried to control animation registration as Chris suggested but it still the same:

  onPress = () => {
    let handle = InteractionManager.createInteractionHandle();
    this.props.navigator.push({component: 'shiftedit'});
    InteractionManager.clearInteractionHandle(handle);
  }

Przemek Piechota · Accepted Answer · 2016-07-16 16:55:44Z

1

Actually this is the only solution that works for me now:

  componentDidMount() {
    // InteractionManager.runAfterInteractions(() => {
    //   this.setState({isReady: true});
    // })
    setTimeout(() => {
       this.setState({isReady: true});
    }, 75);
  }

but I'd rather use InteractionManager...

answered Jul 16, 2016 at 16:55

Przemek Piechota

1,7432 gold badges14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

narayanan Over a year ago

Instead of using InteractionManager in ShiftEdit, can you try using InteractionManager.runAfterInteractions inside the componentDidMount of each picker component? Let me know if that helps!

Przemek Piechota Over a year ago

Hi, I already checked it, but it works the same, I use RN 0.22 maybe this is the case.

Chris Geirman · Accepted Answer · 2016-07-16 12:38:39Z

0

Here's a wild guess as I've no experience with InteractionManager directly. But after looking over the Interaction Manager Docs I noticed that there's a way to register animations. So, my guess is that the Navigator's animations haven't been properly registered. So maybe try something like this...

var handle = InteractionManager.createInteractionHandle();
// run your navigator.push() here... (`runAfterInteractions` tasks are queued)
// later, on animation completion:
InteractionManager.clearInteractionHandle(handle);
// queued tasks run if all handles were cleared

Hope that helps!

answered Jul 16, 2016 at 12:38

Chris Geirman

9,7045 gold badges40 silver badges71 bronze badges

Comments

Marc · Accepted Answer · 2020-04-18 18:03:55Z

0

Also, keep in mind that if you're running the React Native Debugger while testing your app, React Native animations will appear jittery on Android.

That's been my experience.

https://github.com/jhen0409/react-native-debugger

answered Apr 18, 2020 at 18:03

Marc

1,8102 gold badges19 silver badges27 bronze badges

Collectives™ on Stack Overflow

React Native Android lag during animation

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related