I am using the FAB component from the react native paper library. I want to align the button at the bottom, but it is overlapping with a text field. How can I position it below the text field? Please refer to the screenshot below:
Here is the code snippet:
//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>
// Add more input elements 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 styling for the FAB component:
fab: {
position: 'absolute',
margin: 16,
right: 0,
bottom: -20,
},
Screenshot illustrating the issue: