Fix files with eslint and improve Readme

Author: osdnk

Example/App.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import { Text, View, FlatList, StyleSheet, TouchableOpacity, YellowBox } from 'react-native';
-import { createStackNavigator, createAppContainer } from 'react-navigation';
+import React from 'react'
+import { Text, View, FlatList, StyleSheet, TouchableOpacity } from 'react-native'
+import { createStackNavigator, createAppContainer } from 'react-navigation'
 
-import Map from './Map';
-import BlurToolbar from './BlurToolbar';
-import Imperative from './Imperative';
-import Test from './Test';
+import Map from './Map'
+import BlurToolbar from './BlurToolbar'
+import Imperative from './Imperative'
+import Test from './Test'
 
 const SCREENS = {
   map: {
@@ -24,14 +24,14 @@ const SCREENS = {
     screen: Test,
     title: 'Test',
   },
-};
+}
 
 class MainScreen extends React.Component {
   static navigationOptions = {
     title: 'Bottom Sheet Examples',
   };
   render() {
-    const data = Object.keys(SCREENS).map(key => ({ key }));
+    const data = Object.keys(SCREENS).map(key => ({ key }))
     return (
       <FlatList
         style={styles.list}
@@ -44,21 +44,21 @@ class MainScreen extends React.Component {
           />
         )}
       />
-    );
+    )
   }
 }
 
-const ItemSeparator = () => <View style={styles.separator} />;
+const ItemSeparator = () => <View style={styles.separator} />
 
 class MainScreenItem extends React.Component {
   _onPress = () => this.props.onPressItem(this.props.item);
   render() {
-    const { key } = this.props.item;
+    const { key } = this.props.item
     return (
       <TouchableOpacity style={styles.button} onPress={this._onPress}>
         <Text style={styles.buttonText}>{SCREENS[key].title || key}</Text>
       </TouchableOpacity>
-    );
+    )
   }
 }
 
@@ -70,7 +70,7 @@ const ExampleApp = createAppContainer(createStackNavigator(
   {
     initialRouteName: 'Main',
   }
-));
+))
 
 const styles = StyleSheet.create({
   list: {
@@ -91,6 +91,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#fff',
   },
-});
+})
 
-export default ExampleApp;
+export default ExampleApp

Example/BlurToolbar.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
-import BottomSheet from 'reanimated-bottom-sheet';
+import React from 'react'
+import { Image, StyleSheet, Text, View } from 'react-native'
+import BottomSheet from 'reanimated-bottom-sheet'
 import Animated from 'react-native-reanimated'
 
 
@@ -54,7 +54,7 @@ export default class Example extends React.Component {
   }
 }
 
-const IMAGE_SIZE = 200;
+const IMAGE_SIZE = 200
 
 const styles = StyleSheet.create({
   container: {
@@ -85,8 +85,8 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.4,
   },
   header: {
-      width: '100%',
-      height: 50,
+    width: '100%',
+    height: 50,
   },
   panelHeader: {
     alignItems: 'center',
@@ -129,5 +129,5 @@ const styles = StyleSheet.create({
     height: '100%',
     width: '100%',
   },
-});
+})
 

Example/Imperative.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import BottomSheet from 'reanimated-bottom-sheet';
+import React from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import BottomSheet from 'reanimated-bottom-sheet'
 
 
 
@@ -60,7 +60,7 @@ export default class Example extends React.Component {
   }
 }
 
-const IMAGE_SIZE = 200;
+const IMAGE_SIZE = 200
 
 const styles = StyleSheet.create({
   container: {
@@ -98,8 +98,8 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.4,
   },
   header: {
-      width: '100%',
-      height: 50,
+    width: '100%',
+    height: 50,
   },
   panelHeader: {
     alignItems: 'center',
@@ -142,5 +142,5 @@ const styles = StyleSheet.create({
     height: '100%',
     width: '100%',
   },
-});
+})
 

Example/Map.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
-import BottomSheet from 'reanimated-bottom-sheet';
+import React from 'react'
+import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
+import BottomSheet from 'reanimated-bottom-sheet'
 
 
 
@@ -53,7 +53,7 @@ export default class Example extends React.Component {
   }
 }
 
-const IMAGE_SIZE = 200;
+const IMAGE_SIZE = 200
 
 const styles = StyleSheet.create({
   container: {
@@ -125,5 +125,5 @@ const styles = StyleSheet.create({
     height: '100%',
     width: '100%',
   },
-});
+})
 

Example/Test.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { StyleSheet, Text, Button, View } from 'react-native';
-import  BottomSheet  from 'reanimated-bottom-sheet';
+import React from 'react'
+import { StyleSheet, Text, Button, View } from 'react-native'
+import  BottomSheet  from 'reanimated-bottom-sheet'
 
 
 export default class Example extends React.Component {
@@ -63,7 +63,7 @@ export default class Example extends React.Component {
   }
 }
 
-const IMAGE_SIZE = 200;
+const IMAGE_SIZE = 200
 
 const styles = StyleSheet.create({
   container: {
@@ -74,4 +74,4 @@ const styles = StyleSheet.create({
     width: IMAGE_SIZE,
     height: IMAGE_SIZE,
   },
-});
+})

Example/babel.config.js

