react-native-text-input
@optisolbusiness/react-native-text-input
Installation
npm i @optisolbusiness/react-native-text-input
Usage
import { InputTextComponent } from '@optisolbusiness/react-native-text-input';
// ...
<InputTextComponent
title={'first_name'}
isMandatory={true}
value={name}
placeholder={'Enter Your Name'}
inputStyle={{ color: 'blue'}}
textBoxContainerStyle={{ marginTop: 10 , borderRadius: 20, height: 45,}}
isError={false}
isErrorOutline={false}
keyboardType="default"
returnKey={'next'}
errorMessage={'invalid name'}
onChangeText={(item) => updateTextValue(item, 'name')}
onFocus={() => updateButtonValue('blur')}
/>
Example for Usage of imagePosition and imageComponent
export default function App() {
const [showPassword, setShowPassword] = useState(true);
const renderEyeIcon = () => {
return (
<TouchableOpacity onPress={() => setShowPassword(!showPassword)}>
{!showPassword && <Image
source={require('./assets/images/eyeUnhide.png')}
/>}
{showPassword && <Image
source={require('./assets/images/eyeHide.png')}
/>}
</TouchableOpacity>
);
};
return (
<InputTextComponent
secureText={showPassword}
imagePosition={true}
imageComponent={() => renderEyeIcon()}
/>
)
}
Props and Methods
Prop | Type | Description |
---|---|---|
showTitle |
boolean |
Optional. Enable to show title for textinput |
title |
String |
Optional. TextInput title (heading) |
titleStyle |
Style |
Optional. text input title (heading) style |
isMandatory |
boolean |
Optional. to show mandatory symbol adjacent to text input |
mainContainer |
Style |
Optional. styling for whole contianer |
placeholder |
String |
Optional. placeholder for textinput |
disabled |
boolean |
Optional. If you do not wish to allow editing in the text field, you can set the value to false. |
value |
String |
Optional. Specify the value to be displayed in the text input field |
secureText |
boolean |
Optional. make true for sensitive text like passwords to stay secure |
keyboardType |
String |
Optional. Determines which keyboard to open |
returnKey |
String |
Optional. Determines how the return key should look |
inputStyle |
Style |
Optional. styling for text input |
onChangeText |
Function |
Mandatory. Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler |
onFocus |
Function |
Optional. Callback that is called when the text input is focused |
onBlur |
Function |
Optional. Callback that is called when the text input is blurred |
onSubmitting |
Function |
Optional. Callback that is called when the text input's submit button is pressed. |
onEndEditting |
Function |
Optional. Callback that is called when text input ends |
maxLength |
Number |
Optional. Limits the maximum number of characters that can be entered |
multiline |
boolean |
Optional. If true, the text input can be multiple lines. The default value is false |
Note: It is important to note that this aligns the text to the top on iOS, and centers it on Android. Use with textAlignVertical set to top for the same behavior in both platforms.
Prop | Type | Description |
---|---|---|
numberOfLines |
Number |
Optional. Use it with multiline set to true to be able to fill the lines |
blurOnSubmit |
boolean |
Optional. If true, the text field will blur when submitted |
onPressIn |
Function |
Optional. Callback that is called when a touch is engaged |
inputRef |
Function |
Optional. reference of text input |
testID |
String |
Optional. testID of text input |
isErrorOutline |
boolean |
Optional. enable to show bordercolor for textinput when there is error |
isErrorBorderColor |
color |
Optional. border color to text input when there is error must make isErrorOutline to true to use isErrorBorderColor prop |
notErrorBorderColor |
String |
Optional. border color to text input when there is no error default is black |
textBoxContainerStyle |
Style |
Optional. Specify the styling properties for the outer container of a text box, such as borderRadius and borderWidth. |
errorMessage |
Style |
Optional. styling of text box outer container like borderRadius, bordrWidth... |
isError |
boolean |
Optional. to show error message |
errorTextStyle |
Style |
Optional. error text style |
errorMessage |
String |
Optional. error message text |
imagePosition |
boolean |
Optional. To position an image, such as an eye icon or a calendar icon, on the right corner of a text input, |
imageComponent |
Function |
Optional. To show icon on the right corner of the text input and when pressed, you can implement a functionality, Must make imagePosition to true |
To enable a pop-up to appear when hovering over an icon, you would need to install the "react-native-popup-menu" library. This pop-up menu will be displayed adjacent to a text input field, and its primary function is to provide additional information relevant to that particular input.
Installation
npm i react-native-popup-menu
If using iOS please remember to install cocoapods by running: npx pod-install
Wrap your application inside MenuProvider and then simply use Menu component where you need it. Below you can find a simple example.
import { MenuProvider } from 'react-native-popup-menu';
export const App = () => (
<MenuProvider>
<YourApp />
</MenuProvider>
);
<InputTextComponent
infoEnable={true}
menuTriggerImageComponent={ () => <Image
source={require('./assets/images/icon.png')}/>}
triggerText={'Text to be shown'}
triggerTextStyle={{color: 'pink'}}
triggerStyle={{marginLeft: 10}}
optionsContainerStyle={{borderColor: 'red',borderRadius:2, marginTop: 19}}
/>
Below are props for react-native-popup-menu
Prop | Type | Description |
---|---|---|
infoEnable |
boolean |
Mandatory. to enable pop-up menu |
triggerStyle |
Style |
Optional. Define the styles for the triggerWrapper within the MenuTrigger |
optionsContainerStyle |
Style |
Optional. Define the styles for the optionsContainer within the MenuOptions |
triggerTextStyle |
Style |
Optional. trigger text style |
triggerText |
String |
Mandatory. to show trigger text |
menuTriggerImageComponent |
Function |
Mandatory. To display an image that triggers a pop-up when hovered over |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library