Open keyboard in list - React Native

I'm trying to implement a chat in my application, but when I open the keyboard to start a conversation, the conversation is released from view.

Here's my code and a gif of what's happening.

importReact,{Component}from'react';import{View,Text,TextInput,TouchableOpacity,ListView,StyleSheet,Image,ScrollView,Dimensions}from'react-native';import{connect}from'react-redux';import{Container}from'native-base';importConversationfrom'../services/conversation';importImagensfrom'../../../imagens';classChatextendsComponent{constructor(){super();this.state={conversationHistory:[],mensagem:''};this.sendMessage('oi');}sendMessage(text){this.setState({mensagem:''});Conversation.message({text}).then(r=>{if(r!=null&&r!==undefined){r.data_iteracao=newDate().getHours()+':'+newDate().getMinutes();this.state.conversationHistory.push(r);this.setState({conversationHistory:this.state.conversationHistory});}});}renderRow(texto){return(<Viewstyle={styles.item}><Viewstyle={[{alignItems:'flex-end'}]}><Viewstyle={[styles.balloon,{alignItems:'flex-end',backgroundColor:'#dbf5b4',elevation:1,padding:5,borderRadius:8}]}><Textstyle={{fontSize:14,color:'#000',}}>{texto.input.text}</Text><Viewstyle={{alignItems:'flex-end',alignSelf:'flex-end'}}><Textstyle={{fontSize:10,color:'#000'}}>{texto.data_iteracao}</Text></View></View></View><Viewstyle={[{alignItems:'flex-start',borderRadius:20}]}><Viewstyle={[styles.balloon,{alignItems:'flex-start',backgroundColor:'#f7f7f7',elevation:1,padding:5,borderRadius:8}]}><Textstyle={{fontSize:14,color:'#000'}}>{texto.output.text}</Text><Viewstyle={{alignItems:'flex-end',alignSelf:'flex-end'}}><Textstyle={{fontSize:10,color:'#000'}}>{texto.data_iteracao}</Text></View></View></View></View>);}render(){constds=newListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2});return(<Viewstyle={styles.container}><ListViewenableEmptySectionsdataSource={ds.cloneWithRows(this.state.conversationHistory)}renderRow={this.renderRow}renderScrollComponent={props=><ScrollView{...props}/>}onEndReachedThreshold={10}ref={ref=>this.listView=ref}onContentSizeChange={(contentWidth,contentHeight)=>{this.listView.scrollToEnd({animated:false});}}/><Viewstyle={styles.footer}><Viewstyle={styles.inputContainer}><TextInputstyle={styles.inputs}placeholder="digite a mensagem..."
              underlineColorAndroid='transparent'
              value={this.state.mensagem}
              onChangeText={(mensagem) => this.setState({ mensagem })} />
          </View>

          <TouchableOpacity style={styles.btnSend} onPress={() => this.sendMessage(this.state.mensagem)}>
            <Image source={Imagens.send} style={styles.iconSend} />
          </TouchableOpacity>
        </View>
      </View>

    );
  }

}

export default connect()(Chat);

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  list: {
    paddingHorizontal: 17,
  },
  footer: {
    flexDirection: 'row',
    height: 60,
    backgroundColor: '#eeeeee',
    paddingHorizontal: 10,
    padding: 5,
  },
  btnSend: {
    backgroundColor: '#00BFFF',
    width: 40,
    height: 40,
    borderRadius: 360,
    alignItems: 'center',
    justifyContent: 'center',
  },
  iconSend: {
    width: 30,
    height: 30,
    alignSelf: 'center',
  },
  inputContainer: {
    borderBottomColor: '#F5FCFF',
    backgroundColor: '#FFFFFF',
    borderRadius: 30,
    borderBottomWidth: 1,
    height: 40,
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    marginRight: 10,
  },
  inputs: {
    height: 40,
    marginLeft: 16,
    borderBottomColor: '#FFFFFF',
    flex: 1,
  },
  balloon: {
    maxWidth: 250,
    padding: 15,
    borderRadius: 20,
  },
  itemIn: {
    alignSelf: 'flex-start'
  },
  itemOut: {
    alignSelf: 'flex-end'
  },
  time: {
    alignSelf: 'flex-end',
    margin: 15,
    fontSize: 12,
    color: '#808080'
  },
  item: {
    backgroundColor: '#eeeeee',
    borderRadius: 300,
    marginHorizontal: 8,
    marginTop: 5
  },
});