[question] track ending animation of route change

[maxaleks]

Is there any way to track ending animation of route change? I want to render loading image during the animation and render my component when animation is completed

Router:

    <Router>
      <Scene key="root">
        <Scene key="login" component={Login} hideNavBar/>
        <Scene key="drawer" component={Drawer} open={false} type="replace" initial>
          <Scene key="main" initial navBar={Header}>
            <Scene key="search" component={Search} type="replace" initial />
            <Scene key="map" component={Map} />
          </Scene>
        </Scene>
      </Scene>
    </Router>

Button in search scene:
<Button buttonStyle={styles.button} title="map" onPress={Actions.map} />

Map component:

import MapView from 'react-native-maps';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
      </View>
    );
  }
}

There is default left-to-right animation, and it slows down due to load map. I need to render map when the animation is finished.

[konstantin-mohin]

have a similar problem...

[konstantin-mohin]

as friends suggested to me, so you need do this

import { 
    InteractionsManager
} from 'react-native'

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

[maxaleks]

@konstantin-mohin, thanks for the reply. I will try this solution

[tiaanduplessis]

@konstantin-mohin worked great for me thanks