Init

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "useTabs": false,
+  "printWidth": 70,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "jsxBracketSameLine": false,
+  "parser": "babylon",
+  "noSemi": false,
+  "rcVerbose": true,
+  "arrowParens": "always"
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Terry Sahaidak
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,109 @@
+# react-native-reanimatable
+
+> Easy way to create 60fps animations using [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated).
+
+## Installation
+
+Install the library from npm:
+
+```bash
+npm i --save react-native-reanimatable
+```
+or
+```bash
+yarn add react-native-reanimatable
+```
+
+After that, follow the [Getting Started](https://github.com/kmagiera/react-native-reanimated#getting-started) of Reanimated, because the library uses it under the hood.
+
+## Roadmap
+- [] Add support for decay and spring type of animations
+- [] Add support for keyframes (interpolation)
+- [] Add support for mounting/unmounting animations
+- [] Add more examples
+- [] Add docs
+- [] Add typings
+- [] Add out of the box animations (bounces, zooms)
+- [] Add animation lifecycle
+
+## Example
+```jsx
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Button,
+  Animated,
+} from 'react-native';
+import Reanimatable from 'react-native-reanimatable';
+import Animated from 'react-native-reanimated';
+
+const config = {
+  animation: {
+    type: 'timing',
+    duration: 300,
+  },
+  values: {
+    width: { from: 100, to: 150 },
+    height: { from: 100, to: 150 },
+    translateY: { from: 0, to: 200 },
+  },
+};
+
+const s = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  animationContainer: {
+    marginBottom: 100,
+  },
+  animatableView: {
+    height: 100,
+    backgroundColor: 'red',
+  },
+});
+
+export default class App extends React.PureComponent {
+  state = {
+    value: false,
+  };
+
+  toggleAnimation() {
+    this.setState((state) => ({ value: !state.value }));
+  }
+
+  render() {
+    return (
+      <View style={s.container}>
+        <Reanimatable
+          config={config}
+          value={this.state.value}
+          containerStyle={s.animationContainer}
+        >
+          {({ width, height, translateY }) => (
+            <Animated.View
+              style={[
+                s.animatableView,
+                { width, height, transform: [{ translateY }] },
+              ]}
+            />
+          )}
+        </Reanimatable>
+
+        <Button
+          title="Toggle Animation"
+          onPress={() => this.toggleAnimation()}
+          style={s.button}
+        />
+      </View>
+    );
+  }
+}
+```
+
+## License
+[MIT](LICENSE)

lib/animations.js

@@ -0,0 +1,52 @@
+import A, { Easing } from 'react-native-reanimated';
+
+export const runTiming = ({
+  clock,
+  duration,
+  oppositeClock,
+  value,
+  dest,
+  easing,
+  onFinish,
+}) => {
+  const state = {
+    finished: new A.Value(0),
+    position: new A.Value(0),
+    time: new A.Value(0),
+    frameTime: new A.Value(0),
+  };
+
+  const config = {
+    duration,
+    toValue: new A.Value(0),
+    easing: easing || Easing.inOut(Easing.ease),
+  };
+
+  return A.block([
+    // stop opposite clock before running our animation
+    // to set last (previous) position as a current one
+    A.cond(A.clockRunning(oppositeClock), A.stopClock(oppositeClock)),
+    // run our animation clock
+    A.cond(
+      A.clockRunning(clock),
+      // do nothing if our clock is already running
+      0,
+      // otherwise pre set all the values
+      [
+        // If the clock isn't running we reset all the animation params and start the clock
+        A.set(state.finished, 0),
+        A.set(state.time, 0),
+        A.set(state.position, value),
+        A.set(state.frameTime, 0),
+        A.set(config.toValue, dest),
+        A.startClock(clock),
+      ],
+    ),
+    // we run the step here that is going to update position
+    A.timing(clock, state, config),
+    // if the animation is over we stop the clock
+    A.cond(state.finished, A.block([A.stopClock(clock), onFinish])),
+    // we made the block return the updated position
+    A.set(value, state.position),
+  ]);
+};

lib/components/LoopAnimation.js

@@ -0,0 +1,45 @@
+import React, { PureComponent } from 'react';
+import T from 'prop-types';
+import Reanimatable from '../core';
+
+class LoopAnimation extends PureComponent {
+  state = {
+    value: false,
+  };
+  count = this.props.iterationCount;
+
+  componentDidMount() {
+    this._interval = setInterval(() => {
+      this.toggleState();
+    }, 300);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this._interval);
+  }
+
+  toggleState() {
+    this.setState((state) => ({ value: !state.value }), () => {
+      if (typeof this.count === 'number') {
+        if (this.count > 0) {
+          this.count = this.count - 1;
+        } else {
+          clearInterval(this._interval);
+        }
+      }
+    });
+  }
+
+  render() {
+    return React.cloneElement(Reanimatable, {
+      ...this.props,
+      value: this.state.value,
+    });
+  }
+}
+
+LoopAnimation.propTypes = {
+  iterationCount: T.number,
+};
+
+export default LoopAnimation;