flat list android animation doesn't work as expected

Question

I am trying to make an animation on items that inside flatList. Each item will appear from right to left. On IOS It's work fine but on ANDROID not.

the animation contains fade in and transform: translateX animation.

If there another way to make like on IOS I will be glad to here, It's supposed to be a dynamic list

FadeInView component:

export class FadeInView extends Component {
state = {
    rightToLeftAnim: new Animated.Value(450),
    fadeAnim: new Animated.Value(0),
};

componentDidMount() {
    Animated.sequence([
        Animated.delay((this.props.index + 1) * 1000),
        Animated.parallel([
            Animated.timing(
                this.state.rightToLeftAnim,
                {
                    toValue: 0,
                    duration: 1000,
                    easing: Easing.inOut(Easing.quad),
                    useNativeDriver: true,
                }
            ),
            Animated.timing(
                this.state.fadeAnim,
                {
                    toValue: 1,
                    duration: 1000,
                    useNativeDriver: true,
                }
            )
        ])
    ]).start();

}

render() {
    let { fadeAnim,rightToLeftAnim } = this.state;

    const rightToLeft = {
        transform: [{translateX: rightToLeftAnim}]
    };

    return (
        <Animated.View                
            style={[rightToLeft,{flex: 1, ...this.props.style, opacity: fadeAnim,}]}
        >
            {this.props.children}
        </Animated.View>
    );
}

}

parent component:

 class MyPlans extends Component {
  constructor(props) {
    super(props);
   }
    render() {
    return (
        <View>
                <FlatList
                    style={{marginTop: Platform.OS === 'ios' ? 0 : 60}}
                    data={[{key: 'module a'},{key: 'module b'},{key: 'module c'},{key: 'module d'}]}
                    horizontal={true}
                    renderItem={({item,index}) => <FadeInView index={index} style={this.moduleStyle}><Text>{item.key}</Text></FadeInView>}
                />
        </View>);
}

score 0 · Answer 1 · answered Apr 03 '19 at 16:14

Give style={{flex:1}} to View Component, which the parent of FlatList.

return (
        <View style={{flex:1}}>
                <FlatList
                    style={{marginTop: Platform.OS === 'ios' ? 0 : 60}}
                    data={[{key: 'module a'},{key: 'module b'},{key: 'module c'},{key: 'module d'}]}
                    horizontal={true}
                    renderItem={({item,index}) => <FadeInView index={index} style={this.moduleStyle}><Text>{item.key}</Text></FadeInView>}
                />
        </View>);

score 0 · Answer 2 · answered Apr 25 '19 at 13:31

0

please use flatList getItemLayou property,or updata rn version to 0.59.5 above.

answered Apr 25 '19 at 13:31

一蓑烟雨任平生

1

1

This is not acceptable as an answer, please add a complete explanation of the method you're suggesting, or use a comment instead – Nino Filiu Apr 25 '19 at 13:59

flat list android animation doesn't work as expected

2 Answers2