React Native Custom Simple TextInput Component

This CustomTextInput component takes the following props:

• type: Specifies the input type ('text', 'number', 'password').
• keyboardType: Specifies the keyboard type ('default', 'numeric', 'email-address', etc.).
• editable: Determines if the input is editable or not.
• placeholder: Placeholder text for the input.
• value: The current value of the input.
• onChangeText: Callback function triggered when the text changes.
• secureTextEntry: If type is 'password', it sets the secureTextEntry prop to true.
• style: Additional styles for customization.

You can use this component in your application like this:

// App.js

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import CustomTextInput from './CustomTextInput';

const App = () => {
  const [text, setText] = useState('');

  return (
    <View>
      <Text>Custom TextInput Example:</Text>

      <CustomTextInput
        type="text"
        keyboardType="default"
        editable={true}
        placeholder="Enter text"
        value={text}
        onChangeText={(newText) => setText(newText)}
        style={{ marginBottom: 20 }}
      />

      <CustomTextInput
        type="number"
        keyboardType="numeric"
        editable={true}
        placeholder="Enter number"
        value={text}
        onChangeText={(newText) => setText(newText)}
        style={{ marginBottom: 20 }}
      />

      <CustomTextInput
        type="password"
        keyboardType="default"
        editable={true}
        placeholder="Enter password"
        value={text}
        onChangeText={(newText) => setText(newText)}
        style={{ marginBottom: 20 }}
      />
    </View>
  );
};

export default App;

The CustomTextInput component uses the TextInput component from React Native and applies styles defined in the styles object. The default styles include a height, border color, border width, padding, and margin, providing a basic and consistent look for the text input. This customizable text input component is useful for creating a variety of input fields within a React Native application.

// CustomTextInput.js

import React from 'react';
import { TextInput, StyleSheet } from 'react-native';

const CustomTextInput = ({
  type = 'text', // 'text', 'number', 'password'
  keyboardType = 'default', // 'default', 'numeric', 'email-address', etc.
  editable = true,
  placeholder = 'Enter text',
  value,
  onChangeText,
  secureTextEntry = false,
  style,
}) => {
  return (
    <TextInput
      style={[styles.input, style]}
      keyboardType={keyboardType}
      placeholder={placeholder}
      value={value}
      onChangeText={onChangeText}
      secureTextEntry={type === 'password' ? true : secureTextEntry}
      editable={editable}
    />
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    padding: 10,
    marginVertical: 10,
  },
});

export default CustomTextInput;