TextInput

textinput.jsx

import * as React from 'react';
import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';

interface IRadarTextInput {
  setValue: (value: string) => void;
  value: string;
  placeHolder: string;
  isSecure: boolean;
}

export default class RadarTextInput extends React.PureComponent<
  IRadarTextInput
> {
  input: any;
  constructor(props: IRadarTextInput) {
    super(props);
    this.input = null;
  }

  handleTextChange = (value: string) => {
    this.props.setValue(value);
  };

  focus = () => {
    this.input.focus();
  };

  render() {
    const { placeHolder, value, isSecure } = this.props;
    return (
      <>
        <TouchableOpacity style={styles.input} onPress={this.focus}>
          <TextInput
            ref={ref => (this.input = ref)}
            secureTextEntry={isSecure}
            value={value}
            onChangeText={this.handleTextChange}
            selectionColor={'white'}
            autoCapitalize="none"
            style={styles.inputText}
            placeholder={placeHolder}
            placeholderTextColor={'#FFFFFF4D'}
          />
        </TouchableOpacity>
        <View style={styles.hairline} />
      </>
    );
  }
}

const styles = StyleSheet.create({
  inputText: {
    alignSelf: 'center',
    height: 29,
    fontFamily: 'Montserrat-Bold',
    fontSize: 24,
    fontStyle: 'normal',
    letterSpacing: 0,
    marginStart: 16,
    color: '#ffffff',
  },
  hairline: {
    marginEnd: 24,
    marginStart: 24,
    height: 1,
    borderRadius: 2,
    backgroundColor: '#ffffff',
  },
  input: {
    flexDirection: 'row',
    marginStart: 24,
    marginEnd: 24,
    height: 51,
    borderRadius: 2,
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
  },
});