Update API

Breaking changes:
- animateTo() is now goTo()
- animateSequence() is now play()
- configs prop is now just config without an “s”
- getIndex() is now deprecated, use behavior.index directly instead

README.md

@@ -15,8 +15,8 @@ You define the behavior states of the component, and then animate between them.
   ]}
 />
 
-this.box.animateTo(1);
-this.box.animateSequence([2, 3, 4]);
+this.box.goTo(1);
+this.box.play([2, 3, 4]);
 ```
 
 More demos available [here](https://github.com/sonaye/react-native-behavior/tree/master/demos).
@@ -27,7 +27,7 @@ More demos available [here](https://github.com/sonaye/react-native-behavior/tree
 # Definition
 ```javascript
 type behavior = {
-  configs?: { // animateTo() default configs
+  config?: { // goTo() default config
     mode?: 'spring' | 'timing', // default = 'spring'
     callback?: Function, // to be executed after switching to a new state
     ...AnimatedSpringOptions, // excluding toValue, useNativeDriver (see React Native docs)
@@ -58,9 +58,10 @@ type behavior = {
 };
 
 // methods
-behavior.animateTo(index: number, configs?: Object = {}) // animate to a specific behavior state
-behavior.animateSequence(indices: Array<number>, configs?: Object = {}) // animate a sequence of behavior states
-behavior.getIndex() // retrieve current state index, or you can directly use behavior.index
+behavior.goTo(index: number, config?: Object = {}) // animate to a specific behavior state
+behavior.play(indices: Array<number>, config?: Object = {}) // animate a sequence of behavior states
+
+// to retrieve current state index use you can directly use behavior.index
 ```
 
 ## Examples

behavior.js

@@ -2,17 +2,15 @@ import React, { Component } from 'react';
 import { Animated, PanResponder, TouchableOpacity } from 'react-native';
 
 export default class extends Component {
-  getIndex = () => this.index;
-
   index = this.props.initialState || 0;
 
   nativeValue = this.props.animatedNativeValue || new Animated.Value(0);
   value = this.props.animatedValue || new Animated.Value(0);
 
-  animateTo = (toValue, configs = {}) => {
+  goTo = (toValue, config = {}) => {
     const { mode, callback, ...options } = {
-      ...this.props.configs,
-      ...configs
+      ...this.props.config,
+      ...config
     };
 
     const animate = mode === 'timing' ? Animated.timing : Animated.spring;
@@ -27,10 +25,10 @@ export default class extends Component {
     this.index = toValue;
   };
 
-  animateSequence = (values, configs = {}) => {
+  play = (values, config = {}) => {
     const { mode, callback, ...options } = {
-      ...this.props.configs,
-      ...configs
+      ...this.props.config,
+      ...config
     };
 
     const animate = mode === 'timing' ? Animated.timing : Animated.spring;

examples/basic.js

@@ -10,7 +10,7 @@ const Example = () => {
     <View style={{ flex: 1 }}>
       <View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }}>
         <Behavior
-          ref={ref => (goTo = ref.animateTo)}
+          ref={ref => (goTo = ref.goTo)}
           states={[
             { backgroundColor: '#d8d8d8', scale: 1 },
             { backgroundColor: '#4285f4', scale: 2.5 },

examples/box.js

@@ -11,10 +11,10 @@ const Example = () => {
     <View style={{ flex: 1 }}>
       <View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }}>
         <Behavior
-          configs={{ mode: 'timing', duration: 250 }}
+          config={{ mode: 'timing', duration: 250 }}
           ref={ref => {
-            goTo = ref.animateTo;
-            play = ref.animateSequence;
+            goTo = ref.goTo;
+            play = ref.play;
           }}
           states={[
             { backgroundColor: '#d8d8d8', height: 100, width: 100 },

examples/container.js

@@ -12,7 +12,7 @@ const Example = () => {
     <View style={{ flex: 1 }}>
       <Behavior
         initialState={1}
-        ref={ref => (goTo = ref.animateTo)}
+        ref={ref => (goTo = ref.goTo)}
         states={[
           { backgroundColor: '#db4437', height: 60 },
           { backgroundColor: '#0f9d58', height: 260 },

examples/containerWithGestures.js

@@ -8,7 +8,7 @@ const { height, width } = Dimensions.get('window');
 const Example = () =>
   <View style={{ flex: 1 }}>
     <Behavior
-      ref={ref => (this.c = ref)}
+      ref={ref => (this.container = ref)}
       states={[
         { backgroundColor: '#db4437', height: 100 },
         { backgroundColor: '#0f9d58', height: 300 },
@@ -22,11 +22,11 @@ const Example = () =>
       enableGestures
       onGesture={gesture => {
         if (gesture.swipedUp)
-          if (this.c.getIndex() === 0) this.c.animateTo(1);
-          else this.c.animateTo(2);
+          if (this.container.index === 0) this.container.goTo(1);
+          else this.container.goTo(2);
         else if (gesture.swipedDown)
-          if (this.c.getIndex() === 2) this.c.animateTo(1);
-          else this.c.animateTo(0);
+          if (this.container.index === 2) this.container.goTo(1);
+          else this.container.goTo(0);
       }}
       indices={[0, 1, 2]} // android only
       swipeThreshold={{ distance: 40 }}

examples/gestures.js

@@ -13,7 +13,7 @@ const Example = () => {
   return (
     <View style={{ flex: 1, justifyContent: 'center' }}>
       <Behavior
-        ref={ref => (goTo = ref.animateTo)}
+        ref={ref => (goTo = ref.goTo)}
         states={[{ translateX: 0 }, { translateX: width - l }]}
         style={{
           backgroundColor: '#d8d8d8',

examples/menu.js

@@ -8,7 +8,7 @@ import Behavior from '../behavior';
 const Example = () => {
   const Container = ({ children }) =>
     <Behavior
-      configs={{ mode: 'timing', duration: 250 }}
+      config={{ mode: 'timing', duration: 250 }}
       indices={[0, 1]}
       ref={ref => (this.menu = ref)}
       states={[
@@ -18,36 +18,36 @@ const Example = () => {
       style={{ borderRadius: 25, overflow: 'hidden', width: 200 }}
       enableGestures
       onGesture={gesture => {
-        if (gesture.swipedRight && this.menu.getIndex() === 0) {
-          this.menu.animateTo(1);
-          this.highlight.animateTo(1);
-          this.labels.animateTo(1);
-          this.dot.animateTo(1);
+        if (gesture.swipedRight && this.menu.index === 0) {
+          this.menu.goTo(1);
+          this.highlight.goTo(1);
+          this.labels.goTo(1);
+          this.dot.goTo(1);
         }
 
-        if (gesture.swipedLeft && this.menu.getIndex() === 1) {
-          this.menu.animateTo(0, { duration: 350 });
-          this.highlight.animateTo(0, { duration: 350 });
-          this.labels.animateTo(0, { duration: 350 });
-          this.dot.animateTo(0, { duration: 350 });
+        if (gesture.swipedLeft && this.menu.index === 1) {
+          this.menu.goTo(0, { duration: 350 });
+          this.highlight.goTo(0, { duration: 350 });
+          this.labels.goTo(0, { duration: 350 });
+          this.dot.goTo(0, { duration: 350 });
         }
 
-        if (gesture.swipedDown && this.menu.getIndex() === 1) {
-          this.highlight.animateTo(2);
-          this.dot.animateTo(2);
+        if (gesture.swipedDown && this.menu.index === 1) {
+          this.highlight.goTo(2);
+          this.dot.goTo(2);
         }
 
-        if (gesture.swipedUp && this.menu.getIndex() === 1) {
-          this.highlight.animateTo(1);
-          this.dot.animateTo(1);
+        if (gesture.swipedUp && this.menu.index === 1) {
+          this.highlight.goTo(1);
+          this.dot.goTo(1);
         }
       }}>
       {children}
     </Behavior>;
 
   const Highlight = () =>
     <Behavior
-      configs={{ mode: 'timing', duration: 250 }}
+      config={{ mode: 'timing', duration: 250 }}
       indices={[0, 1, 2]}
       ref={ref => (this.highlight = ref)}
       states={[
@@ -65,7 +65,7 @@ const Example = () => {
 
   const Labels = () =>
     <Behavior
-      configs={{ mode: 'timing', duration: 250 }}
+      config={{ mode: 'timing', duration: 250 }}
       indices={[0, 1]}
       ref={ref => (this.labels = ref)}
       states={[{ translateX: -200 }, { translateX: 0 }]}
@@ -90,7 +90,7 @@ const Example = () => {
 
   const Dot = () =>
     <Behavior
-      configs={{ mode: 'timing', duration: 250 }}
+      config={{ mode: 'timing', duration: 250 }}
       indices={[0, 1, 2]}
       ref={ref => (this.dot = ref)}
       states={[{}, { translateX: 200 - 50 }, { translateY: 50 }]}

examples/sequence.js

@@ -11,10 +11,10 @@ const Example = () => {
   for (let i = 2; i < height / 20; i += 1)
     rows.push(
       <Behavior
-        configs={{ mode: 'timing', delay: i * 250 }}
+        config={{ mode: 'timing', delay: i * 250 }}
         indices={[0, 1, 2, 3, 4]}
         key={i}
-        ref={ref => ref.animateSequence([1, 2, 3, 4])}
+        ref={ref => ref.play([1, 2, 3, 4])}
         states={[
           { translateX: -width, opacity: 0 },
           { translateX: 0, opacity: 1 },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-behavior",
   "description": "Easily create stateful animations in React Native.",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "main": "behavior.js",
   "repository": {
     "type": "git",