BorderedInput, with Material design style focus animation. Preview: https://i.imgur.com/Fek7rXF.gif

BorderedInput.js

// note there may be a better way to abuse flexbox than this :)

var React = require('react-native')
var { View, TextInput } = React

var BorderedInput = React.createClass({

  getInitialState() {
    return { i: 0 }
  },

  getDefaultProps() {
    return {
      mutedColor: '#dddddd',
      focusedColor: 'blue',
    }
  },

  render() {
    var a = 10 / Math.pow(2, this.state.i), b = .01;

    return (
      <View style={this.props.style}>
        <TextInput
          {...this.props}
          onFocus={this.onFocus}
          onBlur={this.onBlur}
          style={[ this.props.inputStyle, { flex: 1 }]}
        />
        <View style={{ flexDirection: 'row', height: 1 }}>
          <View style={{ flex: a, backgroundColor: this.props.mutedColor }}></View>
          <View style={{ flex: b, backgroundColor: this.props.focusedColor }}></View>
          <View style={{ flex: a, backgroundColor: this.props.mutedColor }}></View>
        </View>
      </View>
    )
  },

  onFocus() {
    this.animateIn()
    this.props.onFocus && this.props.onFocus()
  },
  
  onBlur() {
    this.animateOut()
    this.props.onBlur && this.props.onBlur()
  },

  animateIn() {
    requestAnimationFrame(() => {
      this.setState({ i: this.state.i + 1 })
      if (this.state.i < 20) this.animateIn()
    })
  },

  animateOut() {
    requestAnimationFrame(() => {
      this.setState({ i: this.state.i - 1 })
      if (this.state.i > 0) this.animateOut()
    })
  },

})


module.exports = BorderedInput

usage.js

render() {
  <BorderedInput
    value="[email protected]"
    style={{ height: 40 }}
    inputStyle={{ fontSize: 15 }}
    mutedColor="#cccccc"
    focusedColor="#4970f2"
  />
}

I am unable to get this work. Can you provide your sample project?