Add the dependency:
npm i react-native-text-input-interactive
Zero Dependency!
import TextInput from "react-native-text-input-interactive";
<TextInput onChangeText={(text: string) => {}} />
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.
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 |
-
LICENSE - Write an article about the lib on Medium
Example mobile design is heavily inspired by Firman Praadita Thank you so much for this inspiration :)
FreakyCoder, kurayogun@gmail.com
React Native Text Input Interactive is available under the MIT license. See the LICENSE file for more info.