https://github.com/wrathchaos/react-native-text-input-interactive
Fully customizable, animated text input for React Native with beautiful and elegant design
https://github.com/wrathchaos/react-native-text-input-interactive
android animated animation apple google interactive ios javascript mobile programming react react-native reactjs text-field text-input text-input-interactive typescript
Last synced: about 2 months ago
JSON representation
Fully customizable, animated text input for React Native with beautiful and elegant design
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-text-input-interactive
- Owner: WrathChaos
- Created: 2021-08-06T14:09:57.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-03T11:20:44.000Z (over 1 year ago)
- Last Synced: 2024-10-25T16:58:04.824Z (7 months ago)
- Topics: android, animated, animation, apple, google, interactive, ios, javascript, mobile, programming, react, react-native, reactjs, text-field, text-input, text-input-interactive, typescript
- Language: Java
- Homepage: https://freakycoder.com
- Size: 13.9 MB
- Stars: 40
- Watchers: 3
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-text-input-interactive)
[](https://github.com/WrathChaos/react-native-text-input-interactive)
[](https://www.npmjs.com/package/react-native-text-input-interactive)
[](https://www.npmjs.com/package/react-native-text-input-interactive)

[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
![]()
# 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](https://github.com/WrathChaos/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](https://dribbble.com/shots/14944967-On-Boarding-Money-Management-App/attachments/6661899?mode=media)
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.