React Native Custom Simple TextInput Component
From:
React Native Components
,
TextInput Component
Last Updated: 10 months ago
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
: Iftype
is 'password', it sets thesecureTextEntry
prop totrue
.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;