@@ -1,6 +1,6 @@
 module.exports = function(api) {
-  api.cache(true);
+  api.cache(true)
   return {
     presets: ['babel-preset-expo'],
-  };
-};
+  }
+}

README.md

@@ -1,5 +1,6 @@
 ## Reanimated Bottom Sheet
-Component imitating native bottom sheet behavior built from scratch with react-native-gesture-handler and react-native-reanimated.
+Highly configurable component imitating native bottom sheet behavior built from scratch with react-native-gesture-handler and react-native-reanimated.
+No JS animations, 60 FPS!
 
 Usable with Expo with no extra native dependencies!
 
@@ -70,7 +71,7 @@ this.bottomSheet.current.snaptTo(0)
 ```
 
 ## Example
-Few more complicated examples could be found in `Example` folder which is simple Expo app
+Few more complicated examples can be found in `Example` folder
 
 ```javascript
 cd Example

index.js

@@ -69,8 +69,8 @@ function runDecay(clock, value, velocity, wasStartedFromBegin) {
 }
 
 function withPreservingAdditiveOffset(drag, state) {
-  const prev = new Animated.Value(0)
-  const valWithPreservedOffset = new Animated.Value(0)
+  const prev = new Value(0)
+  const valWithPreservedOffset = new Value(0)
   return block([
     cond(eq(state, State.BEGAN), [
       set(prev, 0)
@@ -83,10 +83,10 @@ function withPreservingAdditiveOffset(drag, state) {
 }
 
 function withDecaying(drag, state, decayClock, velocity, prevent) {
-  const valDecayed = new Animated.Value(0)
-  const offset = new Animated.Value(0)
+  const valDecayed = new Value(0)
+  const offset = new Value(0)
   // since there might be moar than one clock
-  const wasStartedFromBegin = new Animated.Value(0)
+  const wasStartedFromBegin = new Value(0)
   return block([
     cond(eq(state, State.END),
       [
@@ -156,10 +156,10 @@ export default class BottomSheetBehavior extends Component {
   velocity = new Value(0);
   panMasterState = new Value(State.END);
   masterVelocity = new Value(0);
-  isManuallySetValue = new Animated.Value(0);
-  manuallySetValue = new Animated.Value(0);
+  isManuallySetValue = new Value(0);
+  manuallySetValue = new Value(0);
   masterClockForOverscroll = new Clock();
-  preventDecaying = new Animated.Value(0);
+  preventDecaying = new Value(0);
   dragMasterY = new Value(0);
   dragY = new Value(0);
 
@@ -187,8 +187,8 @@ export default class BottomSheetBehavior extends Component {
     this.snapPoint = currentSnapPoint()
 
     const masterClock = new Clock()
-    const prevMasterDrag = new Animated.Value(0)
-    const wasRun = new Animated.Value(0)
+    const prevMasterDrag = new Value(0)
+    const wasRun = new Value(0)
     this.translateMaster = block([
       cond(eq(this.panMasterState, State.END),
         [
@@ -250,18 +250,18 @@ export default class BottomSheetBehavior extends Component {
   handleTap = event([{ nativeEvent: { state: this.tapState } }]);
 
   withEnhancedLimits(val, masterOffseted) {
-    const wasRunMaster = new Animated.Value(0)
+    const wasRunMaster = new Value(0)
     const min = multiply(-1, add(this.state.heightOfContent, this.state.heightOfHeaderAnimated))
-    const prev = new Animated.Value(0)
-    const limitedVal = new Animated.Value(0)
-    const diffPres = new Animated.Value(0)
-    const flagWasRunSpring = new Animated.Value(0)
-    const justEndedIfEnded = new Animated.Value(1)
-    const wasEndedMasterAfterInner = new Animated.Value(1)
-    const prevMaster = new Animated.Value(1)
-    const prevState = new Animated.Value(0)
-
-    const rev = new Animated.Value(0)
+    const prev = new Value(0)
+    const limitedVal = new Value(0)
+    const diffPres = new Value(0)
+    const flagWasRunSpring = new Value(0)
+    const justEndedIfEnded = new Value(1)
+    const wasEndedMasterAfterInner = new Value(1)
+    const prevMaster = new Value(1)
+    const prevState = new Value(0)
+
+    const rev = new Value(0)
     return block([
       set(rev, limitedVal),
       cond(or(eq(this.panState, State.BEGAN), and(eq(this.panState, State.ACTIVE), eq(prevState, State.END))), [
@@ -316,7 +316,7 @@ export default class BottomSheetBehavior extends Component {
     this.isManuallySetValue.setValue(1)
   };
 
-  height = new Animated.Value(0)
+  height = new Value(0)
 
   handleLayoutHeader = ({
     nativeEvent: {
@@ -377,8 +377,8 @@ export default class BottomSheetBehavior extends Component {
     return {
       init: sortedPropsSnapPints[0].val - sortedPropsSnapPints[propsToNewIncides[initialSnap]].val,
       propsToNewIncides,
-      heightOfHeaderAnimated: (state && state.heightOfHeaderAnimated) || new Animated.Value(0),
-      heightOfContent: (state && state.heightOfContent) || new Animated.Value(0),
+      heightOfHeaderAnimated: (state && state.heightOfHeaderAnimated) || new Value(0),
+      heightOfContent: (state && state.heightOfContent) || new Value(0),
       initSnap: sortedPropsSnapPints[0].val,
       snapPoints
     }