!Platform - Android and iOS

src="assets/Screenshots/react-native-text-input-interactive.gif" height='850' width="450" />

Installation

Add the dependency:

``bash
npm i react-native-text-input-interactive
`

Peer Dependencies

Zero Dependency!

Usage

Import

`jsx
import TextInput from "react-native-text-input-interactive";
`

Basic Usage

`jsx
{}} />
`

Example Project 😍

You can checkout the example project 🥰
There is advanced usage on example.

Simply run

- npm i
- react-native run-ios/android

should work of the example project.

Configuration - Props

Customization (Optionals)

TextInput and Icon is fully customizable thanks to prop-drilling, you can use any TextInput props.

| Property | Type | Default | Description |
| ---------------------------- | :-----------------: | :--------------: | --------------------------------------------------------------------------------------------------------------------- |
| mainColor | string | #2a41cb | change the main animated color |
| originalColor | string | transparent | change the original/default animated color |
| animatedPlaceholderTextColor | string | #757575 | change the placeholder text animated color |
| ImageComponent | Component | Image | set your own image component such as; FastImage` |
| IconComponent | Component | TouchableOpacity | set your own icon component such as; react-native-bounceable |
| enableIcon | boolean | false | set the true for using the right sided icon | |
| iconImageSource | ImageSourcePropType | undefined | set the icon image |
| onIconPress | Function | undefined | set your own logic for the icon button functionality when the icon is pressed |
| style | ViewStyle | default | set or override the style object for the main container |
| textInputStyle | TextStyle | default | set or override the style object for the text input itself |
| iconContainerStyle | ViewStyle | default | set or override the style object for the icon container |
| iconImageStyle | ImageStyle | default | set or override the style object for the icon image style |
| buttonText | string | undefined | change the button's text |
| ImageComponent | Image | default | set your own component instead of default react-native Image component |

Future Plans

- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium

Credits

Example mobile design is heavily inspired by Firman Praadita
Thank you so much for this inspiration :)

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Text Input Interactive is available under the MIT license. See the LICENSE file for more info.