How to align button at bottom of screen in react native?
13,003
Solution 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.
Solution 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,
},
};
Related videos on Youtube
Author by
fun joker
Updated on June 04, 2022Comments
-
fun joker almost 2 years
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: