Breaking News: Grepper is joining You.com. Read the official announcement!

react native custom input

MAKSTYLE119 answered on September 15, 2022 Popularity 8/10 Helpfulness 5/10

answer react native custom input

react native custom input

Comment

import React, {useState} from 'react';
import {View, TextInput, StyleSheet, Text} from 'react-native';
import Colors from '../Constants/Colors';
import Icon from 'react-native-vector-icons/FontAwesome5';

const MyInput = props => {
  const [showPassword, setShowPassword] = useState(true);
  return (
      <View
        style={{
          height: 40,
          borderRadius: 10,
          justifyContent: 'center',
          alignItems: 'center',
          display: 'flex',
          flexDirection: 'row',
        }}>
        <TextInput
          placeholderTextColor={Colors.DarkBrown}
          onChangeText={props.OnChangeText}
          style={{width: '85%'}}
          placeholder={props.placeHolder}
          secureTextEntry={props.secure && showPassword}
          multiline={props.multiline ? true : false}
        />
        {props.secure && (
          <Icon
            name={showPassword ? 'eye-slash' : 'eye'}
            size={15}
            color={Colors.DarkBrown}
            onPress={() => setShowPassword(!showPassword)}
          />
        )}
      </View>
  );
};

var styles = StyleSheet.create({
  InputInner: {
    color: '#000000',
  },
});

export default MyInput;

Popularity 8/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: input javascript react-native

Link to this answer
Share Copy Link

Contributed on Sep 15 2022

MAKSTYLE119

0 Answers Avg Quality 2/10

react native custom input

Contents

More Related Answers

react native custom input

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.