Knowledge Base (TextInput Component)
Please review knowledge base, if you cannot find the answer you are looking for? Reach out to our support team by opening forum thread.
- 1. 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
: 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 theTextInput
component from React Native and applies styles defined in thestyles
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;