CODEWITHSUNDEEP
react-native
bschandramohan
bschandramohan

Reputation: 2006

Change underlineColorAndroid on Focus for TextInput in react-native

Similar to Focus style for TextInput in react-native, I am trying to change the property underlineColorAndroid for the textInput.

I am using React-Native 0.28.0

OnFocus, the attribute doesn't change. How do I change the underline to a different color onFocus?

My sample code is below: 

'use strict';

import React, { Component } from 'react';

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  ScrollView
} from 'react-native';

class RNPlayground extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasFocus: false
    }
  }

  _onBlur() {
    this.setState({hasFocus: false});
    }

  _onFocus() {
    this.setState({hasFocus: true});
    }

  _getULColor(hasFocus) {
    console.error(hasFocus);
    return (hasFocus === true) ? 'pink' : 'violet';
  }

  render() {
    console.error("this.state=");
    console.error(this.state);
    console.error("this.state.hasFocus=");
    console.error(this.state.hasFocus);

    return (
      <View style={styles.container}>
        <ScrollView>
          <TextInput
            placeholder="textInput"
            onBlur={ () => this._onBlur() }
            onFocus={ () => this._onFocus() }
            style={styles.instructions}
            underlineColorAndroid={this._getULColor(this.state.hasFocus)}/>
                </ScrollView>
        <TextInput>Some sample text</TextInput>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 28,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    fontSize: 19,
    marginBottom: 5,
  }

});

AppRegistry.registerComponent('RNPlayground', () => RNPlayground);

Upvotes: 4

Views: 2197

Answers (1)

Slowyn
Slowyn

Reputation: 8843

Well, your code is correct and it should work properly. Here is working example

Please, stop downvote this answer. Unfortunately rnplay service isn’t available anymore, as like this example. Or downvote but explain your point.

Upvotes: 0

Related Questions