React: Как сделать переход как в магазине приложений iOS?

Question

Я пытаюсь имитировать переход с карты магазина приложений iOS, как здесь: https://www.youtube.com/watch?v=p7rHQSoKCVg

Это имитируется на различных репозиториях в Swift, но мне нужно решение для React. До сих пор все, что мы думали сделать, это держать пользователя на том же (домашнем) экране, но показывать представление, которое копирует экран элемента - мне нужно фактически перейти к отдельному, новому экрану элемента. И сохраняйте анимацию - нововведение для переходов React здесь и нужно знать, было ли это сделано или как перенастроить здесь ..

Что имеем:

 shouldComponentUpdate(nextProps, nextState) {
    if (!_.isEqual(nextState, this.state)) {
      return true;
    }
    if (!_.isEqual(nextProps, this.props)) {
      const a = nextProps;
      const b = this.props;
      const propDiff = _.reduce(
        a,
        function(result, value, key) {
          return _.isEqual(value, b[key]) ? result : result.concat(key);
        },
        []
      );
      const diffNextProps = {};
      propDiff.map(prop => (diffNextProps[prop] = nextProps[prop]));

      if (!this.state.isGrown && diffNextProps.items) {
        return false;
      }
    }
    return (
      nextProps.currentScreen === 'FeedItemCard' ||
      nextProps.currentScreen === 'Home'
    );
  }

  getItemData() {
    const { getItemScreenData, item } = this.props;
    // NOTE: this is a check for when coming back from editImage

    // TODO: create call for speicific item URL
    getItemScreenData(item._id).then(item => {
      this.getComponentGroups([
        item.originalItem ? item.originalItem : item._id
      ]);
    });
  }

  getComponentGroups(parentsItems: string[]) {
    const { getMultipleItems, syncItemComponentGroups } = this.props;
    getMultipleItems(parentsItems).then(items => {
      if (items) {
        syncItemComponentGroups(items);
      }
    });
  }     

animateGrow() {
        this.props.addScreenToStack(ScreenNames.FEED_ITEM_CARD);
        this.getItemData();
        this.props.selectItem(this.props.item, this.props.index);

        const animationStatus = true;
        this.props.updateFeedAnimationStatus(animationStatus);

        this.state.animatedValue.setValue(0);
        this.setState({
          firstLoad: false,
          imageSize: width,
          borderRadius: 0,
          imageTextPadding: 20,
          imageTextTopPadding: height > 800 ? 50 : 33,
          imageTextBottomPadding: 0,
          mainView: {
            backgroundColor: colors.WHITE,
            top: 0,
            zIndex: 10000
          },
          isGrown: true,
          isShrunk: false,
          isBouncingOnPress: false
        });

        Animated.spring(this.state.animatedValue, {
          toValue: 1,
          friction: 6,
          easing: Easing.bounce()
        }).start(() => {
          this.state.animatedValue.setValue(1);
          this.props.setHomeAction(() => this.animateShrink());
        });
      }

      animateShrink() {
        this.props.addScreenToStack(ScreenNames.HOME);
        const animationStatus = false;
        this.props.updateFeedAnimationStatus(animationStatus);

        this.state.animatedValue.setValue(0);
        this.setState({
          imageSize: Math.round(width) - 40,
          borderRadius: 15,
          imageTextPadding: 40,
          imageTextTopPadding: 20,
          imageTextBottomPadding: 40,
          mainView: {},
          isShrunk: true,
          isGrown: false
        });
        Animated.spring(this.state.animatedValue, {
          toValue: 1,
          speed: 0.5,
          easing: Easing.bounce()
        }).start(() => {
          this.state.animatedValue.setValue(1);
          this.setState({ isShrunk: false, firstLoad: true });
        });
      }

      bounceShrink() {
        this.state.animatedValue.setValue(0);
        this.setState({
          isBouncingOnPress: true
        });
        Animated.spring(this.state.animatedValue, {
          toValue: 1,
          friction: 8,
          easing: Easing.bounce()
        }).start(() => {
          this.state.animatedValue.setValue(1);
        });
      }

      bounceGrow() {
        this.state.animatedValue.setValue(0);
        this.setState({
          isBouncingOnRelease: true,
          isBouncingOnPress: false
        });
        Animated.spring(this.state.animatedValue, {
          toValue: 1,
          friction: 8,
          easing: Easing.bounce()
        }).start(() => {
          this.state.animatedValue.setValue(1);
          this.setState({
            isBouncingOnRelease: false
          });
        });
      }

      doubleTapActionFeedCard() {
        if (singleTapTimeout) {
          clearTimeout(singleTapTimeout);
          singleTapTimeout = false;
          if (!this.props.isAuthUser) {
            this.props.toggleLikeStatus(
              this.props.item._id,
              this.props.item.liked || false
            );
          }
        } else {
          singleTapTimeout = setTimeout(() => {
            if (this.props.user && !this.state.isGrown) {
              this.animateGrow();
            }
            singleTapTimeout = false;
          }, 150);
        }
      }

      navToItem(item: Object) {
        this.props.navigation.navigate('Item', {
          item: item,
          id: item._id,
          name: item.name,
          animateShrink: this.animateShrink
        });
      }

      onEditItem(status) {
        this.props.onEditItem(status);
      }

Это не правильно. Как мы можем воссоздать переход магазина приложений iOS в Реагировать на родную?