Haraka
You define the behavior states of the component, and then animate between them.
Usage
import Behavior from 'haraka';
box = React.createRef();
<Behavior
ref={this.box}
state={[
{ backgroundColor: 'gray' }, // state 0
{ backgroundColor: 'green' }, // state 1
{ opacity: 0.5 }, // state 2
{ rotate: '45deg' } // state 3
]}
/>;
this.box.current.goTo(1);
this.box.current.goTo(2);
this.box.current.goTo(3);
this.box.current.goTo([1, 2, 3]);
Install
yarn add haraka
Definition
type DefaultConfig = {
type?: 'spring' | 'timing',
onStart?: func,
onComplete?: func,
ref?: bool,
...AnimatedSpringOptions,
...AnimatedTimingOptions
};
type State = {
backgroundColor?: string,
height?: number,
opacity?: number,
rotate?: string,
scale?: number,
translateX?: number,
translateY?: number,
width?: number
};
type StyleProp = {
prop: string,
default: string | number | null,
native?: bool,
transform: bool
};
type Behavior = {
config?: DefaultConfig,
clearStyleProps?: bool,
state?: State[],
nativeDriver?: AnimatedValue,
driver?: AnimatedValue,
children?: any,
clamp?: bool,
keys?: number[],
currentState?: number,
initialState?: number,
skipProps?: string[],
skipStyleProps?: string[],
style?: object,
styleProps?: StyleProp[],
unmounted?: bool,
faded?: bool,
absolute?: bool,
centered?: bool,
fixed?: bool,
full?: bool,
landing?: bool,
};
const presets = {
faded: [{ opacity: 0 }, { opacity: 1 }]
};
const layoutPresets = {
absolute: { bottom: 0, left: 0, position: 'absolute', right: 0, top: 0 },
centered: { alignSelf: 'center' },
fixed: { position: 'absolute' },
full: { flex: 1 },
landing: { alignItems: 'center', flex: 1, justifyContent: 'center' }
};
behavior.goTo(index: number | number[], config?: DefaultConfig = {})
behavior.unmount()
behavior.mount(state: ?number)
behavior.key
behavior.setNativeProps({} : Props)
Examples
Available here.