How to keep a component from moving upwards with a growing view

Question

I'm trying to create a messenger with react native and I have one problem that I can't seem to fix. Here is how it looks so far, I have the send button (a button component from React Native Elements) next to an input that is the same view as the button, as shown here:

Here the button is placed properly next to the input. However whenever the input and the view grow because multiple lines are being typed, the button moves up with them:

How do I keep the button at all times in the same position that it was in whenever the input was only a single line?

Here is my code:

<KeyboardAvoidingView style={styles.container} 
behavior="padding"
keyboardVerticalOffset={64}>
    <View>
        <FlatList
        //...
        />
    <View 
        minHeight={45}
        style={{flexDirection:'row', backgroundColor: 'transparent' }}>
        <TextInput
            style={[styles.textInput, {fontSize:17,marginVertical: 0, width:300, marginLeft: 10}]}
            minHeight={25}
            multiline={true}
            enablesReturnKeyAutomatically={true}
            keyboardAppearance="dark"
            placeholder=""
            onChangeText={(message) => {this.setState({message})}}
            value={this.state.message}
        />
        <Button
             buttonStyle={{borderRadius: 25, bottom:-5, marginLeft: 10, paddingVertical: 5, backgroundColor: "#EAB844"}}
             icon={{name: 'arrow-up', type: 'feather', color:'white'}}
             onPress={()=>{ this.onPressButton()}} 
             title=""/> 
         </View>
    </View>
</KeyboardAvoidingView>

Answer 1

I think this would be similar to this?

In React Native, the default value of flexDirection is column (unlike in CSS, where it is row). Hence, in flexDirection: 'column' the cross-axis is horizontal and alignSelf works left/right. To pin your footer to the bottom, there are several options. Here's one: apply justifyContent: 'space-between' to the container. I've also seen things that use justifyContent: 'flex-end'.

from this question - there are other solutions there as well if that one doesn't work. Make an item stick to the bottom using flex in react-native