How to use @shoutem/animation - 10 common examples

this.setStatusBarStyle(backgroundColor);
    // Key must be set to render new screen NavigationBar
    return (
      
        {this.renderStatusBar()}
        
      
    );
  }
}

const AnimatedNavigationBar = connectAnimation(composeChildren(NavigationBar));
const StyledNavigationBar = connectStyle('shoutem.ui.NavigationBar')(AnimatedNavigationBar);

export {
  StyledNavigationBar as NavigationBar,
};

createFallbackNavBarInterpolation(previousProps, currentProps) {
    // Use 250ms as transition duration
    const driver = new TimingDriver({ duration: 250 });
    driver.runTimer(1);

    return {
      backgroundColor: driver.value.interpolate({
        inputRange: [0, 1],
        outputRange: this.getColors('backgroundColor', previousProps, currentProps),
        extrapolate: 'clamp',
      }),
      borderBottomColor: driver.value.interpolate({
        inputRange: [0, 1],
        outputRange: this.getColors('borderBottomColor', previousProps, currentProps),
        extrapolate: 'clamp',
      }),
    };
  }

createFallbackNavBarInterpolation(previousProps, currentProps) {
    // Use 250ms as transition duration
    const driver = new TimingDriver({ duration: 250 });
    driver.runTimer(1);

    return {
      backgroundColor: driver.value.interpolate({
        inputRange: [0, 1],
        outputRange: this.getColors('backgroundColor', previousProps, currentProps),
        extrapolate: 'clamp',
      }),
      borderBottomColor: driver.value.interpolate({
        inputRange: [0, 1],
        outputRange: this.getColors('borderBottomColor', previousProps, currentProps),
        extrapolate: 'clamp',
      }),
    };
  }

setStatusBarStyleAndroid(containerBackgroundColor, backgroundColor, statusBarStyle = {}) {
    // Android cannot resolve interpolated values for animated status bar
    // background colors so we fall back to default Android status bar styling
    if (isAnimatedStyleValue(containerBackgroundColor)) {
      StatusBar.setBackgroundColor('rgba(0, 0, 0, 0.2)');
      StatusBar.setBarStyle('default');
    } else {
      StatusBar.setBackgroundColor(containerBackgroundColor);
    }

    if (isAnimatedStyleValue(backgroundColor)) {
      this.backgroundListenerId = addAnimatedValueListener(backgroundColor, () => {
        this.resolveStatusBarStyle(backgroundColor);
      });
    }

    this.resolveStatusBarStyle(backgroundColor, true);

    if (!_.isUndefined(statusBarStyle.transluscent)) {
      StatusBar.setTranslucent(statusBarStyle.transluscent);

setStatusBarStyleAndroid(containerBackgroundColor, backgroundColor, statusBarStyle = {}) {
    // Android cannot resolve interpolated values for animated status bar
    // background colors so we fall back to default Android status bar styling
    if (isAnimatedStyleValue(containerBackgroundColor)) {
      StatusBar.setBackgroundColor('rgba(0, 0, 0, 0.2)');
      StatusBar.setBarStyle('default');
    } else {
      StatusBar.setBackgroundColor(containerBackgroundColor);
    }

    if (isAnimatedStyleValue(backgroundColor)) {
      this.backgroundListenerId = addAnimatedValueListener(backgroundColor, () => {
        this.resolveStatusBarStyle(backgroundColor);
      });
    }

    this.resolveStatusBarStyle(backgroundColor, true);

    if (!_.isUndefined(statusBarStyle.transluscent)) {
      StatusBar.setTranslucent(statusBarStyle.transluscent);

setStatusBarStyleIos(statusBarColor, backgroundColor, hasImage) {
    if (isAnimatedStyleValue(backgroundColor) && !Device.isIphoneX && !Device.isIphoneXR) {
      // If the backgroundColor is animated, we want to listen for
      // color changes, so that we can update the bar style as the
      // animation runs.
      this.backgroundListenerId = addAnimatedValueListener(backgroundColor, () => {
        this.resolveStatusBarStyle(backgroundColor);
      });
    }

    // Set the bar style based on the current background color value
    hasImage ?
      this.resolveStatusBarStyle(statusBarColor, true) :
      this.resolveStatusBarStyle(backgroundColor, true);
  }

setStatusBarStyleAndroid(containerBackgroundColor, backgroundColor, statusBarStyle = {}) {
    // Android cannot resolve interpolated values for animated status bar
    // background colors so we fall back to default Android status bar styling
    if (isAnimatedStyleValue(containerBackgroundColor)) {
      StatusBar.setBackgroundColor('rgba(0, 0, 0, 0.2)');
      StatusBar.setBarStyle('default');
    } else {
      StatusBar.setBackgroundColor(containerBackgroundColor);
    }

    if (isAnimatedStyleValue(backgroundColor)) {
      this.backgroundListenerId = addAnimatedValueListener(backgroundColor, () => {
        this.resolveStatusBarStyle(backgroundColor);
      });
    }

    this.resolveStatusBarStyle(backgroundColor, true);

    if (!_.isUndefined(statusBarStyle.transluscent)) {
      StatusBar.setTranslucent(statusBarStyle.transluscent);
    }
  }

setStatusBarStyleIos(statusBarColor, backgroundColor, hasImage) {
    if (isAnimatedStyleValue(backgroundColor) && !Device.isIphoneX && !Device.isIphoneXR) {
      // If the backgroundColor is animated, we want to listen for
      // color changes, so that we can update the bar style as the
      // animation runs.
      this.backgroundListenerId = addAnimatedValueListener(backgroundColor, () => {
        this.resolveStatusBarStyle(backgroundColor);
      });
    }

    // Set the bar style based on the current background color value
    hasImage ?
      this.resolveStatusBarStyle(statusBarColor, true) :
      this.resolveStatusBarStyle(backgroundColor, true);
  }

setStatusBarStyleAndroid(containerBackgroundColor, backgroundColor, statusBarStyle = {}) {
    // Android cannot resolve interpolated values for animated status bar
    // background colors so we fall back to default Android status bar styling
    if (isAnimatedStyleValue(containerBackgroundColor)) {
      StatusBar.setBackgroundColor('rgba(0, 0, 0, 0.2)');
      StatusBar.setBarStyle('default');
    } else {
      StatusBar.setBackgroundColor(containerBackgroundColor);
    }

    if (isAnimatedStyleValue(backgroundColor)) {
      this.backgroundListenerId = addAnimatedValueListener(backgroundColor, () => {
        this.resolveStatusBarStyle(backgroundColor);
      });
    }

    this.resolveStatusBarStyle(backgroundColor, true);

    if (!_.isUndefined(statusBarStyle.transluscent)) {
      StatusBar.setTranslucent(statusBarStyle.transluscent);
    }
  }

interpolateNavBarStyle() {
    const { position, scene, scenes } = this.props;
    const { index } = scene;

    const positionValue = getAnimatedStyleValue(position);
    if (positionValue === index) {
      // We are not in a transition, do not override the
      // default style to allow any custom animations that
      // the screen may want to perform on the NavigationBar
      return {};
    } else if (this.props.inline) {
      // The navigation bar is rendered inline with the screen,
      // it will be animated together with the screen, so there
      // is no need for custom animations in this case.
      return {};
    }

    // resolveSceneProps will return the latest version of the props
    // from the parent component. This is necessary to perform the
    // animations to the final state of the navigation bar. Otherwise
    // we are often getting various delays and flickers during transitions.