How to align button at bottom of screen in react native? - html

Question

I am using FAB ( https://callstack.github.io/react-native-paper/fab.html#icon ) from react native paper library. I want to align button at bottom but it is overlapping with textInput field how can I place it below that textInput ? See screenshot below.
code:
//Inside return
<ScrollView>
<Text style={styles.title}>Add a Lead</Text>
<View style={styles.inputContainer}>
<Image source={require('../../assets/images/name.png')} style={{
marginTop: 15, width: 32, height: 32, resizeMode: 'contain'}}/>
<TextInput
placeholder='Name'
value={this.state.name}
style={styles.input}
onChangeText={ name => this.setState({name})}
error={this.state.nameError}
/>
</View>
<HelperText type="error" visible={this.state.emailError}>
{this.state.emailError}
</HelperText>
Similarly other items for phone email etc....
<View style={{marginTop: 20, flex: 1, flexDirection: 'row'}}>
<Image source={require('../../assets/images/comment.png')} style={{
marginTop: 20, width: 32, height: 32, resizeMode: 'contain'}}/>
<Text style={{marginTop: 25, marginLeft: 15}}>Comment</Text>
</View>
<View>
<TextInput
style={{height: 65, marginTop: 15, borderColor: 'gray', borderWidth: 1}}
onChangeText={(comment) => this.setState({comment})}
value={this.state.comment}
error={this.state.commentError}
multiline = {true}
numberOfLines = {4}
/>
</View>
<FAB
style={styles.fab}
small
icon="arrow_forward"
onPress={this.handleCreateNewLead}
/>
</ScrollView>
css:
fab: {
position: 'absolute',
margin: 16,
right: 0,
bottom: -20,
},
Screenshot:
What it is currently looking like:

Answer 1

For textarea (which you placed the ? icon) added position:relative.
<TextInput style={{height: 65, marginTop: 15, borderColor: 'gray', borderWidth: 1, position: relative}}
and change following style for fab component
fab: {
position: 'absolute',
margin: 16,
right: 10,
bottom: 10,
}
may it will works.

Answer 2

You need to wrap with View both of TextField and FAB component;
<View style={styles.container}>
<TextInput
style={styles.textField}
onChangeText={(comment) => this.setState({comment})}
value={this.state.comment}
error={this.state.commentError}
multiline={true}
numberOfLines={4}
/>
<FAB
style={styles.fab}
small
icon="arrow_forward"
onPress={this.handleCreateNewLead}
/>
</View>
and change your styles with these;
const styles={
container:{
flexDirection:"row",
alignItems:"center",
marginTop: 15
},
textField:{
flex:1,
height: 65,
borderColor: 'gray',
borderWidth: 1
},
fab: {
position:"absolute",
right:0,
},
};