Scenario: I want to achieve a situation like the code shown below. Where there will be:
A multiline TextInput with other components and the screen will be scrollable.
I don't want the TextInput to be scrollable.
Problem: What happens is, after writing a certain amount of lines in the TextInput, the texts vanishes. I can still select the text and get suggestion in the keyboard. It's like the texts and the TextInput became transperant. After the TextInput reaches the height of the phone screen, this problem occurs.
Is this a bug of React-Native? or am I doing something wrong here?
Note: I'm using "expo": "~40.0.0". Also, the code below is just to portrait the situation, not the actual code.
return (
<ScrollView>
<View style={styles.block} />
<View style={styles.block} />
<TextInput
value={content}
onChangeText={setContent}
placeholder="Start writing from here"
multiline
/>
<View style={styles.block} />
<View style={styles.block} />
</ScrollView>
);
const styles = StyleSheet.create({
block: {
height: 200,
backgroundColor: 'blue',
},
});
Try out any of following Workarounds:
Enabling scrollEnabled on the TextInput
Explicitly setting a height on the TextInput (eg. by dynamically measuring the contents)
<ScrollView scrollEnabled style={{ marginTop: 100 }}>
<TextInput multiline placeholder="type here" scrollEnabled={true} />
</ScrollView>
Related
I noticed that while adding 'View' with React native, it behaves as if "width: '100%'" was assigned even though I did not enter any style. Same situation exists for any component. It covers the whole area horizontally. What is the cause and solution?
return (
<View style={{flex:1}}>
{/* paints the line he is in full red but should only paint as much as the line of the text */}
<View style={{backgroundColor:'red'}}>
<Text>Example</Text>
</View >
</View>
);
If you want the background color to only encompass the text, you can use this:
<Text style={{backgroundColor: 'red', alignSelf: 'flex-start'}}>
Example
</Text>
in react-native when you make a TextInput multiline, the text inside the input is top aligned in IOS and center aligned in Android.
According to the doc we may use 'textAlignVertical' to align top the Text on android
But it don't work on IOS
my question is: How to vertical align center a Text in IOS multiline TextInput
Unfortunately the property textAlignVertical is for Android only. The common workaround is to put the TextInput into the center of a container with a fixed height:
<View style={{height:200, width:200, justifyContent:"center"}}>
<TextInput
multiline={true}
numberOfLines={10}
style={{textAlign:"center", width:"100%"}}
placeholder="Something useful" />
</View>
or
<View style={{height:200, width:200, justifyContent:"center", alignItems:"center"}}>
<TextInput
multiline={true}
numberOfLines={10}
placeholder="Something useful" />
</View>
will do the trick.
I have ScrollView inside that ScrollView, I have TextInputs, the scroll doesn't work in the area of TextInput. How to fix that?
render () {
return (
<View>
<ScrollView
ref='keyboardScroll'
keyboardShouldPersistTaps={true}
>
<View>
<TextInput
placeholder='First Name'
/>
</View>
<View>
<TextInput
placeholder='Last Name'
/>
</View>
<ScrollView>
</View>
)}
Here is the video with the issue.
I found the solution of that problem. The main problem was that text font size was too big for the TextInput field, which causes scroll inside the TextInput, so there are 2 solutions: 1) decrease font size 2) make the height of the TextInput field bigger. Also this solution solved another problem: Placeholders in TextInput are moving during the scroll
I had the same problem on Android, where the placeholder was scrolling just a little bit up and down and preventing the ScrollView from scrolling. I managed to fix it by adding the following styles on the TextInput:
paddingTop: 0,
paddingBottom: 0,
paddingLeft: <whatever>,
paddingRight: <whatever>
How to render a paragraph with image at right,
the screen design should be similar to the screenshot
React Native does not support text justification in the way you want. You could somewhat emulate this effect for one paragraph at a time by rendering each paragraph in its own Text component, then rendering the following for paragraphs that have accompanying images:
<View style={{flexDirection: 'row'}}>
<Text>Lorem ipsum dolor......</Text>
<Image source={require('./path/to/image.png')} />
</View>
You'll probably want to add some left padding to the image component so the text doesn't run right up against it.
Can you try:
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return(
<View style={styles.container}>
<Image source={pic} style={{width: 360, height: 110}}/>
<Text>React Application Works fine!</Text>
</View>
);
Is there any built in text area component for react-native? I have tried to implement these ones:
https://github.com/buildo/react-autosize-textarea
https://github.com/andreypopp/react-textarea-autosize
but getting an error "Expected a component class got object object".
Yes there is. It's called TextInput, the normal TextInput Component supports multiple lines.
Just assign following properties to your TextInput Component
multiline = {true}
numberOfLines = {4}
At the end you should have this:
<TextInput
multiline={true}
numberOfLines={4}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
Source https://facebook.github.io/react-native/docs/textinput
If you want to see your TextInput component like a textarea, you will need to add this
<TextInput
multiline={true}
numberOfLines={10}
style={{ height:200, textAlignVertical: 'top',}}/>
I build text areas in react-native by wrapping a TextInput component into a View the following way:
<View style={styles.textAreaContainer} >
<TextInput
style={styles.textArea}
underlineColorAndroid="transparent"
placeholder="Type something"
placeholderTextColor="grey"
numberOfLines={10}
multiline={true}
/>
</View>
...
const styles = StyleSheet.create({
textAreaContainer: {
borderColor: COLORS.grey20,
borderWidth: 1,
padding: 5
},
textArea: {
height: 150,
justifyContent: "flex-start"
}
})
I am using this component:
https://www.npmjs.com/package/react-native-autogrow-textinput
It expands automatically on-text growth. I created my own reusable component with the autogrow-textinput as part of it, which inside the component looks like that:
<AutoGrowingTextInput
minHeight={40}
maxHeight={maxHeight} // this is a flexible value that I set in my
component, where I use this reusable component, same below, unless specified the other
onChangeText={onChangeText}
placeholder={placeholder}
placeholderTextColor='#C7C7CD'
style={inputStyle}
value={value}
/>
If you are using only react-native components your option is TextInput
As "funkysoul" explained:
Just assign following properties to your TextInput Component
multiline = {true}
numberOfLines = {4}
If you want to see this component as the classic textarea (bigger than an inline text-input), you usually will need to add the height style-property. See the following example:
<TextInput
multiline={true}
numberOfLines={10}
style={{ height:200, backgroundColor:'red'}}
/>
I added the backgroundColor for a better understanding of the height role. Please don't use it on your project ;)