Lỗi khi không đẩy hết layout lên phía trên để chứa chỗ cho bàn phím?

[Jobs_Pham]

Chào mọi người, em đang làm một screen chat trong đó có ô chứa các đoạn chat và ô chưa textinput nhập chat như sau

<KeyboardAvoidingView style={{ flex: 1 }} behavior='padding' enabled>
<View style={styles.main}>
          <View style={styles.content}>
            <ScrollView>
              <Text>Hello World </Text>
            </ScrollView>
          </View>
          <View style={styles.bottom}>
            <View style={{ height: '60%' }}>
              <TextInput
                onChangeText={message => this.setState({ message })}
                placeholder='Message here @'
                style={{ padding: 10, fontSize: 20 }}
              />
            </View>
            <View style={{
              height: '40%',
              position: 'relative',
              flexDirection: 'row',
              width: '100%',
              flex: 2
            }}>
              <View style={{ flex: 1 }}></View>
              <TouchableHighlight
                onPress={() => console.log('Sending image')}
                underlayColor='transparent'
                style={{ paddingRight: 10 }}>
                <Icon
                  type='Feather'
                  name='image'
                  color='gray' />
              </TouchableHighlight>
              <TouchableHighlight
                onPress={this.sendMessage.bind(this)}
                underlayColor='transparent'
                style={{ paddingRight: 10, alignItems: 'flex-end' }}>
                <Icon
                  type='Feather'
                  name='send'
                  color='#000' />
              </TouchableHighlight>
            </View>
          </View>
        </View>
      </KeyboardAvoidingView >

Nhưng khi chạy thì nó không đẩy hết layout lên trên. cái bàn phím nó che đi cái textinput ở phía dưới ạ.!
Mong mọi người giúp đỡ cho ạ !

[hungaya (Hung)]

Thay ScrollView thành View thử.

Với lại tô màu (background color) từng view con coi nó đổi thế nào.