animated basic and animated button

Author: bkdev98

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules/**/*
+.expo/*
+npm-debug.*

.watchmanconfig

@@ -0,0 +1 @@
+{}

assets/icons/app.png

@@ -0,0 +1,21 @@
+{
+  "name": "react-native-animations",
+  "description": "An empty new project",
+  "slug": "react-native-animations",
+  "privacy": "public",
+  "sdkVersion": "16.0.0",
+  "version": "1.0.0",
+  "orientation": "portrait",
+  "primaryColor": "#cccccc",
+  "icon": "./assets/icons/app.png",
+  "loading": {
+    "icon": "./assets/icons/loading.png",
+    "hideExponentText": false
+  },
+  "packagerOpts": {
+    "assetExts": ["ttf", "mp4"]
+  },
+  "ios": {
+    "supportsTablet": true
+  }
+}

assets/icons/loading.png

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "allowSyntheticDefaultImports": true
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}

exp.json

@@ -0,0 +1,27 @@
+import Expo from 'expo';
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import AnimatedBasic from './src/AnimatedBasic';
+import Button from './src/Button';
+
+class App extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+Expo.registerRootComponent(App);

jsconfig.json

@@ -0,0 +1,13 @@
+{
+  "name": "react-native-animations",
+  "version": "0.0.0",
+  "description": "Hello Expo!",
+  "author": null,
+  "private": true,
+  "main": "main.js",
+  "dependencies": {
+    "expo": "16.0.0",
+    "react": "16.0.0-alpha.6",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-16.0.0.tar.gz"
+  }
+}

main.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import {
+  View,
+  StyleSheet,
+  Animated,
+  Easing
+} from 'react-native';
+
+class AnimatedBasic extends Component {
+  componentWillMount() {
+    this.animatedValue = new Animated.Value(100);
+  }
+
+  componentDidMount() {
+    Animated.timing(this.animatedValue, {
+      toValue: 150,
+      duration: 3000,
+      easing: Easing.bounce
+    }).start()
+  }
+
+  render() {
+    const animatedStyle = { height: this.animatedValue }
+    return (
+      <Animated.View style={[ styles.root, animatedStyle ]}>
+
+      </Animated.View>
+    );
+  }
+}
+
+const styles = {
+  root: {
+    width: 100,
+    height: 100,
+    backgroundColor: '#b1bb'
+  }
+}
+
+export default AnimatedBasic;

package.json

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { View, Text, TouchableWithoutFeedback, Animated } from 'react-native';
+
+class Button extends Component {
+  constructor(props) {
+    super(props);
+
+    this.handlePressIn = this.handlePressIn.bind(this);
+    this.handlePressOut = this.handlePressOut.bind(this);
+  }
+
+  componentWillMount() {
+    this.animatedValue = new Animated.Value(1);
+  }
+
+  handlePressIn() {
+    Animated.spring(this.animatedValue, {
+      toValue: .5
+    }).start()
+  }
+
+  handlePressOut() {
+    Animated.spring(this.animatedValue, {
+      toValue: 1,
+      friction: 3,
+      tension: 40
+    }).start()
+  }
+
+  render() {
+    const animatedStyle = {
+      transform: [{ scale: this.animatedValue }]
+    }
+
+    return (
+      <TouchableWithoutFeedback
+        onPressIn={this.handlePressIn}
+        onPressOut={this.handlePressOut}
+      >
+        <Animated.View style={[styles.button, animatedStyle]}>
+          <Text style={styles.text}>Press Me</Text>
+        </Animated.View>
+      </TouchableWithoutFeedback>
+    );
+  }
+}
+
+const styles = {
+  button: {
+    backgroundColor: "#9C27B0",
+    width: 100,
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 5
+  },
+  text: {
+    color: "#fff"
+  }
+}
+
+export default Button;