1.0.3 • Published 6 months ago
reactnative-custom-textinput-v1.2 v1.0.3
React Native Custom TextInput Package
Screencast from 29-10-23 11:25:07 PM IST.webm
Get Started
Installation
Install my-project with npm
npm i reactnative-custom-textinput-v1.2
Usage/Examples
import React, {useState} from 'react';
import {StyleSheet, Dimensions} from 'react-native';
import UITextInput from 'reactnative-custom-textinput-v1.2';
const App = () => {
const [inputValue, setInputValue] = useState('');
return (
<UITextInput
value={inputValue}
onChangeText={setInputValue}
placeholder="Enter something"
isValid={inputValue.trim().length > 0}
warning="* Field Mandatory"
UIInputStyle={InputStyle.customInputText}
UIWarningStyle={InputStyle.customWarningText}
UIContainerStyle={InputStyle.customContainer}
UIEmptyBorderStyle={InputStyle.emptyBorder}
UINonEmptyBorderStyle={InputStyle.nonEmptyBorder}
/>
);
};
const {width, height} = Dimensions.get('window');
const InputStyle = StyleSheet.create({
customContainer: {
flex: 1,
// Add custom container styles here
},
customInputText: {
fontSize: 20,
borderRadius: 10,
width: width * 0.8,
height: height * 0.07,
// Add custom container styles here
},
customWarningText: {
fontSize: 14,
color: '#f00',
// Add custom warning text styles here
},
emptyBorder: {
borderColor: 'red',
//Add custom empty border styles here
},
nonEmptyBorder: {
borderColor: 'green',
// Add custom non-empty border styles here
},
});
export default App;
Parameter | Type | Required |
---|---|---|
value | string | True |
onChangeText | ()=>void | Optional |
placeholder | string | True |
isValid | boolean | True |
warning | string | Optional |
width | string , number | Default width 90% |
height | string , number | Default height 60% |
UIContainerStyle | ViewStyle , TextStyle | Default flex:1 |
UIInputStyle | ViewStyle, TextStyle | Text-Input Style |
UIWarningStyle | ViewStyle , TextStyle | Waring-Text Style |
UIEmptyBorderStyle | ViewStyle , TextStyle | emptyBorder-Style |
UINonEmptyBorderStyle | ViewStyle , TextStyle | nonEmptyBorder- Style |
Author
https://www.npmjs.com/package/reactnative-custom-textinput-v1.2