5

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

Pirta Matharu
  • 267
  • 1
  • 5
  • 22

5 Answers5

6
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 })}
/>
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 })}
/>
Harvey Kadyanji
  • 515
  • 6
  • 8
1

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

});
Ajith
  • 2,476
  • 2
  • 17
  • 38
1

just add theme in the TextInput tag

<TextInput theme={{ colors: { primary: "color of your wish" } }} />
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Boban Anto
  • 31
  • 3
0

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.

Pratik
  • 1
  • 1
    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](/help/how-to-answer). – Community Apr 14 '23 at 08:17