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 ;)
Related
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>
I have an Input from react native elements which looks like this
<Input
placeholderTextColor={constants.inputPlaceholderFontColor}
inputContainerStyle={{marginTop: 30, borderBottomColor: constants.dimmedFontColor}}
placeholder='Spieleranzahl'
keyboardType='numeric'
leftIconContainerStyle={{marginRight: 10, marginBottom: 8}}
leftIcon={
<Icon
name='user'
size={ 24 }
color= {constants.iconColor}/>
}
onChangeText={input => this.setState({numberOfPlayers: input})}
I tried to set the color by
style={{color: 'white'}}
inputStyle={{color: 'white'}}
inputContainerStyle={{color: 'white'}}
The documentation says: "This component inherits all native TextInput props that come with a standard React Native TextInput element, along with the following..." so I dont understand why the style property doesn't work because it works with the standard TextInput component.
Also, the documentation says about inputStyle: "style that will be passed to the style props of the React Native TextInput" so that should also work because this is the way to set color on the standard Text component.
Am I missing something?
I've created an example on snack.expo and inputStyle works perfectly on both iOS and Android. Most probably there is another issue, that's why I would recommend to reimplement my simple example and see if it works.
Update: Maybe only your placeholdertext is shown. I can't see the place in your code, where you pass the value prop to your input.
Demo:
https://snack.expo.io/Yunjp2ozw
Output:
Code:
export default function App() {
const [text, setText] = React.useState('Test');
return (
<View style={styles.container}>
<Input
value={text}
onChangeText={(text) => setText(text)}
inputStyle={{'color': 'red'}}
/>
</View>
);
}
How can I change the following button's font size? Using the style attribute with fontSize doesn't work.
<Button
style={{fontSize: 32}}
uppercase={false}
mode="contained">
Some text
</Button>
The React Native Button is very limited in what you can do, see; https://facebook.github.io/react-native/docs/button
It does not have a style prop, and you don't set fontSize.
If you want to have more control over the appearance you should use one of the TouchableXXXX' components like TouchableOpacity They are really easy to use :-)
I have make a button for you . hope it will useful for you
<TouchableOpacity style={{height:50,backgroundColor:"skyblue",alignItems:'center',justifyContent:'center'}}>
<Text style={{fontSize:32,}}>Some Text</Text>
</TouchableOpacity>
I use the Text component inside TouchableXXX for every button, it's more flexible and works fine, you can also try to make you own button component and passing props that you want to control (fontsize, colors ...):
<TouchableHighlight onPress={handelPress} style={styles.buttonStyle}>
<Text style={styles.buttonTextStyle}>Click here</Text>
</TouchableHighlight>
If you are using 'react-native-elements' button, use titleStyle to set font size.
import {Input, Button} from 'react-native-elements';
<Button
titleStyle={{
color: "white",
fontSize: 16,
}}
buttonStyle={{
backgroundColor: "white",
borderRadius: 60,
flex: 1,
}}
title="Click here"
/>
For React-native Button, you can use use TouchableOpacity.
<TouchableOpacity style={{height:50}}>
<Text style={{fontSize:36}}>Click here</Text>
</TouchableOpacity>
In the Button docs from React-Native here it shows an image which says: Fit to text layout. That is what I am searching for because my button always has full width, but I want it to only be as wide as the text is. But neither in the docs nor in the button code here I can find something related to that a prop or how can it achieve. Somebody has an idea how to get it?
I suggest making your own button with TouchableOpacity and Text.
For example this is my component I often use :
export default class RoundedButton extends React.Component<Props>{
render(){
const defStyles : StyleProp<ViewStyle> = [style.button, {
backgroundColor: this.props.backgroundColor,
}, this.props.style];
if(this.props.shadow)
defStyles.push(style.shadow);
return(
<TouchableOpacity
disabled={!this.props.onPress}
onPress={() => {
if(this.props.onPress)
this.props.onPress();
}}
style={defStyles}
>
<Text style={{
color: this.props.textColor,
fontFamily: fonts.bold,
fontSize: 16
}}>{this.props.centerText}</Text>
</TouchableOpacity>
);
}
}
You can found the full gist here if you want : https://gist.github.com/Sangrene/176c1b87ad5b355e26b5c6aa80b96eae.
You can pass the prop adjustsFontSizeToFit={true} in your Text component.
If you add a fontSize in the styles of the Text, it will override this prop and won't work.
Example
<View style={{widht: 100, height: 60}}>
<Text adjustsFontSizeToFit={true}>
Your Text Here
</Text>
</View>
It seems like such a simple thing, I don't see how I'm not getting this right, but placeholderTextColor on a ReactNative TextInput isn't doing anything for me.
http://facebook.github.io/react-native/docs/textinput.html#placeholdertextcolor
<TextInput
style={styles.input}
placeholder="Foobar"
placeholderTextColor="#FFFFFF"/>
does nothing....
This works -
<TextInput
placeholder="Enter password"
placeholderTextColor="white"
/>
Hope it helps! Cheers!
<TextInput
value={this.state.environment}
onChangeText={(environment) => this.setState({ environment })}
placeholder={'Environment'}
placeholderTextColor="#202020"
secureTextEntry={true}
style={styles.input}
underlineColorAndroid='rgba(0,0,0,0)'
/>
I did this and it works quite well:
// use standard input
import { TextInput } from 'react-native';
<TextInput
style={[styles.searchInput, { opacity: this.state.location.length ? 1 : 0.6 }]}
placeholder="Location"
placeholderTextColor={colors.lighterGrey}
onChangeText={location => this.setState({ location })}
value={this.state.location}
/>
const styles = StyleSheet.create({
searchInput: {
flex: 1,
lineHeight: 22,
fontSize: 17,
fontFamily: fonts.secondary.regular,
color: colors.white,
padding: 5,
},
});
I was having issues getting the opacity to work, so I found the above solution worked well as a minimal markup solution:
style={[styles.searchInput, { opacity: this.state.location.length ? 1 : 0.6 }]}
The style prop can accept an Array of style Objects which has right to left precedence, so you can override default styles with state-based addons. I might also say it is related to CSS specificity.
In my case, I was having trouble modulating the text colours between the placeholder text and 'filled-in text. The opacity of styles.searchInput was affecting the <TextInput placeholderTextColor=""> prop.
My solution here handles the opacity concern on both iOS and Android and demonstrates a pretty normal <TextInput> setup.
In the context of my example code above, a person can always examine this.state.location.length to see if the field is empty or not.
If so, use TextInput's style prop with computed props (same as in Vue.js). You could drop a function in there, like:
style={[styles.textInput, calculatedStyles()]}
Don't forget you can spread in Objects also:
style={[...inputStyles, ...errorStyles]}
As Asanka Sampath shows in another answer, depending on your design, underlineColorAndroid can be a very useful TextInput prop.
placeholder: "Enter password",
placeholderTextColor: "white"
try this in Latest Version in React Native
Simple and easy solution
<TextInput
style={styles.textInputStyle} //if you want give style to the TextInput
placeholder="Email"
placeholderTextColor="steelblue"
/>