CODEWITHSUNDEEP
react-native
Vishali
Vishali

Reputation: 1397

How to create outlined (focused) TextInput in React Native?

Here is my code:

 <View style={styles.inputView} >
          <TextInput  
            style={styles.TextInputStyleClass}
            placeholder="Email" 
            placeholderTextColor="#003f5c"
            onChangeText={text => this.setState({email:text})}/>
        </View>

Here is textinput style

TextInputStyleClass:{
textAlign: 'auto',
height: 50,
borderWidth: 1,
borderColor: '#c2c2c2',
borderRadius: 5 ,
backgroundColor : "#ffffff"
}

I am new to React Native application development and I am trying to textinput outlined focus. But the textinput is not focused with the code which I wrote above. Also I have tried with textinput mode but nothing helped me.

How can I create textInput outlined focus?

Upvotes: 0

Views: 1682

Answers (2)

ali ali
ali ali

Reputation: 1

you should add the mode='outlined'

<View style={styles.inputView} >
  <TextInput  
    style={styles.TextInputStyleClass}
    placeholder="Email" 
    mode='outlined'
    placeholderTextColor="#003f5c"
    onChangeText={text => this.setState({email:text})}
  />
</View>

Upvotes: -1

Or Azoulay
Or Azoulay

Reputation: 219

try to use component state.

class textInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isFocus: false };
  }
  render() {
    return (
      <TextInput
        onBlur={() => {
          this.setState({ isFocus: false });
        }}
        onFocus={() => {
          this.setState({ isFocus: true });
        }}
        style={this.isFocus ? { borderColor: 'red' } : { borderColor: 'green' }}
      />
    );
  }
}

Upvotes: 1

Related Questions