ListView to FlatList Animated Component

Question

I have a ListView component which animates and expands to the whole screen. As ListView has been depreciated i was trying to migrate to Flatlist. The ListView component looks like this:

<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}
/>;

now the style here applies like this:

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'
          })
        }
      ]
    }
  ];
}

the panHandeler looks like this -

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"
              })
        });
      });
    }
  }
});

When I convert it to flatlist using let AminatedFlatlist = Animated.createAnimatedComponent(Flatlist)

The parent interface appears but the flatlist does not renders.

There is not even any errors thrown at the debugger.

Can anyone throw tell me how to convert the above listview to flatlist

Answer 1

just saw your question and I was trying to do the same thing here. The solution that worked for me was create a new component and call the component at the renderItem method. Like this:

import Card from './Card';

<AnimatedFlatList
  {...}
  data={this.state.dataSource}
  renderItem={({ item }) => <Card data={item} />} />

Hope this helps anyone with the same problem!