react-native-behavior
You define the behavior states of the component, and then animate between them.
<Behavior ref= thisbox = ref states= backgroundColor: 'gray' // state 0 backgroundColor: 'green' // state 1 opacity: 05 // state 2 rotate: '45deg' // state 3 />; // .. thisbox; // animates box's backgroundColor from gray to greenthisbox; // animates the opacity of the -now- green box from 1 to 0.5thisbox; // rotates the faded green box 45 degrees, starting from 0 thisbox; // plays a sequence of behavior states, colorize then fade then tilt
More demos available here.
Install
yarn add react-native-behavior
Definition
type behavior = config?: // goTo() default configuration mode?: 'spring' | 'timing' // default = 'spring' callback?: Function // to be executed after animating to a new state ...AnimatedSpringOptions // excluding toValue, useNativeDriver (see React Native docs) ...AnimatedTimingOptions // excluding toValue, useNativeDriver (see React Native docs) initialState?: number // default = 0 states: Array< backgroundColor?: string // default = 'transparent' height?: number // no percentages, default = null opacity?: number // [0, 1], default = 1 rotate?: string // e.g. '45deg', default = '0deg' scale?: number // default = 1 translateX?: number // default = 0 translateY?: number // default = 0 width?: number // no percentages, default = null rotateX?: string // e.g. '45deg', default = '0deg' rotateY?: string // e.g. '45deg', default = '0deg' scaleX?: number // default = 1 scaleY?: number // default = 1 > // minimum two states required style?: Object // default = {}, AnimatedViewStyle (see React Native docs) enableGestures?: boolean // simple swipe up/down/left/right and pressed/long pressed onGesture?: Function // e.g. gesture => console.log(gesture) indices?: Array<number> // can be used with custom drivers to define custom state keys/values clamp?: boolean // default = false, prevent animations from exceeding their ranges swipeVelocityThreshold?: number // default = 0.3 swipeDistanceThreshold?: number // default = 10 animatedNativeValue?: AnimatedValue // default = new Animated.Value(0), use a custom native driver animatedValue?: AnimatedValue // default = new Animated.Value(0), use a custom driver // animatedNativeValue and animatedValue should be used together, different instances of Animated.Value // animatedNativeValue is needed for opacity, rotate, scale, translateX and translateY // animatedValue is needed for backgroundColor, height and width children?: any // the behavior component can enclose other components, can enclose another behavior too; // methodsbehavior // animate to a specific behavior state behaviorindex // to retrieve current state index
Examples
Available here.