fix android keyboard

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

.eslintrc

@@ -11,6 +11,7 @@
     }
   },
   "env": {
-    "node": true
+    "node": true,
+    "jest": true
   }
 }

.gitignore

@@ -2,3 +2,4 @@
 node_modules/
 npm-debug.log
 TODO.md
+__tests__

README.md

@@ -4,6 +4,16 @@ The most complete chat UI for React Native (formerly known as Gifted Messenger)
 ## Installation
 - `npm install react-native-gifted-chat --save`
 
+## Android installation
+- Add `windowSoftInputMode` in your Android Manifest `android/app/src/main/AndroidManifest.xml`
+```
+<!-- ... -->
+  android:label="@string/app_name"
+  android:windowSoftInputMode="adjustResize" // <!-- add this -->
+  android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
+<!-- ... -->
+```
+
 ## Minimal example
 ```jsx
 import React, { Component } from 'react';
@@ -88,6 +98,7 @@ See [example project](example/Example.js)
 ### Send
 ### Loading
 
+
 ## LICENSE
 - [MIT](LICENSE)
 

example/android/app/src/main/AndroidManifest.xml

@@ -19,6 +19,7 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
+        android:windowSoftInputMode="adjustResize"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />

example/package.json

@@ -4,15 +4,15 @@
   "private": true,
   "scripts": {
     "start": "node_modules/react-native/packager/packager.sh",
-    "sync": "rm -rf ./node_modules/react-native-gifted-chat; sane '/usr/bin/rsync -v -a --exclude .git --exclude example --exclude node_modules ../ ./node_modules/react-native-gifted-chat/' .. --glob='{**/*.json,**/*.js}'"
+    "sync": "rm -rf ./node_modules/react-native-gifted-chat; sane '/usr/bin/rsync -v -a --exclude .git --exclude example --exclude __tests__ --exclude node_modules ../ ./node_modules/react-native-gifted-chat/' .. --glob='{**/*.json,**/*.js}'"
   },
   "dependencies": {
     "react": "15.2.1",
     "react-native": "^0.30.0",
     "react-native-gifted-chat": "file:../"
   },
   "devDependencies": {
-    "eslint": "^3.1.1",
+    "eslint": "^3.2.0",
     "eslint-plugin-react": "^5.2.2",
     "eslint-plugin-react-native": "^1.2.0",
     "sane": "^1.4.0"

package.json

@@ -4,7 +4,10 @@
   "description": "The most complete chat UI for React Native",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
+  },
+  "jest": {
+    "preset": "jest-react-native"
   },
   "repository": {
     "type": "git",
@@ -42,7 +45,6 @@
     "moment": "^2.13.0",
     "react-native-communications": "^2.0.0",
     "react-native-dismiss-keyboard": "^1.0.0",
-    "react-native-gifted-material": "file:./react-native-gifted-material/",
     "react-native-invertible-scroll-view": "^1.0.0",
     "react-native-parsed-text": "0.0.15"
   }

src/Avatar.js

@@ -4,7 +4,7 @@ import {
   View,
 } from 'react-native';
 
-import {Avatar as GiftedAvatar} from 'react-native-gifted-material';
+import GiftedAvatar from './GiftedAvatar';
 
 export default class Avatar extends Component {
   renderAvatar() {

src/Composer.js

@@ -39,7 +39,7 @@ const styles = StyleSheet.create({
 Composer.defaultProps = {
   textInputStyle: {},
   onChange: () => {},
-  composerHeight: 33,
+  composerHeight: 33, // TODO SHARE with GiftedChat.js and tests
   text: '',
   placeholder: 'Type a message...',
   placeholderTextColor: '#b2b2b2',

react-native-gifted-material/components/Avatar.js → src/GiftedAvatar.js

@@ -1,3 +1,6 @@
+/*
+**  This component will be published in a separate package
+*/
 import React, { Component } from 'react';
 import {
   Image,

src/GiftedChat.js

@@ -29,6 +29,7 @@ import Time from './Time';
 
 // Min and max heights of ToolbarInput and Composer
 // Needed for handling Composer's auto grow and ScrollView animation
+// TODO move these values to Constants.js (also with used colors #b2b2b2)
 const MIN_COMPOSER_HEIGHT = 33;
 const MAX_COMPOSER_HEIGHT = 100;
 const MIN_INPUT_TOOLBAR_HEIGHT = 44;
@@ -242,11 +243,17 @@ class GiftedChat extends Component {
     }
   }
 
-  onKeyboardDidShow() {
+  onKeyboardDidShow(e) {
+    if (Platform.OS === 'android') {
+      this.onKeyboardWillShow(e);
+    }
     this.setIsTypingDisabled(false);
   }
 
-  onKeyboardDidHide() {
+  onKeyboardDidHide(e) {
+    if (Platform.OS === 'android') {
+      this.onKeyboardWillHide(e);
+    }
     this.setIsTypingDisabled(false);
   }
 

src/LoadEarlier.js

@@ -26,18 +26,17 @@ export default class LoadEarlier extends Component {
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
-    justifyContent: 'center',
     marginTop: 5,
     marginBottom: 10,
   },
   wrapper: {
     alignItems: 'center',
-    backgroundColor: '#ccc',
-    borderRadius: 10,
+    justifyContent: 'center',
+    backgroundColor: '#b2b2b2',
+    borderRadius: 15,
+    height: 30,
     paddingLeft: 10,
     paddingRight: 10,
-    paddingTop: 5,
-    paddingBottom: 5,
   },
   text: {
     backgroundColor: 'transparent',

src/MessageContainer.js

@@ -1,7 +1,4 @@
 import React, { Component, PropTypes } from 'react';
-import {
-
-} from 'react-native';
 
 import InvertibleScrollView from 'react-native-invertible-scroll-view';
 
@@ -56,7 +53,6 @@ export default class MessageContainer extends Component {
     return (
       <InvertibleScrollView
         {...this.props.invertibleScrollViewProps}
-
         ref={component => this._invertibleScrollViewRef = component}
       >
         {this.props.messages.map((message, index) => {