Support latest version of react native

charpeni · Mar 24, 2017 · 4dbb589 · 4dbb589
1 parent ee4bdcb
commit 4dbb589
Show file tree

Hide file tree

Showing 6 changed files with 1,019 additions and 21 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) Novom Networks Inc.
+Copyright (c) Nicolas Charpentier
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# react-native-speech-bubble [![npm version](https://badge.fury.io/js/react-native-speech-bubble.svg)](https://badge.fury.io/js/react-native-speech-bubble)
+# react-native-speech-bubble [![CircleCI](https://circleci.com/gh/charpeni/react-native-speech-bubble.svg?style=shield)](https://circleci.com/gh/charpeni/react-native-speech-bubble) [![npm version](https://badge.fury.io/js/react-native-speech-bubble.svg)](https://badge.fury.io/js/react-native-speech-bubble)
 
 A speech bubble dialog component for React Native.
 
@@ -12,6 +12,10 @@ npm install --save react-native-speech-bubble
 
 ## Usage
 
+```javascript
+import SpeechBubble from 'react-native-speech-bubble';
+```
+
 ```jsx
 <SpeechBubble
   speeches={[ 'String 1', 'String 2', 'String 3' ]}

diff --git a/circle.yml b/circle.yml
@@ -1,12 +1,16 @@
 machine:
   node:
-    version: 6.2.1
+    version: 7
+
 dependencies:
   override:
-    - npm install
+    - yarn install
+  cache_directories:
+    - ~/.cache/yarn
+
 test:
   pre:
     - mkdir -p $CIRCLE_TEST_REPORTS/eslint
     - touch $CIRCLE_TEST_REPORTS/eslint/eslint.xml
   override:
-    - node node_modules/eslint/bin/eslint . -o $CIRCLE_TEST_REPORTS/eslint/eslint.xml -f junit
+    - yarn lint -- -o $CIRCLE_TEST_REPORTS/eslint/eslint.xml -f junit
diff --git a/index.js b/index.js
@@ -29,12 +29,6 @@ const propTypes = {
 };
 
 const styles = StyleSheet.create({
-  dialogView: {
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'flex-end',
-    backgroundColor: 'transparent',
-  },
   dialog: {
     flexDirection: 'row',
     borderRadius: 50,
@@ -49,16 +43,14 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   dialogText: {
-    flex: 1,
+    flexShrink: 1,
   },
   dialogNext: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
     padding: 5,
+    justifyContent: 'center',
     backgroundColor: 'transparent',
   },
-  typeWriter : {
+  typeWriter: {
     backgroundColor: 'transparent',
   },
 });
@@ -128,6 +120,7 @@ class SpeechBubble extends React.Component {
       toValue: 0.9,
       tension: 40,
       friction: 3,
+      useNativeDriver: true,
     }).start();
   }
 
@@ -136,6 +129,7 @@ class SpeechBubble extends React.Component {
       toValue: 1,
       tension: 40,
       friction: 3,
+      useNativeDriver: true,
     }).start();
   }
 
@@ -147,10 +141,12 @@ class SpeechBubble extends React.Component {
       Animated.timing(anim.y, {
         toValue: -5,
         duration: translateDuration,
+        useNativeDriver: true,
       }),
       Animated.timing(anim.y, {
         toValue: 5,
         duration: translateDuration,
+        useNativeDriver: true,
       }),
     ]).start(() => {
       this.nextSpeechBubbleAnimation();
@@ -161,7 +157,8 @@ class SpeechBubble extends React.Component {
     return !this.state.lastSpeech ? (
       <Animated.View
         style={[
-          this.props.nextStyle || styles.dialogNext,
+          styles.dialogNext,
+          this.props.nextStyle,
           { transform: [{ translateY: this.state.nextDialogAnimation.y }] },
           { opacity: this.state.typeEnd && !this.state.lastSpeech ? 1 : 0 },
         ]}
@@ -179,11 +176,13 @@ class SpeechBubble extends React.Component {
       Animated.timing(anim, {
         toValue: 100,
         duration: rotateDuration,
+        useNativeDriver: true,
       }),
       Animated.delay(1000),
       Animated.timing(anim, {
         toValue: 0,
         duration: rotateDuration,
+        useNativeDriver: true,
       }),
     ]).start(() => {
       this.replaySpeechBubbleAnimation();
@@ -199,7 +198,8 @@ class SpeechBubble extends React.Component {
     return this.state.lastSpeech ? (
       <Animated.View
         style={[
-          this.props.nextStyle || styles.dialogNext,
+          styles.dialogNext,
+          this.props.nextStyle,
           { transform: [{ rotate: interpolatedRotateAnimation }] },
           { opacity: this.state.typeEnd && this.state.lastSpeech ? 1 : 0 },
         ]}
@@ -225,7 +225,7 @@ class SpeechBubble extends React.Component {
           onPressOut={this.onSpeechBubblePressOut}
         >
           <View style={this.props.speechBubbleStyle || styles.dialog}>
-            <View style={this.props.speechBubbleTextStyle || styles.dialogText}>
+            <View style={[styles.dialogText, this.props.speechBubbleTextStyle]}>
               <TypeWriter
                 text={this.props.speeches[this.state.speechIndex]}
                 typing={1}

diff --git a/package.json b/package.json
@@ -2,9 +2,10 @@
   "name": "react-native-speech-bubble",
   "version": "0.2.0",
   "description": "A speech bubble dialog component for React Native.",
+  "repository": "charpeni/react-native-speech-bubble",
   "main": "index.js",
   "scripts": {
-    "test": "eslint ."
+    "lint": "eslint ."
   },
   "contributors": [
     "Nicolas Charpentier"
@@ -26,7 +27,7 @@
   ],
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": ">= 0.40.0"
   },
   "devDependencies": {
     "babel-eslint": "^6.0.4",