I'm working on react native project , I'm creating page with Text and TextInput , I want that the label's text disappear when I type in TextInput Field .
This is the code of the TextInput:
<TextInput
label="Classification"
keyboardType="default"
underlineColor="#009688"
blurOnSubmit={false}
// editable={false}
theme={{
colors: {primary: '#009688'},
}}
style={ThirdScreenStyle.Text}></TextInput>
This is the style ThirdScreenStyle.Text:
Text: {
backgroundColor: 'transparent',
marginBottom: 5,
marginLeft: 30,
width: 300,
fontSize: 11,
padding: 3,
},
I want that the label classification disappear , also I want to decrease the size of the TextInput's field.
Use onFocus props of TextInput to save in state. Use that state to selectively show or hide text/label
<Text>{focused&&"Classification"}</Text>
Where "focused" comes from state you modify from onFocus method.
There is no TextInput prop called "label", i think what you are looking for is "placeholder".
<TextInput
placeholder="Classification"
keyboardType="default"
underlineColor="#009688"
blurOnSubmit={false}
// editable={false}
theme={{
colors: {primary: '#009688'},
}}
style={ThirdScreenStyle.Text}/>
Otherwise your label should be in a seperate component and use #Yogesh's approach with onFocus.
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 want to adjust the outlined react-native-paper TextInput label color at the initial state (not onFocus). This is my OutlinedInput component:
import * as React from 'react';
import { TextInput } from 'react-native-paper';
const OutlinedInput = (props) => {
return (
<TextInput
mode='outlined'
label={props.label}
placeholder={props.placeholder}
placeholderTextColor='white'
secureTextEntry={props.secureTextEntry}
multiline={props.multiline}
keyboardType={props.keyboardType}
value={props.value}
onChangeText={(value) => props.onChangeText(value)}
style={props.style}
theme={props.theme}
/>
);
};
export default OutlinedInput;
In my Register component, I created an OutlinedInput component inside it:
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<OutlinedInput
label={'User Name'}
value={userName}
onChangeText={(userName) => setUserName(userName)}
style={{ color: 'white', backgroundColor: 'rgb(35,39,42)',
borderRadius: 5, width: '75%', height: '5%'
}}
theme={{ colors: { text: 'white', primary: 'rgb(33, 151, 186)' } }}
/>
</View>
I added this line at the top of Register component:
const [userName, setUserName] = useState('');
The screenshot of my program if I do not click the input:
This is the screenshout for clicking the input:
As you can see, the color of label User Name is black. I want to set this to white. When clicking on it, it works as expected, but the initial state of the color of the label is not what I want.
I tried to solve this problem using placeholder. I added placeholder props to the OutlinedInput and change placeholder color to white, but in this case, placeholder didn't become outlined. When I tried anything about placeholder, it didn't become outlined.
How can I adjust the label color to see it as white after opening the program?
You need to replace TextInput property:
placeholderTextColor='white'
with:
theme={{
colors: {
placeholder: 'white'
}
}}
In order to adjust label color in React Native Paper v5 you have to update this prop:
theme={{
colors: {
onSurfaceVariant: 'white'
}
}}
I don't get why they made it so unsemantic and inaccessible (it's not even in their Docs)
I'm having an issue when I try to custom my TextInput whereas the placeholder will have normal fontWeight and the textinput will be bold.
This is my code for that:
<TextInput
placeholder={'Input'}
style={{ width: '100%', fontWeight: this.state.text.length > 0 ? 'bold' : 'normal' }}
value={this.state.text}
onChangeText={(text) => {
this.setState({
text,
});
}}
/>
My issue is: Firstly, placeholder have normal fontWeight, i entered some randomly input and then delete all of it, the placeholder style is not change back to normal but still be bold.
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>
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 ;)