react-native-customcomponent-v2/index.js

React native custom components for normal and password inputs

import React from 'react';
import { View, TextInput, Animated, StyleSheet, Text } from 'react-native';
import { COLORS, theme } from "./constants";
// theme
const { FONTS, SIZES } = theme;

class CustomInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFocused: false,
      input: '',
      validationError: '',
      textEdited: false
    };

    this._animatedIsFocused = new Animated.Value(
      this.props.value === '' || this.props.value == null ? 0 : 1,
    );
  }
  handleFocus = () => {
    this.setState({ isFocused: true },
      () => (typeof this.props.commentFocused == "function") && this.props.commentFocused(true)
    )
  }
  handleBlur = () => {
    this.setState({ isFocused: false },
      () => (typeof this.props.commentFocused == "function") && this.props.commentFocused(false)
    )
  }
  componentDidUpdate(prev) {
    Animated.timing(this._animatedIsFocused, {
      toValue: this.state.isFocused || this.props.value !== '' ? 1 : 0,
      duration: 200,
      useNativeDriver: false, // <-- Add this
    }).start();
    if (!this.state.textEdited && this.props.value != prev.value) {
      this.validateText(this.props.value, false)
    }
  }
  componentDidMount() {
    if (this.props.onRef != null) {
      this.props.onRef(this)
    }
    if (this.props.value != "") {
      this.validateText(this.props.value, false)
    }
  }
  onSubmitEditing() {
    // alert('11')
    if (this.props.onSubmitEditing != null)
      this.props.onSubmitEditing();
  }

  focus() {
    // alert('22')
    this.textInput.focus()
  }

  onTextChanged = (text) => {
    this.validateText(text, true)
  }

  validateText = (text, updateProps) => {
    let newText = text;
    var validationError = "";

    let validate = true;
    if (this.props.ifEmptyNoPatternCheck) {
      console.log('my validation text: ' + text)
      if (text == '' || text == null)
        validate = false;
    }
    // console.log('this.props.pattern.test(text)', this.props.pattern?this.props.pattern.test(text):'')
    if (this.props.pattern && this.props.pattern != "" && !this.props.pattern.test(text)) {
      // console.log('this.props.pattern.test(text)', this.props.pattern?this.props.pattern.test(text):'')
      validationError = this.props.errorMessage
      this.setState({ validationError: validationError, })
    }
    if (updateProps) {
      this.setState({ input: newText, validationError: validationError, textEdited: true })
      this.props.onValueChanged(newText);
    }
    else {
      this.setState({ validationError: validationError })
    }
    return newText;
  }
  render() {
    const { label,bold, ...props } = this.props;
    return (
      <View style={{ paddingTop: 18, }}>
        <Animated.Text style={[styles.labelStyle,{}]}>{label}</Animated.Text>
        <TextInput
          {...props}
          style={[(this.state.isFocused ? styles.focusedTextInput : styles.textInput && this.state.validationError ? styles.focusedTextInputError : styles.textInput ), this.props.style]}
          onFocus={this.handleFocus}
          onBlur={() => {
            if (this.props.value != 'null' && this.props.value != null && this.props.value != '')
              this.onTextChanged(this.props.value.trim())
            this.handleBlur();
          }}
          blurOnSubmit
          onChangeText={this.onTextChanged}
          value={(this.props.value != 'null') ? this.props.value : ''}
          returnKeyType={this.props.returnKeyType}
          autoFocus={this.props.autoFocus}
          onSubmitEditing={({ nativeEvent }) => {
            this.onTextChanged(nativeEvent.text.trim())
            this.onSubmitEditing.bind(this)
          }}
          multiline = {this.props.multiline}
          ref={input => this.textInput = input}
          autoCapitalize='words'
          maxLength={this.props.maxLength}
          secureTextEntry={this.props.hidePassword}
          contextMenuHidden={this.props.contextMenuHidden}
        />
        {this.props.requiredEndText ?
          <Text style={{ color: '#9c9ea0', fontSize: 18, alignSelf: 'flex-end', marginTop: -30 }}>{this.props.endText}</Text>
          : null
        }
        {this.state.validationError != '' ?
          <Text style={styles.inlineError}>{this.state.validationError}</Text>
          :
          null}
      </View>
    );
  }
}

export default CustomInput;

const styles = StyleSheet.create({
  labelStyle: {
    fontFamily: "Poppins-SemiBold",
    fontWeight: '400',
    fontSize: Platform.OS === 'ios' ? (SIZES.height > 720 ? 13 : 11) : 13,
    paddingVertical: 5,
    color: COLORS.black,
    opacity: Platform.OS === 'ios' ? 0.8 : 0.6,
  },
  focusedTextInput: {
    borderRadius: 10,
    backgroundColor: COLORS.white,
    borderWidth: 1,
    borderColor: "#02122C",
    marginBottom: 5,
    paddingHorizontal: 20,
    color: COLORS.black,
    fontFamily: "Poppins-SemiBold",
    fontSize: Platform.OS === 'ios' ? 11 : 13,
    height: Platform.OS === 'ios' ? (SIZES.height > 720 ? 50 : 35) : 50,
  },
  focusedTextInputError: {
    borderRadius: 10,
    backgroundColor: COLORS.white,
    borderWidth: 1,
    borderColor: "#FF6E6E",
    marginBottom: 5,
    paddingHorizontal: 20,
    color: COLORS.black,
    fontFamily: "Poppins-SemiBold",
    fontSize: Platform.OS === 'ios' ? 11 : 13,
    height: Platform.OS === 'ios' ? (SIZES.height > 720 ? 50 : 35) : 50,
  },
  textInput: {
    borderRadius: 10,
    backgroundColor: COLORS.white,
    borderWidth: 1,
    borderColor: COLORS.boderColor,
    marginBottom: 5,
    paddingHorizontal: 20,
    color: COLORS.black,
    fontFamily: "Poppins-SemiBold",
    fontSize: Platform.OS === 'ios' ? 11 : 13,
    height: Platform.OS === 'ios' ? (SIZES.height > 720 ? 50 : 35) : 50,

  },
  inlineError: {
    fontFamily: "Poppins-Regular",
    fontSize: Platform.OS === 'ios' ? 10 : 11,
    color: COLORS.error,
    marginTop: Platform.OS === 'ios' ? 15 : 10,
    marginLeft: 0,
    // position:'absolute'
  },

});