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