React native KeyboardAvoidingView and ScrollView won't marginTop auto

so I have this layout. I backgrounded in blue the scrollview so I could see how big it is in terms of height.

my goal is to put this button at the end of the page. when the keyboard lifts up, it overlaps the button so it will be under the keyboard.

This is the screen code:

<SafeAreaView style={styles.root}>
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior='padding'
        keyboardVerticalOffset={-200}>
        <ScrollView style={{ backgroundColor: 'blue', flex: 1 }}>
          <Header title='AVS¨ANDARE' goBack={() => props.navigation.goBack()} />
          <BgImage path={require('../../../assets/images/phone-city.png')} />
          <View style={styles.container}>
            <Text style={styles.title}>Från</Text>
            <TextInput
              ref={inputRef}
              placeholder='dit namn'
              autoCorrect={false}
              onSubmitEditing={() =>
                props.navigation.navigate('Person Selected')
              }
              returnKeyType='next'
              style={styles.textInput}
              placeholderTextColor={placeholderTextColor}
            />
            <Text style={styles.paragraph}>
              Skriv in vem du är så mormor vet vem träningsprogrammet kommer
              ifrån.
            </Text>
          </View>
          <NavButton
            style={styles.button}
            title='Nästa'
            onPress={() => props.navigation.navigate('Capture Image')}
          />
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>

this is the screen styles:

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: colors.blue
  },
  container: {
    marginHorizontal: 20
  },
  title: {
    color: colors.white,
    fontSize: wp('15%')
  },
  textInput: {
    color: colors.white,
    fontSize: wp('15%'),
    lineHeight: 60,
    opacity: 0.5
  },
  paragraph: {
    color: colors.white,
    fontSize: wp('6%')
  },
  button: {
    marginHorizontal: 20,
    marginBottom: hp('6%'),
    alignSelf: 'flex-end'
  }
});

these are the navButton code:

<View style={[styles.navButtonContainer, props.containerStyle]}>
      <TouchableOpacity
        style={[
          styles.navButton,
          props.style,
          { backgroundColor: dynamicBackgroundColor }
        ]}
        onPress={props.onPress}>
        <Text style={[styles.title, { color: dynamicColor }]}>
          {props.title}
        </Text>
        {DynamicIcon}
      </TouchableOpacity>
    </View>

this are the navbutton styles:

const styles = StyleSheet.create({
  navButtonContainer: {
    marginTop: 'auto'
  },
  navButton: {
    backgroundColor: colors.blue,
    marginLeft: 'auto',
    width: wp('45%'),
    height: wp('13%'),
    flexDirection: 'row',
    justifyContent: 'space-between',
    borderRadius: 500,
    paddingHorizontal: wp('5%'),
    alignItems: 'center'
  },
  title: {
    color: colors.white,
    fontSize: wp('6%')
  }
});

so, well. Why marginTop: 'auto' doesn't work and how can I put the button underneath the keyboard at the very bottom of the screen?

regards.