I have the following code:
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, TextInput } from 'react-native-paper';
export default class Header extends Component {
state = {
text: '',
};
render() {
return (
<View style={styles.container}>
<TextInput value={this.state.text} style={styles.input} />
<Button mode="contained" style={styles.button}>Add Todo</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: '#c1deff',
},
input: {
flex: 1,
},
button: {
flex: 0,
},
});
which outputs the following screen:
My goal is to reduce the height for the TextInput
. It also looks like it has some vertical padding. Is it possible to decrease that as well? I'm just trying to save space on the screen and in my opinion is taking lot of it area.
EDIT 01
I tried with the following style:
input: {
flex: 1,
height: 40,
borderColor: 'gray',
borderWidth: 1,
}
but didn't work, because I got the following result:
which as you can see, doesn't look good (obvious).
Thanks!
add height
and justifyContent
in style
input: {
flex: 1,
height: 40,
justifyContent:"center"
}
You can set height for it if you want:
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1, justifyContent:"center"}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
Source: https://facebook.github.io/react-native/docs/textinput
Also try searching in Github for some custom inputtext. They may have what you need. Good luck!
To adjust the height add the style height: 40
and to adjust vertical padding add the style paddingHorizontal: 0
Your tag should then look like the following:
<TextInput value={"Something"} style={{ flex: 1, height: 40, paddingHorizontal: 0}} />
use margin
with negative value like
contentStyle={{ marginHorizontal: -10, marginVertical: -2 }}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.