Method render

lib/Hideo.js:48–107

()

  };

  render() {
    const {
      iconClass,
      iconColor,
      iconSize,
      iconName,
      iconBackgroundColor,
      style: containerStyle,
      inputStyle,
      height: inputHeight,
    } = this.props;
    const {
      focusedAnim,
      value,
    } = this.state;
    const AnimatedIcon = Animated.createAnimatedComponent(iconClass);

    return (
      <View
        style={[styles.container, containerStyle]}
        onLayout={this._onLayout}
      >
        <TouchableWithoutFeedback onPress={this.focus}>
          <Animated.View
            style={{
              backgroundColor: iconBackgroundColor,
              justifyContent: 'center',
              alignItems: 'center',
              height: inputHeight,
              width: focusedAnim.interpolate({
                inputRange: [0, 1],
                outputRange: [60, 40],
              }),
            }}
          >
            <AnimatedIcon
              name={iconName}
              color={iconColor}
              style={{
                fontSize: focusedAnim.interpolate({
                  inputRange: [0, 1],
                  outputRange: [iconSize, iconSize * 0.6],
                }),
              }}
            />
          </Animated.View>
        </TouchableWithoutFeedback>
        <TextInput
          ref={this.input}
          {...this.props}
          style={[styles.textInput, inputStyle]}
          value={value}
          onBlur={this._onBlur}
          onChange={this._onChange}
          onFocus={this._onFocus}
          underlineColorAndroid={'transparent'}
        />
      </View>