simba-mobile-cad3/app/components/OutlineTextInput/index.js

import React from 'react';
import {I18nManager, Platform, TextInput, View} from 'react-native';
import PropTypes from 'prop-types';
import {Color} from '../../config/Color';
import Text from '../Text';

export default function Index(props) {
    const cardColor = Color.cardBackgroundColor;
    const {
        style,
        onChangeText,
        onFocus,
        placeholder,
        value,
        success,
        secureTextEntry,
        keyboardType,
        multiline,
        textAlignVertical,
        icon,
        onSubmitEditing,
        error,
        ...rest
    } = props;
    return (
        <View>
            <View style={[{
                height: 46,
                borderRadius: 5,
                paddingHorizontal: 10,
                justifyContent: 'space-between',
                alignItems: 'center',
                flexDirection: 'row',
                backgroundColor: cardColor
            }, style]}>
                {React.Children.map(icon, child =>
                    React.cloneElement(child, {
                        color: success ? Color.primaryLightColor : Color.accentColor,
                        style: {marginRight: Platform.OS === 'ios' ? 10 : 5}
                    }),
                )}
                {/* @ts-ignore */}
                <TextInput
                    style={{
                        width: "100%",
                        height: '100%',
                        textAlign: I18nManager.isRTL ? 'right' : 'left',
                        color: success ? Color.textColor : Color.accentColor,
                        paddingTop: 5,
                        paddingBottom: 5,
                    }}
                    onChangeText={text => onChangeText(text)}
                    onFocus={() => onFocus()}
                    autoCorrect={false}
                    placeholder={placeholder}
                    placeholderTextColor={
                        success ? Color.grayColor : Color.accentColor
                    }
                    secureTextEntry={secureTextEntry}
                    value={value}
                    selectionColor={Color.primaryColor}
                    keyboardType={keyboardType}
                    multiline={multiline}
                    textAlignVertical={textAlignVertical}
                    onSubmitEditing={onSubmitEditing}
                    {...rest}
                />
            </View>
            {error !== '' && !success && (
                <View
                    style={{
                        alignSelf: 'flex-start',
                        justifyContent: 'flex-start',
                        marginTop: 5,
                    }}>
                    <Text caption2 accentColor>
                        {`${error}  `}
                    </Text>
                </View>
            )}
        </View>
    );
}

Index.propTypes = {
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    onChangeText: PropTypes.func,
    onFocus: PropTypes.func,
    placeholder: PropTypes.string,
    value: PropTypes.string,
    success: PropTypes.bool,
    secureTextEntry: PropTypes.bool,
    keyboardType: PropTypes.string,
    multiline: PropTypes.bool,
    textAlignVertical: PropTypes.string,
    icon: PropTypes.node,
    onSubmitEditing: PropTypes.func,
};

Index.defaultProps = {
    style: {},
    onChangeText: text => {
    },
    onFocus: () => {
    },
    placeholder: 'Placeholder',
    value: '',
    success: true,
    secureTextEntry: false,
    keyboardType: 'default',
    multiline: false,
    textAlignVertical: 'center',
    icon: null,
    onSubmitEditing: () => {
    },
};