Change TextInput Style on Focus React Native Paper

Question

First of all, I've researched through other posts and find many solutions but nothing work in React Native Paper ?

I need change TextInput Style on Focus in React Native Paper

Auriga

You can add extra style on hover event to the selected textarea – Alleyne

Answer 1

const { isActive } = this.state;
const customStyle = isActive ? styles.customText : {};


<TextInput
    label='Email'
    value={this.state.text}
    style={customStyle}
    onFocus={() => this.setState({ isActive: true, })}
    onBlur={() => this.setState({ isActive: false, })}
    onChangeText={text => this.setState({ text })}
/>

Kuhn

Answer 2

You can use the onBlur and onFocus that come with TextInput from react-native-paper the methods to change the styling. Example: to be placed in the render method

const { isActive } = this.state;
const customStyle = isActive ? styles.customText : {};

the component as placed in the return function

<TextInput
    label='Email'
    value={this.state.text}
    style={customStyle}
    onFocus={() => this.setState({ isActive: true, })}
    onBlur={() => this.setState({ isActive: false, })}
    onChangeText={text => this.setState({ text })}
/>

Taco

Answer 3

You can add extra style on hover event to the selected textarea and remove that style onBlur, This can be achieved by using state value check as given below

class Myclass extends Component {
constructor(props) {
    super(props);
    this.state = {
      focus : false,
      name  : ''
    }
}

render() {    
    return (

            <TextInput 
                style={[styles.mText,this.state.focus? styles.textFocus : null]}
                placeholder=""
                onChangeText={(value) => this.setState({ name:value })}
                value={this.state.name}
                onFocus={()=>{this.setState({focus:true})}}
                onBlur={()=>{this.setState({focus:false})}}
            />

    );
}

}

Style for textinput is given below

const styles = StyleSheet.create({

  mText:{
    backgroundColor: '#fff',
    padding:5,
    height:40,
    width:300,
    borderColor:"#333",
    borderStyle:"solid",
    borderWidth:1,
  },

  textFocus:{
    backgroundColor: '#eee',
    borderColor:"#5d05d5",
  },

});

Alleyne

Answer 4

just add theme in the TextInput tag

<TextInput theme={{ colors: { primary: "color of your wish" } }} />

Scampi

Answer 5

Bro You can use activeOutlineColor="" it'll change your outline text color as well as your outline(border). If you want to set outline color diffrent than you can use outlineStyle={borderWidth: 1, borderColor: ""} whatever you want.

Misguided

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Compression