Installation

Add the dependency:

npm i react-native-text-input-interactive

Peer Dependencies

Zero Dependency!

Usage

Import

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

Basic Usage

<TextInput onChangeText={(text: string) => {}} />

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, [email protected]

License

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