The default component for TextInput creates a box that goes around the bottom and up the sides, how do I change it to make it go all the way around the text field?
I may not have understood your question properly, but this will give you a textinput with a gray 1px line around
<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} onChangeText={(text) => this.setState({text})} value={this.state.text} />
Related
I have read the docs but still don't understand how to make the text input scroll to an exact position. I want the text input to automatically scroll to the very top of the screen just below my Header component. Using the following code below, could anyone provide an example of how this is done? Thanks.
<KeyboardAwareScrollView>
<TextInput
style={{
fontSize: 18,
width: "100%",
textAlignVertical: "center",
}}
autoFocus={true}
blurOnSubmit={false}
value={name}
onChangeText={(text: string) => {
setName(text);
}}
/>
</KeyboardAwareScrollView>
I am trying to change the color of disabled React-native-elements component TextInput. Default behaviour is to grey out everything but I would like to have solid black color of the text even if it's disabled. Has anybody tips of how to do it?
Same question as Don't grey out Disabled Input in React Native Elements but for TextInput component.
TextInput don't have a disabledInputStyle prop.
You can use editable. It won't grey out it.
<View style={styles.app}>
<TextInput
style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
value={"values"}
editable={false}
/>
</View>
I have a TextInput as shown below,
<TextInput
style={{borderWidth: 1, borderColor: "#dedede", width: '90%', marginTop: 20, borderRadius: 1}}
placeholder={'Tell us more about our service'}
multiline = {true}
numberOfLines = {10}
value={this.state.customerFeedback}
onChangeText={customerFeedback => this.setState({ customerFeedback })}
underlineColorAndroid="transparent"
/>
since I gave numberOfLines = {10}, if I type more than 10 lines text must be scrolled inside the TextInput area. But in my case size of the TextInput is gradually getting increased as show in below image,
If we look at TextInput there are more than 10 lines.
Can anybody let me know how to restrict TextInput area according to numberOfLines props? Thank you.
I saw your code and one thing you are missing one more property for the style is maxHeight.
I add this in your code now you can copy and paste this code in your project.
{/*maxHeight:200 */}
<TextInput
style={{borderWidth: 1, borderColor: "#dedede", width: '90%', marginTop: 20, borderRadius: 1,maxHeight:200}}
placeholder={'Tell us more about our service'}
multiline = {true}
numberOfLines = {10}
value={this.state.customerFeedback}
onChangeText={customerFeedback => this.setState({ customerFeedback })}
underlineColorAndroid="transparent"
/>
I hope this will help :)
The only thing you are missing is maxHeight property for the style in textInput , ive added maxHeight:50:
<TextInput
style={{borderWidth: 1, borderColor: "#dedede", width: '90%', marginTop: 20, borderRadius: 1,maxHeight:50}}
placeholder={'Tell us more about our service'}
multiline = {true}
numberOfLines = {10}
value={this.state.customerFeedback}
onChangeText={customerFeedback => this.setState({ customerFeedback })}
underlineColorAndroid="transparent"
/>
try once , and do check the expo snack expo-snack
Hope it helps. feel free for doubts
I'm trying to create an image with a text on it, and in order for the the text to be clearly seen I need to make the image darker.
Also (don't sure if it matters or not) I need the background image to be touchable.
This question was asked several times here and I've seen some answers, but none of them worked for me, so I'm wondering if I'm missing something more crucial here.
My code is the following:
<View style={postStyles.container}>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground></TouchableOpacity>
From looking around here, I've tried the following solutions:
Tried to wrap the text element inside the imagebackground tag inside a
View element that has a style property of "backgroundColor" with value of 'rgba(255,0,0,0.5)' (also tried different values),
Tried to add this backgroundColor property to the styles of both the container itself, the TouchableOpacity element
Tried to above two solutions with the "elevation" property instead of backgroundColor (I work in Android).
None of the above solutions worked, in a sense that the background image didn't change at all, so I'm wondering if I'm missing something more crucial.
Thanks!
If anyone still having problems with the ImageBackground component, this is how i solved it, basically i set a view inside the image background which has the backgroundColor that darkens the image.
<ImageBackground
source={Images.background}
style={styles.imageBackground}
>
<View style={styles.innerContainer}>
{content}
</View>
</ImageBackground>
const styles = StyleSheet.create({
imageBackground: {
height: '100%',
width: '100%'
},
innerContainer: {
flex: 1,
backgroundColor: 'rgba(0,0,0, 0.60)'
},
});
if you want to make the image darker, you'll need the Image component and use the tintColor prop like:
<Image source={require('./your_image.png')} style={{ tintColor: 'cyan' }}>
this tintColor prop only works for Image component not ImageBackground, also if you want to add a text on the Image component, you'll need to positioning that text with position: 'absolute' or 'relative'
<View style={postStyles.container}>
<TouchableOpacity
onPress={() => his.props.navigation.navigate('AnotherWindow')}>}
>
<Image
source={require('./my_image.png')}
resizeMode="contain"
style={{ width: '100%', height: 150, tintColor: 'cyan' }}
/>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</TouchableOpacity>
</View>
Also, if you implement this approach you'll need to calculate the dimensions of the screen for each device, well you'll need to check this other component from react-native: https://facebook.github.io/react-native/docs/dimensions
Please, let me know if this works :D
You should just add tintColor to ImageBackground imageStyle and you're done. easy peasy!
<TouchableOpacity onPress={() => this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}
imageStyle={{tintColor: 'rgba(255,0,0,0.5)'}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground>
</TouchableOpacity>
It's basically the search bar component from react-native-elements where the container background color is white and the placeholder field has a border with radius.
Not sure if react-native-element allows providing style to placeholder.
Any other way i could use style along with react-native-elements search bar component to get this result?
You need to modify the input and container styles
<SearchBar
inputStyle={{backgroundColor: 'white'}}
containerStyle={{backgroundColor: 'white', borderWidth: 1, borderRadius: 5}}
placeholderTextColor={'#g5g5g5'}
placeholder={'Pritish Vaidya'}
/>
Check the docs for more props and you can supply your own Icon
I made a combination of the answers here
<SearchBar
inputStyle={{backgroundColor: 'white'}}
containerStyle={{backgroundColor: 'white', borderWidth: 1, borderRadius: 5}}
inputContainerStyle={{backgroundColor: 'white'}}
placeholderTextColor={'#g5g5g5'}
placeholder={'Pritish Vaidya'}
/>