I have a TextInput whith multiline={true}. I want to know how to get its placeholder text like:
Hey There!
Want any Help?
Placeholder To The Rescue!
I tried some like placeholder='Hey There!\nWant any Help?' but didn't get what i wanted.
I'm sort of new to React Native. Helps would be greatly appreciated!
Found An Answer! Using braces made it render what I wanted. I figured out that React Native renders strings here as it is, but with the formatting given, if inside braces. For eg:
<TextInput
multiline={true}
placeholder='Hey There!\nHow are You?'
/>
With the above code rendered, the TextInput will look like:
HeyThere!\nHow are You?
But if you use braces like this:
<TextInput
multiline={true}
placeholder={'Hey There!\nHow are You?'}
/>
Then You will get the TextInput like:
Hey There!
How are You?
And That's Exactly what I wanted!
Well, Thank You Folks for Replying!
<TextInput
multiline={true}
placeholder={'Hey There! \nWant any Help? \nPlaceholder To The Rescue!'}
style={{height: 40, borderColor: 'gray', borderWidth: 1,fontSize:12}}
/>
try to use textarea html tag.That allow you to do multiline placeholder.
Related
I am new to React Native and wanted to create a text with border. Therefore I checked the docs at https://facebook.github.io/react-native/docs/text - the word "border" appears exactly zero times. However, border is available on Text and this works fine:
<Text style={{fontSize: 30, borderWidth: 1, borderColor: 'red'}}>Hello, world!</Text>
But where is this documented? Did I look at the wrong place? Thanks!
It is included under the style prop, there is a link to the inherited View Style Props that include the border details that you are after.
I want to add something like a Hint, on the textInput, as in java using android studio, in react native is it possible to do this? I know you have the option to add a Value, defaultValue and the placeholder, but they don't work like hint.
Tanks!
You can use placeholder props
<TextInput
placeholder="Input email"
/>
Yes it is possible, it's called placeholder, Here is an example from docs.:
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
The only thing you need to do is to add a the placeholder prop.
<TextInput
...//otherprops
placeholder="enter your hint here"
/>
I highly suggest you to read more about TextInput in React Native docs here
I want to remove the underline of a TextInput of my react-native application. I tried with borderBottomWidth but it did not work. How can I achieve this on Android and IOS.
Its really simple
In iOS we dont have underline.
and for android just add this prop
<TextInput underlineColorAndroid={'rgba(0,0,0,0)'}> </TextInput>
<TextInput underlineColorAndroid='transparent'>
by this you can remove it.
You should set borderWidth: 0
Example:
<TextInput
style={{borderWidth: 0}}
/>
The solution I found in code inspection is on the TextInput, you could use the :
inputContainerStyle={{borderBottomWidth:0}}
I'm working on a project which has some text fields(textInput). I'm encountering an issue with the textInput fields here. While I type in the textInput field the text is having an underline which is getting even more darker when I hit space and I want to remove that underline from it.
Here is a screenshot:
This is my code:
<TextInput
style={Style.InputStyle}
multiline={true}
placeholderTextColor={'#DC1938'}
placeholder={'Name'}
spellCheck={false}
underlineColorAndroid='rgba(255,0,0,0.3)'
inlineImageLeft='userred'
inlineImagePadding={25}
padding={15}
/>
Try Following props.
spellCheck={false}
autoCorrect={false}
Please refer the following link :
disable spellcheck in react-native TextInput
Hello guys i have found the answer it was the autoCorrect prop. i disabled it and yeah it worked!
Use underlineColorAndroid props
<TextInput underlineColorAndroid='transparent'
placeholder="type here ..">
This is some text you want to render
</TextInput>
An explanation why this happens can be found here.
So this week I have started on my first pet project to get hands on learning experience with RN. So far so good I think. But now I have hit a bit of a road block, so I was hoping someone would help me out. So I have got a View of images (coming from an api). I am able to place the images in a grid view like so:
But once I place this view in a Flatlist, the whole layout gets messed up. Looks like this:
I have tried playing around with flex but to no avail. Any help would be much appreciated
Code can be found here:
UPDATED:
https://gist.github.com/anonymous/c565d8f9d7dfa65646b7a3a81bf6330f
FlatList has a numColumns attribute.
Try:
<FlatList style={styles.FlatlistStyles} data={this.state.moviesTrending}
numColumns={4}
renderItem={({item}) => this.renderMoviesTrending(item)}
keyExtractor={this._keyExtractor}
/>
and add width style={{ width: 200 }} or any appropriate width to the child element (rendered by the renderMoviesTrending function).
You have to use contentContainerStyle instead of just style and set some flex props for it to work. For example:
justifyContent: 'flex-start'
flexDirection: 'column'