Changing border color when input is focused error

Issue

I'm new to react native and I'm getting ';' expected on this function and I can't figure out why.

getInitialState() {
    return { style: styles.textinput_unfocused }
}

I want to change color of the bottom border when input is focused from grey to green:

<View style={styles.inputStyle}>
  <TextInput style={styles.inputType}
     placeholder='Email'
     onBlur={ () => this.onBlur() }
     onFocus={ () => this.onFocus() }
     style={ [styles.textinput, this.state.style] }
  />
  <TextInput style={styles.inputType}
  placeholder='Password'/>
</View>

When I define those functions later in code:

getInitialState() {
    return { style: styles.textinput_unfocused }
}
onFocus() {
    this.setState({ style: styles.textinput_focused })
}

I'm getting error that tells me I've missed the ; mark. Any one knows why or have better idea to change colors in those inputs?

Solution

You can use my TextInput Component hope you will get a lots of information from my component.

// @flow

import * as React from 'react';
import { View, Text, TextInput } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

/* FLow Types
============================================================================= */
type State = {
  active: boolean,
};

type KeyboardType = 'default' | 'email-address' | 'numeric' | 'phone-pad';
type KeyboardTypeIOS =
  | 'ascii-capable'
  | 'numbers-and-punctuation'
  | 'url'
  | 'number-pad'
  | 'name-phone-pad'
  | 'decimal-pad'
  | 'twitter'
  | 'web-search';
type KeyboardTypeAndroid = 'visible-password';
type KeyboardTypeOptions = KeyboardType | KeyboardTypeAndroid | KeyboardTypeIOS;

type ReturnKeyType =
  // Cross Platform
  | 'done'
  | 'go'
  | 'next'
  | 'search'
  | 'send'
  // Android-only
  | 'none'
  | 'previous'
  // iOS-only
  | 'default'
  | 'emergency-call'
  | 'google'
  | 'join'
  | 'route'
  | 'yahoo';

type Props = {
  marginVertical?: number,
  labelSize: number,
  labelColor?: string,
  label?: ?string,
  backgroundColor?: string,
  iconName?: ?string,
  reference?: ?Function,
  placeholder?: string,
  placeholderTextColor: string,
  value?: ?string,
  onChange: Function,
  onChangeText: Function,
  onSubmitEditing?: Function,
  secureTextEntry?: boolean,
  multiline?: boolean,
  editable?: boolean,
  returnKeyType?: ReturnKeyType,
  keyboardType?: KeyboardTypeOptions,
  color: string,
};

/* =============================================================================
<InputText />
============================================================================= */
class InputText extends React.PureComponent<Props, State> {
  /**
   * Default Props
   */
  static defaultProps = {
    marginVertical: 5,
    labelColor: '#696969',
    backgroundColor: 'transparent',
    label: null,
    iconName: null,
    reference: null,
    placeholder: '',
    value: '',
    onSubmitEditing: () => {},
    secureTextEntry: false,
    multiline: false,
    editable: true,
    returnKeyType: 'default',
    keyboardType: 'default',
  };

  /**
   * State Here
   */
  state = { active: false };

  /**
   * Start render method
   */
  render() {
    const { active } = this.state;
    const {
      marginVertical,
      labelSize,
      labelColor,
      label,
      backgroundColor,
      iconName,
      reference,
      placeholder,
      placeholderTextColor,
      value,
      onChange,
      onChangeText,
      onSubmitEditing,
      secureTextEntry,
      multiline,
      editable,
      returnKeyType,
      keyboardType,
      color,
    } = this.props;
    return (
      <View style={{ marginVertical }}>
        {label ? (
          <Text style={{ fontSize: labelSize, color: labelColor }}>
            {label}
          </Text>
        ) : null}
        <View
          style={{
            backgroundColor: editable ? backgroundColor : '#DEDEDE',
            borderWidth: 1,
            borderColor: active ? '#3DBA81' : '#CECECE',
            flexDirection: 'row',
            alignItems: 'center',
          }}
        >
          {iconName ? (
            <View
              style={{
                padding: 8,
              }}
            >
              <Icon name={iconName} style={{ fontSize: 20 }} />
            </View>
          ) : null}
          <View
            style={{
              flex: 1,
              justifyContent: 'center',
              paddingHorizontal: 5,
            }}
          >
            <TextInput
              ref={reference}
              placeholder={placeholder}
              placeholderTextColor={editable ? placeholderTextColor : '#575757'}
              value={value}
              onChange={onChange}
              onChangeText={onChangeText}
              onSubmitEditing={onSubmitEditing}
              onFocus={() => this.setState({ active: true })}
              onBlur={() => this.setState({ active: false })}
              autoCorrect={false}
              secureTextEntry={secureTextEntry}
              underlineColorAndroid="transparent"
              multiline={multiline}
              editable={editable}
              returnKeyType={returnKeyType}
              keyboardType={keyboardType}
              style={{ fontSize: 17, color, paddingVertical: 8 }}
            />
          </View>
        </View>
      </View>
    );
  }
}

/* Exports
============================================================================= */
export default InputText;

NOTE: You can change the design whatever you want.

Answered By - Zeeshan Ansari