react-native-animation-library

Animation library built in JavaScript only. All animation created with Animated API and boosted with useNativeDriver which uses the native animation by RCTAnimation.

Components

AnimatedListView

Fade appearance listView. Based on ListView therefore all ListView props can be used.

API

Props | Type | Description ------ | ----- | ----- initialOpacity | Number | Cell initial opacity, between 0-1 offsetY | Number | Cell Y offset cellAnimationDelay |Number| Cell animation delay. Multiple cell# cellAnimationDelay duration | Number | The animation duration in milliseconds[Number]

FlipAnimatedImage

API

Props | Type | Description ------ | ----- | ----- isSelected | Boolean | The selection state of the component selectedImage | Image | The image to show when state is selected unSelectedImage |Image| The image to show when state is unselected duration | Object | The animation Bounce duration object {bounceOut: [Number], bounceIn: [Number]}

Example

<TouchableOpacity 
    activeOpacity={0.7} 
    onPress={() => this.setState({starIsSelected: !this.state.starIsSelected})} 
    style={{margin: 30}}>
    
    <FlipAnimatedImage style={{justifyContent: 'center', alignItems: 'center'}}
                       isSelected={this.state.starIsSelected}
                       unSelectedImage={require('<SELECTED_IMAGE>')}
                       selectedImage={require('<UNSELECTED_IMAGE>')}
                       duration={{bounceOut: 50, bounceIn: 100}}
    />
</TouchableOpacity>