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

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 })}
/>

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 })}
/>

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",
  },

});

Answer 4

只需在 TextInput 标签中添加主题

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