diff --git a/readme.md b/readme.md
index e709835..a94bf7e 100644
--- a/readme.md
+++ b/readme.md
@@ -27,7 +27,7 @@
 
 
 #### 安装
-`npm install git+https://github.com/25juan/react-native-chat-ui.git --save`
+`npm install git+https://github.com/HenryHeisenberg/react-native-chat-ui.git --save`
 
 #### 使用方法
 ```
diff --git a/src/Chat.js b/src/Chat.js
index 75a1a3d..d384f58 100644
--- a/src/Chat.js
+++ b/src/Chat.js
@@ -1,204 +1,206 @@
-import React,{ Component } from "react" ;
-import { View,StyleSheet } from "react-native" ;
+import React, { Component } from "react";
+import { View, StyleSheet, ScrollView } from "react-native";
 import MessageList from './components/MessageContainer';
-import MessageInput from "./components/InputToolbar" ;
-import RecordMask from "./components/RecordMask" ;
-import PropTypes from "prop-types" ;
+import MessageInput from "./components/InputToolbar";
+import RecordMask from "./components/RecordMask";
+import PropTypes from "prop-types";
 export default class Chat extends Component {
     state = {
-        show:false,
-        text:"",
-        color:"",
+        show: false,
+        text: "",
+        color: "",
     };
-    startRecording = ()=>{
-        this.setState({ show:true, text:"手指上滑, 取消发送", color:"transparent" });
+    startRecording = () => {
+        this.setState({ show: true, text: "手指上滑, 取消发送", color: "transparent" });
         this.props.startRecording();
     };
-    stopRecording = (canceled)=>{
+    stopRecording = (canceled) => {
         this.setState({
-            show:false,
-            text:"",
-            color:""
+            show: false,
+            text: "",
+            color: ""
         });
         this.props.stopRecording(canceled);
     };
-    onEndReachedRecording = ()=>{
+    onEndReachedRecording = () => {
         this.setState({
-            show:true,
-            text:"松开手指, 取消发送",
-            color:"#cf0e0e"
+            show: true,
+            text: "松开手指, 取消发送",
+            color: "#cf0e0e"
         });
         this.props.onEndReachedRecording();
     };
-    onReachedRecording = ()=>{
+    onReachedRecording = () => {
         this.setState({
-            show:true,
-            text:"手指上滑, 取消发送",
-            color:"transparent"
+            show: true,
+            text: "手指上滑, 取消发送",
+            color: "transparent"
         });
         this.props.onReachedRecording();
     };
 
-    componentDidMount(){
-        this.props.onLoad(this.messageList,this.input);
+    componentDidMount() {
+        this.props.onLoad(this.messageList, this.input);
     }
-    onSend = (text)=>{
-        if(text){
+    onSend = (text) => {
+        if (text) {
             this.props.onSend(text);
         }
     };
-    onMessagePress = (message)=>{
+    onMessagePress = (message) => {
         this.props.onMessagePress(message);
     };
-    onMessageLongPress = (message)=>{
+    onMessageLongPress = (message) => {
         this.props.onMessageLongPress(message);
     };
-    onFailPress = (message)=>{
+    onFailPress = (message) => {
         this.props.onFailPress(message);
     };
-    onCameraPicker =()=>{
+    onCameraPicker = () => {
         this.props.onImagePicker();
     };
-    onImagePicker =()=>{
-       this.props.onImagePicker();
+    onImagePicker = () => {
+        this.props.onImagePicker();
     };
-    onLocationClick = ()=>{
+    onLocationClick = () => {
         this.props.onLocationClick();
     };
-    onPhonePress = (phone)=>{
+    onPhonePress = (phone) => {
         this.props.onPhonePress(phone);
     };
-    onUrlPress = (url)=>{
+    onUrlPress = (url) => {
         this.props.onUrlPress(url);
     };
-    onEmailPress = (email)=>{
+    onEmailPress = (email) => {
         this.props.onEmailPress(email);
     };
-    onMessageListTouch = ()=>{
+    onMessageListTouch = () => {
         this.dismissTools();
         this.props.onMessageListTouch();
     };
-    onScroll(){
+    onScroll() {
         this.props.onScroll();
     }
-    dismissTools(){
-        if(this.input){// 当消息列表滚动的时候关闭表情和同居选择面板
+    dismissTools() {
+        if (this.input) {// 当消息列表滚动的时候关闭表情和同居选择面板
             this.input.dismiss();
         }
     }
-    onLoadMoreAsync = (callback)=>{
+    onLoadMoreAsync = (callback) => {
         this.props.onLoadMoreAsync(callback);
     };
-    renderLoadEarlier = ()=>{  };
-    onHeightChange = (height)=>{ this.props.onHeightChange(height); };
+    renderLoadEarlier = () => { };
+    onHeightChange = (height) => { this.props.onHeightChange(height); };
     render() {
-        let { style={ } } = this.props ;
+        let { style = {} } = this.props;
         return (
-            <View style={[styles.container,style]}>
-                <MessageList
-                    containerStyle={ this.props.containerStyle }
-                    wrapperStyle={this.props.wrapperStyle}
-                    textStyle = {this.props.textStyle}
-                    earlierTextStyle = {this.props.earlierTextStyle}
-                    earlierContainerStyle = {this.props.earlierContainerStyle}
-                    earlierWrapperStyle = {this.props.earlierWrapperStyle}
-                    onLoadMoreAsync={this.onLoadMoreAsync}
-                    isLoadingEarlier = { this.props.isLoadingEarlier }
-                    onAvatarPress = { this.props.onAvatarPress }
-                    ref={(messageList)=> this.messageList = messageList }
-                    onMessagePress={this.onMessagePress}
-                    onFailPress = { this.onFailPress }
-                    onMessageLongPress={this.onMessageLongPress}
-                    onScroll={()=>this.onScroll()}
-                    onMessageListTouch={this.onMessageListTouch}
-                    isShowOutgoingDisplayName={true}
-                    canLoadMore={ this.props.canLoadMore }
-                    onPhonePress={this.onPhonePress}
-                    onUrlPress = { this.onUrlPress }
-                    onEmailPress = { this.onEmailPress }/>
+            <View style={[styles.container, style]}>
+                <ScrollView>
+                    <MessageList
+                        containerStyle={this.props.containerStyle}
+                        wrapperStyle={this.props.wrapperStyle}
+                        textStyle={this.props.textStyle}
+                        earlierTextStyle={this.props.earlierTextStyle}
+                        earlierContainerStyle={this.props.earlierContainerStyle}
+                        earlierWrapperStyle={this.props.earlierWrapperStyle}
+                        onLoadMoreAsync={this.onLoadMoreAsync}
+                        isLoadingEarlier={this.props.isLoadingEarlier}
+                        onAvatarPress={this.props.onAvatarPress}
+                        ref={(messageList) => this.messageList = messageList}
+                        onMessagePress={this.onMessagePress}
+                        onFailPress={this.onFailPress}
+                        onMessageLongPress={this.onMessageLongPress}
+                        onScroll={() => this.onScroll()}
+                        onMessageListTouch={this.onMessageListTouch}
+                        isShowOutgoingDisplayName={true}
+                        canLoadMore={this.props.canLoadMore}
+                        onPhonePress={this.onPhonePress}
+                        onUrlPress={this.onUrlPress}
+                        onEmailPress={this.onEmailPress} />
 
+                </ScrollView>
 
-                <MessageInput onHeightChange={ this.onHeightChange }
-                              startRecording={ this.startRecording }
-                              stopRecording={ this.stopRecording }
-                              renderEmoji={this.props.renderEmoji}
-                              onEndReachedRecording = { this.onEndReachedRecording }
-                              onReachedRecording={ this.onReachedRecording }
-                              handleImagePicker = { this.onImagePicker }
-                              handleCameraPicker = { this.onCameraPicker }
-                              handleLocationClick={this.onLocationClick}
-                              renderTools = { this.props.renderTools }
-                              ref={(input)=>this.input = input}
-                              onSend={ this.onSend }/>
-                <RecordMask  show={ this.state.show }
-                             text={ this.state.text }
-                             textStyle={ { backgroundColor:this.state.color } }/>
+                <MessageInput onHeightChange={this.onHeightChange}
+                    startRecording={this.startRecording}
+                    stopRecording={this.stopRecording}
+                    renderEmoji={this.props.renderEmoji}
+                    onEndReachedRecording={this.onEndReachedRecording}
+                    onReachedRecording={this.onReachedRecording}
+                    handleImagePicker={this.onImagePicker}
+                    handleCameraPicker={this.onCameraPicker}
+                    handleLocationClick={this.onLocationClick}
+                    renderTools={this.props.renderTools}
+                    ref={(input) => this.input = input}
+                    onSend={this.onSend} />
+                <RecordMask show={this.state.show}
+                    text={this.state.text}
+                    textStyle={{ backgroundColor: this.state.color }} />
             </View>
         );
     }
 }
 Chat.propTypes = {
-    containerStyle:PropTypes.object,
-    wrapperStyle:PropTypes.object,
-    textStyle:PropTypes.object,
-    earlierTextStyle:PropTypes.object,
-    earlierContainerStyle:PropTypes.object,
-    earlierWrapperStyle:PropTypes.object,
-    isLoadingEarlier:PropTypes.bool,
-    canLoadMore:PropTypes.bool,
-    startRecording:PropTypes.func,
-    stopRecording:PropTypes.func,
-    onEndReachedRecording:PropTypes.func,
-    onReachedRecording:PropTypes.func,
-    onSend:PropTypes.func,
-    onFailPress:PropTypes.func,
-    onMessagePress:PropTypes.func,
-    onMessageLongPress:PropTypes.func,
-    onImagePicker:PropTypes.func,
-    onCameraPicker:PropTypes.func,
-    onLocationClick:PropTypes.func,
-    onPhonePress:PropTypes.func,
-    onUrlPress:PropTypes.func,
-    onEmailPress:PropTypes.func,
-    onMessageListTouch:PropTypes.func,
-    onScroll:PropTypes.func,
-    onLoadMoreAsync:PropTypes.func,
-    renderLoadEarlier:PropTypes.func,
-    onLoad :PropTypes.func,
-    onHeightChange:PropTypes.func,
-    onAvatarPress:PropTypes.func,
-    renderEmoji:PropTypes.func,
+    containerStyle: PropTypes.object,
+    wrapperStyle: PropTypes.object,
+    textStyle: PropTypes.object,
+    earlierTextStyle: PropTypes.object,
+    earlierContainerStyle: PropTypes.object,
+    earlierWrapperStyle: PropTypes.object,
+    isLoadingEarlier: PropTypes.bool,
+    canLoadMore: PropTypes.bool,
+    startRecording: PropTypes.func,
+    stopRecording: PropTypes.func,
+    onEndReachedRecording: PropTypes.func,
+    onReachedRecording: PropTypes.func,
+    onSend: PropTypes.func,
+    onFailPress: PropTypes.func,
+    onMessagePress: PropTypes.func,
+    onMessageLongPress: PropTypes.func,
+    onImagePicker: PropTypes.func,
+    onCameraPicker: PropTypes.func,
+    onLocationClick: PropTypes.func,
+    onPhonePress: PropTypes.func,
+    onUrlPress: PropTypes.func,
+    onEmailPress: PropTypes.func,
+    onMessageListTouch: PropTypes.func,
+    onScroll: PropTypes.func,
+    onLoadMoreAsync: PropTypes.func,
+    renderLoadEarlier: PropTypes.func,
+    onLoad: PropTypes.func,
+    onHeightChange: PropTypes.func,
+    onAvatarPress: PropTypes.func,
+    renderEmoji: PropTypes.func,
 };
 Chat.defaultProps = {
-    containerStyle:{left:{ },right:{  }},
-    wrapperStyle:{left:{ },right:{  }},
-    textStyle:{ left:{ },right:{  } },
-    earlierTextStyle:{ },
-    earlierContainerStyle:{ },
-    earlierWrapperStyle:{ },
-    isLoadingEarlier:false ,
-    canLoadMore:true,
-    startRecording:()=>{ },
-    stopRecording:PropTypes.func,
-    onEndReachedRecording:()=>{ },
-    onReachedRecording:()=>{ },
-    onSend:()=>{ },
-    onMessagePress:()=>{ },
-    onMessageLongPress:()=>{ },
-    onImagePicker:()=>{ },
-    onCameraPicker:()=>{ },
-    onLocationClick:()=>{ },
-    onPhonePress:()=>{ },
-    onUrlPress:()=>{ },
-    onEmailPress:()=>{ },
-    onMessageListTouch:()=>{ },
-    onScroll:()=>{ },
-    onLoadMoreAsync:(callback)=>{ callback() },
-    renderLoadEarlier:()=>{ },
-    onFailPress:()=>{ },
-    onLoad:()=>{ },
-    onHeightChange:()=>{ },
-    onAvatarPress:()=>{ },
+    containerStyle: { left: {}, right: {} },
+    wrapperStyle: { left: {}, right: {} },
+    textStyle: { left: {}, right: {} },
+    earlierTextStyle: {},
+    earlierContainerStyle: {},
+    earlierWrapperStyle: {},
+    isLoadingEarlier: false,
+    canLoadMore: true,
+    startRecording: () => { },
+    stopRecording: PropTypes.func,
+    onEndReachedRecording: () => { },
+    onReachedRecording: () => { },
+    onSend: () => { },
+    onMessagePress: () => { },
+    onMessageLongPress: () => { },
+    onImagePicker: () => { },
+    onCameraPicker: () => { },
+    onLocationClick: () => { },
+    onPhonePress: () => { },
+    onUrlPress: () => { },
+    onEmailPress: () => { },
+    onMessageListTouch: () => { },
+    onScroll: () => { },
+    onLoadMoreAsync: (callback) => { callback() },
+    renderLoadEarlier: () => { },
+    onFailPress: () => { },
+    onLoad: () => { },
+    onHeightChange: () => { },
+    onAvatarPress: () => { },
 };
 
 const styles = StyleSheet.create({
diff --git a/src/components/InputToolbar.js b/src/components/InputToolbar.js
index 0fcb52e..b8cc38f 100644
--- a/src/components/InputToolbar.js
+++ b/src/components/InputToolbar.js
@@ -13,9 +13,9 @@ import {
 } from 'react-native';
 import Emoji from 'react-native-emoji'
 import Styles from './Styles/MessageScreenStyle';
-import PropTypes from "prop-types" ;
-import spliddit from "../utils/spliddit" ;
-import _ from "lodash" ;
+import PropTypes from "prop-types";
+import spliddit from "../utils/spliddit";
+import _ from "lodash";
 var emojiUtils = require('node-emoji')
 var emoji = require("./emoji");
 const MODE_TEXT = "mode_text"; // 文本输入模式
@@ -49,7 +49,7 @@ export default class InputToolbar extends React.Component {
             isEmoji: false,
             value: '',
             actionVisible: false,
-            shimVisible:false, // ios软键盘弹出的垫子,只有ios 需要特殊处理
+            shimVisible: false, // ios软键盘弹出的垫子,只有ios 需要特殊处理
             actionAnim: new Animated.Value(0)
         };
 
@@ -57,31 +57,37 @@ export default class InputToolbar extends React.Component {
         this.actionBarHeight = 0;
     }
 
-    componentWillMount(){
-        Platform.OS === "ios" && this.removeKeyboardListener();
-    }
-    componentWillUnmount(){
-        Platform.OS === "ios" && this.removeKeyboardListener();
+    // componentWillMount(){
+    //     Platform.OS === "ios" && this.removeKeyboardListener();
+    // }
+    componentWillUnmount() {
+        if (Platform.OS === "ios") {
+            let keyboardDidHide = Keyboard.listenerCount("keyboardDidHide");
+            let keyboardDidShow = Keyboard.listenerCount("keyboardDidShow");
+            if (keyboardDidHide > 0 || keyboardDidShow > 0) {
+                this.removeKeyboardListener()
+            }
+        }
     }
-    componentDidMount(){
+    componentDidMount() {
         Platform.OS === "ios" && this.addKeyboardListener();
     }
-    removeKeyboardListener(){
+    removeKeyboardListener() {
         Keyboard.removeAllListeners("keyboardDidShow");
         Keyboard.removeAllListeners("keyboardDidHide");
     }
-    addKeyboardListener(){
-        Keyboard.addListener("keyboardDidShow",(e)=>{
-            let keyboardHeight = e.startCoordinates.height ; // 获取键盘高度
-            this.actionBarHeight = keyboardHeight ;
+    addKeyboardListener() {
+        Keyboard.addListener("keyboardDidShow", (e) => {
+            let keyboardHeight = e.startCoordinates.height; // 获取键盘高度
+            this.actionBarHeight = keyboardHeight;
             this.setState({
-                shimVisible:true
+                shimVisible: true
             });
         });
-        Keyboard.addListener("keyboardDidHide",(e)=>{ // 关闭软件盘时重置参数
-            this.actionBarHeight = 0 ;
+        Keyboard.addListener("keyboardDidHide", (e) => { // 关闭软件盘时重置参数
+            this.actionBarHeight = 0;
             this.setState({
-                shimVisible:false
+                shimVisible: false
             })
         });
     }
@@ -90,16 +96,16 @@ export default class InputToolbar extends React.Component {
      * 重置关闭表情选择和工具选择
      */
     dismiss() {
-        const {isEmoji, actionVisible} = this.state;
+        const { isEmoji, actionVisible } = this.state;
         this.setState({
             isEmoji: false,
             actionVisible: false,
-        },()=>{
+        }, () => {
 
         });
         Animated.timing(
             this.state.actionAnim,
-            {toValue: 0}
+            { toValue: 0 }
         ).start();
 
         if (isEmoji || actionVisible) {
@@ -113,13 +119,13 @@ export default class InputToolbar extends React.Component {
      * 发送点击事件
      */
     handleSend() {
-        if(this.state.value){ // 判断消息是否存在
+        if (this.state.value) { // 判断消息是否存在
             this.props.onSend(this.state.value);
             if (this.composerHeight != MIN_COMPOSER_HEIGHT) {
                 this.composerHeight = MIN_COMPOSER_HEIGHT;
                 this.onHeightChange();
             }
-            this.setState({value: ''});
+            this.setState({ value: '' });
         }
     }
 
@@ -134,7 +140,7 @@ export default class InputToolbar extends React.Component {
             }
             Animated.timing(
                 this.state.actionAnim,
-                {toValue: 0}
+                { toValue: 0 }
             ).start();
 
             this.setState({ actionVisible: false, isEmoji: false });
@@ -144,13 +150,13 @@ export default class InputToolbar extends React.Component {
             this.search.blur();
         }
         actionVisible = !actionVisible;
-        this.setState({actionVisible: actionVisible, isEmoji: false});
+        this.setState({ actionVisible: actionVisible, isEmoji: false });
         if (actionVisible) {
             this.onHeightChange();
         }
         Animated.timing(
             this.state.actionAnim,
-            {toValue: 1}
+            { toValue: 1 }
         ).start();
     }
 
@@ -180,7 +186,7 @@ export default class InputToolbar extends React.Component {
         });
         Animated.timing(          // Uses easing functions
             this.state.actionAnim,    // The value to drive
-            {toValue: 1}           // Configuration
+            { toValue: 1 }           // Configuration
         ).start();
     }
 
@@ -221,7 +227,7 @@ export default class InputToolbar extends React.Component {
         });
         Animated.timing(
             this.state.actionAnim,
-            {toValue: 1}
+            { toValue: 1 }
         ).start();
     }
 
@@ -229,7 +235,7 @@ export default class InputToolbar extends React.Component {
      * 输入框失去焦点事件
      */
     handleBlurSearch() {
-        this.setState({focused: false});
+        this.setState({ focused: false });
     }
 
     /**
@@ -238,12 +244,12 @@ export default class InputToolbar extends React.Component {
      */
     handleChangeText(v) {
         if (v.length > 0 && v[v.length - 1] == '\n') {
-            this.props.onSend(v.slice(0,v.length - 1)); // 去除\n
+            this.props.onSend(v.slice(0, v.length - 1)); // 去除\n
             if (this.composerHeight != MIN_COMPOSER_HEIGHT) {
                 this.composerHeight = MIN_COMPOSER_HEIGHT;
                 this.onHeightChange();
             }
-            this.setState({value: ''});
+            this.setState({ value: '' });
         } else {
             this.setState({
                 value: v,
@@ -296,7 +302,7 @@ export default class InputToolbar extends React.Component {
      * 录音按钮点击事件
      */
     handleRecordMode() {
-        const {isEmoji, actionVisible} = this.state;
+        const { isEmoji, actionVisible } = this.state;
         if (this.state.mode == MODE_RECORD) {
             return;
         }
@@ -316,42 +322,45 @@ export default class InputToolbar extends React.Component {
         if (this.state.mode == MODE_TEXT) {
             return;
         }
-        this.setState({mode: MODE_TEXT, focused: true,});
+        this.setState({ mode: MODE_TEXT, focused: true, });
     }
-    renderImoji = (item,index,rowIconNum)=>{
-        let emojis = _.chunk(item,rowIconNum) ;
-        let backspace = "{{backspace}}" ;
-        emojis.map(row=>{
-            if(row.length !== rowIconNum){
-                row.push(backspace) ;
+    renderImoji = (item, index, rowIconNum) => {
+        let emojis = _.chunk(item, rowIconNum);
+        let backspace = "{{backspace}}";
+        emojis.map(row => {
+            if (row.length !== rowIconNum) {
+                row.push(backspace);
             }
-            return row ;
+            return row;
         });
 
         return (
-            <View key={index} style={[Styles.slide,{width:width,height:EMOJI_HEIGHT-35}]}>
+            <View key={index} style={[Styles.slide, { width: width, height: EMOJI_HEIGHT - 35 }]}>
                 {
-                    emojis.map((rows,index)=>(
+                    emojis.map((rows, index) => (
                         <View key={`${index}`} style={Styles.slideRow}>
                             {
-                                rows.map((item,id)=>{
+                                rows.map((item, id) => {
                                     return (
-                                        item === backspace?(
+                                        item === backspace ? (
                                             <TouchableOpacity style={Styles.iconTouch} key={_.uniqueId("row")} onPress={this.handleEmojiCancel.bind(this)}>
-                                                <Image style={{height:30,width:30}} source={require("./Images/backspace.png")}/>
+                                                <Image style={{ height: 30, width: 30 }} source={require("./Images/backspace.png")} />
                                             </TouchableOpacity>
-                                        ):(
-                                            item==="{{emtype_str}}"?(
-                                                <View style={{ opacity:0 }} key={_.uniqueId("row")}>
-                                                    <Text style={[Styles.emoji]}><Emoji name={ "cow2" }/></Text>
-                                                </View>
-                                            ):(
-                                                <TouchableOpacity style={Styles.iconTouch}  key={_.uniqueId("row")} onPress={() => {
-                                                    this.handleEmojiClick(emojiUtils.get(item))
-                                                }}>
-                                                    <Text style={[Styles.emoji]}><Emoji name={ item }/></Text>
-                                                </TouchableOpacity>
-                                            ))
+                                        )
+                                            : (
+                                                item === "{{emtype_str}}" ? (
+                                                    <View style={{ opacity: 0 }} key={_.uniqueId("row")}>
+                                                        <Text style={[Styles.emoji]}><Emoji name={"cow2"} /></Text>
+                                                    </View>
+                                                )
+                                                    : (
+                                                        <TouchableOpacity style={Styles.iconTouch} key={_.uniqueId("row")} onPress={() => {
+                                                            this.handleEmojiClick(emojiUtils.get(item))
+                                                        }}>
+                                                            <Text style={[Styles.emoji]}><Emoji name={item} /></Text>
+                                                        </TouchableOpacity>
+                                                    )
+                                            )
                                     )
                                 })
                             }
@@ -366,70 +375,71 @@ export default class InputToolbar extends React.Component {
      * @private
      */
     _renderEmoji() {
-        let { renderEmoji } = this.props ;
-        const {isEmoji, focused} = this.state;
+        let { renderEmoji } = this.props;
+        const { isEmoji, focused } = this.state;
         const emojiStyle = [];
-        let emojis =  renderEmoji(emoji.emojis) ;
+        let emojis = renderEmoji(emoji.emojis);
         const rowIconNum = 7;
-        const pageNum = 20 ;
-        let pages = Math.ceil(emojis.length/pageNum) ;
-        for(let start =emojis.length ,end = pages*pageNum; start<end ;start++){
-            emojis[start] = "{{emtype_str}}" ;
+        const pageNum = 20;
+        let pages = Math.ceil(emojis.length / pageNum);
+        for (let start = emojis.length, end = pages * pageNum; start < end; start++) {
+            emojis[start] = "{{emtype_str}}";
         }
-        emojis = _.chunk(emoji.emojis,pageNum) ;
-        return <Animated.View style={[Styles.emojiRow,{width:width,height:EMOJI_HEIGHT}]}>
+        emojis = _.chunk(emoji.emojis, pageNum);
+        return <Animated.View style={[Styles.emojiRow, { width: width, height: EMOJI_HEIGHT }]}>
             <FlatList
-                pagingEnabled={ true }
+                pagingEnabled={true}
                 horizontal={true}
                 alwaysBounceHorizontal={true}
                 showsHorizontalScrollIndicator={false}
-                data={emojis }
+                data={emojis}
                 initialNumToRender={2}
-                keyExtractor = { (item,index)=>`${index}` }
-                renderItem={({ item,index })=>this.renderImoji(item,index,rowIconNum)}
+                keyExtractor={(item, index) => `${index}`}
+                renderItem={({ item, index }) => this.renderImoji(item, index, rowIconNum)}
             />
-            <View style={{height:35,flexDirection:'row'}}>
-                <View style={{flex:1}}></View>
-                <TouchableOpacity onPress={()=>this.handleSend()}
-                                  style={{backgroundColor:'#d82614',justifyContent:'center',alignItems:'center',width:55}}>
-                    <Text style={{color:'#fff'}}>发送</Text>
+            <View style={{ height: 35, flexDirection: 'row' }}>
+                <View style={{ flex: 1 }}></View>
+                <TouchableOpacity onPress={() => this.handleSend()}
+                    style={{ backgroundColor: '#d82614', justifyContent: 'center', alignItems: 'center', width: 55 }}>
+                    <Text style={{ color: '#fff' }}>发送</Text>
                 </TouchableOpacity>
             </View>
         </Animated.View>
     }
-    _renderTools = ()=>{
-        let style= {height:40,width:40};
+    _renderTools = () => {
+        let style = { height: 40, width: 40 };
         let itemStyle = {
-            alignItems:"center",
-            paddingLeft:10,
-            paddingRight:10,
-            paddingTop:5,
-            paddingBottom:5,
-            width:100,
+            alignItems: "center",
+            paddingLeft: 10,
+            paddingRight: 10,
+            paddingTop: 5,
+            paddingBottom: 5,
+            width: 100,
         }
         return [
             (
                 <View key={"camera"} style={itemStyle}>
                     <TouchableOpacity style={Styles.iconTouch} onPress={this.handleCameraPicker.bind(this)}>
-                        <Image resizeMode={"contain"} style={style}  source={require("./Images/camera.png")}/>
+                        <Image resizeMode={"contain"} style={style} source={require("./Images/camera.png")} />
                     </TouchableOpacity>
-                    <Text style={{marginTop:6, fontSize:12}}>拍照</Text>
+                    <Text style={{ marginTop: 6, fontSize: 12 }}>拍照</Text>
                 </View>
-            ),(
+            ), (
                 <View key={"photo"} style={itemStyle}>
                     <TouchableOpacity style={Styles.iconTouch} onPress={this.handleImagePicker.bind(this)}>
-                        <Image resizeMode={"contain"} style={style} source={require("./Images/image.png")}/>
-                    </TouchableOpacity>
-                    <Text style={{marginTop:6, fontSize:12}}>相册</Text>
-                </View>
-            ),(
-                <View key={"location"} style={itemStyle}>
-                    <TouchableOpacity style={Styles.iconTouch} onPress={this.handleLocationClick.bind(this)}>
-                        <Image resizeMode={"contain"} style={style} source={require("./Images/pin.png")}/>
+                        <Image resizeMode={"contain"} style={style} source={require("./Images/image.png")} />
                     </TouchableOpacity>
-                    <Text style={{marginTop:6, fontSize:12}}>位置</Text>
+                    <Text style={{ marginTop: 6, fontSize: 12 }}>相册</Text>
                 </View>
             )
+            //             ,(
+            //                 <View key={"location"} style={itemStyle}>
+            //                     <TouchableOpacity style={Styles.iconTouch} onPress={this.handleLocationClick.bind(this)}>
+            //                         <Image resizeMode={"contain"} style={style} source={require("./Images/pin.png")}/>
+            //                     </TouchableOpacity>
+            //                     <Text style={{marginTop:6, fontSize:12}}>位置</Text>
+            //                 </View>
+            //             )
         ];
     }
     /**
@@ -438,21 +448,21 @@ export default class InputToolbar extends React.Component {
      * @private
      */
     _renderActions() {
-        let { renderTools } = this.props ;
-        let { shimVisible, actionVisible } = this.state ; // 如果当前是软键盘弹出则添加一个垫子，防止输入框被键盘遮住
-        let height = actionVisible?ACTION_BUTTON_HEIGHT:0;
-        return shimVisible?(<View style={[Styles.iconRow,{ height:this.actionBarHeight }]}></View>):(
-            actionVisible?(
-                <Animated.View style={[Styles.iconRow,{ height:height-5 }]}>
-                    {renderTools? renderTools(this._renderTools()):this._renderTools() }
+        let { renderTools } = this.props;
+        let { shimVisible, actionVisible } = this.state; // 如果当前是软键盘弹出则添加一个垫子，防止输入框被键盘遮住
+        let height = actionVisible ? ACTION_BUTTON_HEIGHT : 0;
+        return shimVisible ? (<View style={[Styles.iconRow, { height: this.actionBarHeight }]}></View>) : (
+            actionVisible ? (
+                <Animated.View style={[Styles.iconRow, { height: height - 5 }]}>
+                    {renderTools ? renderTools(this._renderTools()) : this._renderTools()}
                 </Animated.View>
-            ):null
+            ) : null
         );
     }
 
     onHeightChange() {
         var h = this.composerHeight + (MIN_INPUT_TOOLBAR_HEIGHT - MIN_COMPOSER_HEIGHT) + this.actionBarHeight;
-        if(typeof this.props.onHeightChange === "function"){
+        if (typeof this.props.onHeightChange === "function") {
             this.props.onHeightChange(h);
         }
     }
@@ -475,19 +485,19 @@ export default class InputToolbar extends React.Component {
      * @returns {XML}
      */
     renderTextInput() {
-        const {value = '' } = this.state;
+        const { value = '' } = this.state;
         var height = this.composerHeight + (MIN_INPUT_TOOLBAR_HEIGHT - MIN_COMPOSER_HEIGHT);
         return (
-            <View style={[Styles.inputRow, {height:height}]}>
-                <TouchableOpacity style={{alignSelf:"stretch",justifyContent:"center",paddingLeft:8}}
-                                  onPress={this.handleRecordMode.bind(this)}>
-                    <Image style={{height:30,width:30}} source={require('./Images/chatBar_record.png')}/>
+            <View style={[Styles.inputRow, { height: height }]}>
+                <TouchableOpacity style={{ alignSelf: "stretch", justifyContent: "center", paddingLeft: 8 }}
+                    onPress={this.handleRecordMode.bind(this)}>
+                    <Image style={{ height: 30, width: 30 }} source={require('./Images/chatBar_record.png')} />
                 </TouchableOpacity>
 
                 <View style={Styles.searchRow}>
                     <TextInput
-                        ref={(search)=> {this.search = search} }
-                        style={[Styles.searchInput, {height: this.composerHeight}]}
+                        ref={(search) => { this.search = search }}
+                        style={[Styles.searchInput, { height: this.composerHeight }]}
                         value={value}
                         autoFocus={this.state.focused}
                         editable={true}
@@ -503,8 +513,8 @@ export default class InputToolbar extends React.Component {
                         underlineColorAndroid='transparent'
                     />
                 </View>
-                { this._renderEmojiButton() }
-                { this._renderSendButton() }
+                {/* {this._renderEmojiButton()} */}
+                {this._renderSendButton()}
             </View>
         );
     }
@@ -522,7 +532,7 @@ export default class InputToolbar extends React.Component {
             onStartShouldSetResponder: (evt) => true,
             onMoveShouldSetResponder: (evt) => true,
             onResponderGrant: (evt) => {
-                this.setState({opacity: "#c9c9c9"});
+                this.setState({ opacity: "#c9c9c9" });
                 this.props.startRecording();
             },
             onResponderReject: (evt) => {
@@ -536,7 +546,7 @@ export default class InputToolbar extends React.Component {
                 }
             },
             onResponderRelease: (evt) => {
-                this.setState({opacity: "#fff"});
+                this.setState({ opacity: "#fff" });
                 var canceled;
                 if (evt.nativeEvent.locationY < 0 ||
                     evt.nativeEvent.pageY < this.recordPageY) {
@@ -553,29 +563,30 @@ export default class InputToolbar extends React.Component {
 
         };
         return (
-            <View style={[Styles.inputRow, {height:height}]}>
-                <TouchableOpacity style={{alignSelf:"stretch",justifyContent:"center", paddingLeft:8}}
-                                  onPress={this.handleTextMode.bind(this)}>
-                    <Image style={{height:30,width:30}} source={require('./Images/chatBar_keyboard.png')}/>
+            <View style={[Styles.inputRow, { height: height }]}>
+                <TouchableOpacity style={{ alignSelf: "stretch", justifyContent: "center", paddingLeft: 8 }}
+                    onPress={this.handleTextMode.bind(this)}>
+                    <Image style={{ height: 30, width: 30 }} source={require('./Images/chatBar_keyboard.png')} />
                 </TouchableOpacity>
 
-                <View style={[Styles.searchRow, {padding:4}]}>
+                <View style={[Styles.searchRow, { padding: 4 }]}>
                     <View
                         ref="record"
                         {...responder}
-                        style={{flex:1,
-                            justifyContent:'center',
-                            alignItems:'center',
-                            borderRadius:5,
-                            backgroundColor:this.state.opacity,
-                            borderWidth:1,borderColor:'#f2f2f2'
+                        style={{
+                            flex: 1,
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            borderRadius: 5,
+                            backgroundColor: this.state.opacity,
+                            borderWidth: 1, borderColor: '#f2f2f2'
                         }}
                         onLayout={this.handleLayout.bind(this)}>
                         <Text>按住 说话</Text>
                     </View>
                 </View>
-                { this._renderEmojiButton() }
-                { this._renderSendButton() }
+                {this._renderEmojiButton()}
+                {this._renderSendButton()}
             </View>
         );
     }
@@ -586,16 +597,18 @@ export default class InputToolbar extends React.Component {
      * @private
      */
     _renderEmojiButton() {
-        const {isEmoji} = this.state;
+        const { isEmoji } = this.state;
         return (
-            <TouchableOpacity style={{paddingLeft:5,
-                paddingRight:5,
-                alignSelf:"stretch",
-                justifyContent:"center"}}
-                              onPress={this.handleEmojiOpen.bind(this)}>
+            <TouchableOpacity style={{
+                paddingLeft: 5,
+                paddingRight: 5,
+                alignSelf: "stretch",
+                justifyContent: "center"
+            }}
+                onPress={this.handleEmojiOpen.bind(this)}>
                 {
-                    isEmoji ? <Image style={{height:30,width:30}} source={require('./Images/chatBar_keyboard.png')}/>
-                        : <Image style={{height:30,width:30}}  source={require('./Images/iconEmoji.png')}/>
+                    isEmoji ? <Image style={{ height: 30, width: 30 }} source={require('./Images/chatBar_keyboard.png')} />
+                        : <Image style={{ height: 30, width: 30 }} source={require('./Images/iconEmoji.png')} />
                 }
             </TouchableOpacity>
         )
@@ -607,56 +620,56 @@ export default class InputToolbar extends React.Component {
      * @private
      */
     _renderSendButton() {
-        const {focused, value} = this.state;
-        return ((focused && value.length > 0) ) ? (
-            <TouchableOpacity style={{alignSelf:"stretch",justifyContent:"center",paddingRight:8}}
-                              onPress={this.handleSend.bind(this)}>
+        const { focused, value } = this.state;
+        return ((focused && value.length > 0)) ? (
+            <TouchableOpacity style={{ alignSelf: "stretch", justifyContent: "center", paddingRight: 8 }}
+                onPress={this.handleSend.bind(this)}>
                 <Text style={Styles.sendText}>{'发送'}</Text>
             </TouchableOpacity>
 
         ) : (
-            <TouchableOpacity style={{alignSelf:"stretch",justifyContent:"center",paddingRight:8}}
-                              onPress={this.onActionsPress.bind(this)}>
-                <Image style={{height:30,width:30}}  source={require('./Images/add.png')}/>
+            <TouchableOpacity style={{ alignSelf: "stretch", justifyContent: "center", paddingRight: 8 }}
+                onPress={this.onActionsPress.bind(this)}>
+                <Image style={{ height: 30, width: 30 }} source={require('./Images/add.png')} />
             </TouchableOpacity>
         );
     }
 
 
     render() {
-        const {　isEmoji, mode　} = this.state;
+        const { isEmoji, mode } = this.state;
         return (
             <View style={Styles.search}>
                 {mode == MODE_TEXT ? this.renderTextInput() : this.renderReocrdInput()}
-                <View style={{flexGrow:1, height:1, backgroundColor:"lightgray"}}/>
+                <View style={{ flexGrow: 1, height: 1, backgroundColor: "lightgray" }} />
                 {isEmoji ? this._renderEmoji() : this._renderActions()}
             </View>
         )
     }
 }
 InputToolbar.propTypes = {
-    startRecording:PropTypes.func.isRequired,
-    handleImagePicker:PropTypes.func.isRequired,
-    handleCameraPicker:PropTypes.func.isRequired,
-    handleLocationClick:PropTypes.func.isRequired,
-    stopRecording:PropTypes.func.isRequired,
-    onEndReachedRecording:PropTypes.func.isRequired, // 手指滑动到取消发送的距离的时候
-    onReachedRecording:PropTypes.func.isRequired, //手指为滑动到取消发送的距离的时候
-    onSend:PropTypes.func.isRequired, // 发送按钮点击发送消息事件
-    onHeightChange:PropTypes.func.isRequired, // 输入框的高度发生变化的时候所触发的事件
-    renderEmoji:PropTypes.func,
+    startRecording: PropTypes.func.isRequired,
+    handleImagePicker: PropTypes.func.isRequired,
+    handleCameraPicker: PropTypes.func.isRequired,
+    handleLocationClick: PropTypes.func.isRequired,
+    stopRecording: PropTypes.func.isRequired,
+    onEndReachedRecording: PropTypes.func.isRequired, // 手指滑动到取消发送的距离的时候
+    onReachedRecording: PropTypes.func.isRequired, //手指为滑动到取消发送的距离的时候
+    onSend: PropTypes.func.isRequired, // 发送按钮点击发送消息事件
+    onHeightChange: PropTypes.func.isRequired, // 输入框的高度发生变化的时候所触发的事件
+    renderEmoji: PropTypes.func,
 
 };
 InputToolbar.defaultProps = {
-    handleImagePicker:()=>{},
-    handleCameraPicker:()=>{},
-    handleLocationClick:()=>{},
-    startRecording:()=>{},
-    stopRecording:()=>{},
-    onEndReachedRecording:()=>{}, // 手指滑动到取消发送的距离的时候
-    onReachedRecording:()=>{},//手指为滑动到取消发送的距离的时候
-    onSend:()=>{},
-    onHeightChange:()=>{},
-    renderEmoji:(emojis)=>emojis
+    handleImagePicker: () => { },
+    handleCameraPicker: () => { },
+    handleLocationClick: () => { },
+    startRecording: () => { },
+    stopRecording: () => { },
+    onEndReachedRecording: () => { }, // 手指滑动到取消发送的距离的时候
+    onReachedRecording: () => { },//手指为滑动到取消发送的距离的时候
+    onSend: () => { },
+    onHeightChange: () => { },
+    renderEmoji: (emojis) => emojis
 };
 
diff --git a/src/components/LoadEarlier.js b/src/components/LoadEarlier.js
index 77a6915..629495c 100644
--- a/src/components/LoadEarlier.js
+++ b/src/components/LoadEarlier.js
@@ -9,6 +9,12 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 export default class LoadEarlier extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      show: 'flex'
+    }
+  }
   renderLoading() {
     if (this.props.isLoadingEarlier === false) {
       return (
@@ -20,8 +26,8 @@ export default class LoadEarlier extends React.Component {
     return (
       <View>
         <Text style={[styles.text, this.props.earlierTextStyle, {
-            opacity: 0,
-          }]}>
+          opacity: 0,
+        }]}>
           {this.props.label}
         </Text>
         <ActivityIndicator
@@ -35,10 +41,13 @@ export default class LoadEarlier extends React.Component {
   render() {
     return (
       <TouchableOpacity
-        style={[styles.container, this.props.earlierContainerStyle]}
+        style={[styles.container, this.props.earlierContainerStyle, { display: this.state.show }]}
         onPress={() => {
           if (this.props.onLoadMoreAsync) {
             this.props.onLoadMoreAsync();
+            this.setState({
+              show: 'none'
+            })
           }
         }}
         disabled={this.props.isLoadingEarlier === true}
@@ -80,12 +89,12 @@ const styles = StyleSheet.create({
 });
 
 LoadEarlier.defaultProps = {
-  onLoadEarlier: () => {},
+  onLoadEarlier: () => { },
   isLoadingEarlier: false,
   label: '查看历史消息',
-    earlierContainerStyle: {},
+  earlierContainerStyle: {},
   earlierWrapperStyle: {},
-    earlierTextStyle: {},
+  earlierTextStyle: {},
   activityIndicatorStyle: {},
 };