React Native - How to make KeyboardAvoidingView inside a ScrollView work for all devices?

I am building a chat UI in react native and am having an issue with using KeyboardAvoidingView inside of a ScrollView. When selecting the TextInput the height between the input field and keyboard seems to vary based on the device I am using. How do I standardize this so that it works equally for all devices?

import React from 'react'
import { StyleSheet, View, Text, TextInput, ScrollView, KeyboardAvoidingView, Platform } from 'react-native'
import Message from './message'


export default class Messages extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    headerTitle: 'Messages',
    headerStyle: {
      backgroundColor: 'rgb(0,0,0)',
    },
    headerTitleStyle: {
      fontSize: 20,
      color: 'rgb(255,255,255)'
    },
    headerTintColor: 'rgb(0,122,255)',
  })

  state = {
    messages: [
      {
        message: 'yeah its not working',
        userId: 1,
        userName: 'Client'
      },
      {
        message: 'what isnt working...',
        userId: 2,
        userName: 'Sean'
      },
      {
        message: 'it, all of it',
        userId: 1,
        userName: 'Client'
      },
      {
        message: 'were on it',
        userId: 3,
        userName: 'Matt'
      },
      {
        message: 'fjdklsajfklsdjafkdjslkafjkdsjal;fdks;lajfdklsjldjskfja;sfjasdfjasdjlkfaj',
        userId: 3,
        userName: 'Matt'
      },
      {
        message: 'great!',
        userId: 1,
        userName: 'Client'
      },
      {
        message: 'blah',
        userId: 1,
        userName: 'Client'
      },
      {
        message: 'derp',
        userId: 2,
        userName: 'Sean'
      },
      {
        message: 'merh!',
        userId: 2,
        userName: 'Sean'
      },
       {
        message: 'help pls',
        userId: 2,
        userName: 'Sean'
      },
    ]
  }

  renderMessages = (messages) => {
    return messages.map((data, i) => <Message data={data} key={i}/>)
  } 

  render() {
    return (
      <ScrollView 
        style={styles.container}
        ref={ref => this.scrollView = ref}
        onContentSizeChange={(contentWidth, contentHeight)=> {this.scrollView.scrollToEnd({animated: true})}}
      >
        <KeyboardAvoidingView
          behavior={Platform.OS == 'ios' ? "position" : null}
        >
          <View>
              {this.renderMessages(this.state.messages)}
              <View style={styles.textBox}>
                <TextInput 
                  style={styles.textInput}
                  placeholder='Reply...'
                  placeholderTextColor={'rgb(216,216,216)'}
                  returnKeyType='done'
                  autoCapitalize='none'
                  selectionColor='#3490dc'
                  multiline={true}
                  blurOnSubmit={true}
                />
              </View>  
          </View>
        </KeyboardAvoidingView>
      </ScrollView>
      )
  }
}



const styles = StyleSheet.create({
    container: {
        //flex: 1,
        backgroundColor: 'rgb(0,0,0)'
    },
    textInput: {
        color: 'rgb(255,255,255)',
        fontSize: 18,
    },
    textBox: {
      borderColor: '#242F39',
      borderWidth: 2,
      borderRadius: 2, 
      padding: 10,
      paddingLeft: 16,
      marginTop: 10,
      backgroundColor: '#0A151F'
    }
})