ListView в анимированный компонент FlatList

У меня есть компонент ListView, который анимируется и расширяется на весь экран. Поскольку ListView устарел, я пытался перейти на Flatlist. Компонент ListView выглядит так:

<AnimatedListView
  horizontal={true}
  pagingEnabled={!this.state.isDocked}
  style={this.getListViewStyle()}
  {...this._panResponder.panHandlers}
  dataSource={this.state.dataSource}
  enableEmptySections={true}
  renderRow={this._renderCard}
  initialListSize={10}
  scrollRenderAheadDistance={5}
/>;

теперь стиль здесь применяется следующим образом:

getListViewStyle() {
  return [
    styles.container,
    {
      width: this.state.dockAnimation.interpolate({
        inputRange: [0, 1],
        outputRange: [
          Dimensions.get("window").width,
          Dimensions.get("window").width * 2
        ]
        // extrapolate: 'clamp'
      })
    },
    {
      transform: [
        {
          scale: this.state.dockAnimation.interpolate({
            inputRange: [0, 1],
            outputRange: [1, 0.5]
            // extrapolate: 'clamp'
          })
        },
        {
          translateX: this.state.dockAnimation.interpolate({
            inputRange: [0, 1],
            outputRange: [0, -Dimensions.get("window").width]
            // extrapolate: 'clamp'
          })
        },
        {
          translateY: this.state.dockAnimation.interpolate({
            inputRange: [0, 1],
            outputRange: [0, Dimensions.get("window").height / 2]
            // extrapolate: 'clamp'
          })
        }
      ]
    }
  ];
}

panHandeler выглядит так:

this._panResponder = PanResponder.create({
  onStartShouldSetPanResponder: (evt, gestureState) => {
    return true;
  },
  onStartShouldSetPanResponderCapture: (evt, gestureState) => {
    return true;
  },
  onMoveShouldSetPanResponder: (evt, gestureState) => {
    return true;
  },
  onMoveShouldSetPanResponderCapture: (evt, gestureState) => {
    return true;
  },
  onPanResponderGrant: () => {},
  onPanResponderMove: Animated.event([
    null,
    { dx: this.state.pan.x, dy: this.state.pan.y }
  ]),
  onPanResponderRelease: (evt, gestureState) => {
    let shouldToggle = this.state.isDocked
      ? gestureState.dy < -panDiff / 3
      : gestureState.dy > panDiff / 3;
    if (!shouldToggle) {
      // return to original position
      Animated.spring(this.state.pan.y, {
        toValue: this.state.isDocked ? 0 : 0
      }).start();
    } else {
      // toggle between docked and zoomed
      Animated.spring(this.state.pan.y, {
        toValue: this.state.isDocked ? -panDiff : panDiff
      }).start(() => {
        this.setState({
          isDocked: !this.state.isDocked,
          dockAnimation: !this.state.isDocked
            ? this.state.pan.y.interpolate({
                inputRange: [-panDiff, 0],
                outputRange: [0, 1],
                extrapolate: "clamp"
              })
            : this.state.pan.y.interpolate({
                inputRange: [0, panDiff],
                outputRange: [0, 1],
                extrapolate: "clamp"
              })
        });
      });
    }
  }
});

Когда я конвертирую его в плоский список, используя let AminatedFlatlist = Animated.createAnimatedComponent(Flatlist)

Родительский интерфейс появляется, но плоский список не отображается.

В отладчике нет даже ошибок.

Может ли кто-нибудь сказать мне, как преобразовать приведенный выше список в плоский список