diff --git a/README.md b/README.md index 7a35876..58e20c5 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,18 @@ -React Native Typescript Library Starter +React Native Text Input Interactive -[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-typescript-library-starter) +[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-text-input-interactive) -[![React Native Typescript Library Starter](https://img.shields.io/badge/-Extremely%20easy%20to%20create%20a%20React%20Native%20Component%20Library%20with%20both%20Stateful%20and%20Functional%20Component%20Examples-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-typescript-library-starter) +[![React Native Text Input Interactive](https://img.shields.io/badge/-Extremely%20easy%20to%20create%20a%20React%20Native%20Component%20Library%20with%20both%20Stateful%20and%20Functional%20Component%20Examples-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-text-input-interactive) -[![npm version](https://img.shields.io/npm/v/react-native-typescript-library-starter.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-typescript-library-starter) -[![npm](https://img.shields.io/npm/dt/react-native-typescript-library-starter.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-typescript-library-starter) +[![npm version](https://img.shields.io/npm/v/react-native-text-input-interactive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-text-input-interactive) +[![npm](https://img.shields.io/npm/dt/react-native-text-input-interactive.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-text-input-interactive) ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)

- React Native Typescript Library Starter + React Native Text Input Interactive

# Installation @@ -20,35 +20,31 @@ Add the dependency: ```bash -npm i react-native-typescript-library-starter +npm i react-native-text-input-interactive ``` ## Peer Dependencies -
IMPORTANT! You need install them
- -```js -"react": ">= 16.x.x", -"react-native": ">= 0.55.x", -``` +Zero Dependency! # Usage ## Import ```jsx -import MyComponent from "react-native-typescript-library-starter"; +import InteractiveTextInput from "react-native-text-input-interactive"; ``` ## Fundamental Usage ```jsx - + {}} /> ``` ## Example Project 😍 You can checkout the example project 🥰 +There is **advanced** usage on example. Simply run @@ -59,37 +55,37 @@ should work of the example project. # Configuration - Props -## Fundamentals - -| Property | Type | Default | Description | -| ----------- | :----: | :-------: | --------------------- | -| title | string | undefined | change the title | -| description | string | undefined | change the descrition | - ## Customization (Optionals) -| Property | Type | Default | Description | -| -------------- | :-------: | :-------: | ---------------------------------------------------------------------- | -| enableButton | boolean | false | let you enable the button (must use it for button) | -| onPress | function | undefined | set your own logic for the button functionality when it is pressed | -| buttonText | string | undefined | change the button's text | -| style | ViewStyle | default | set or override the style object for the main container | -| buttonStyle | ViewStyle | default | set or override the style object for the button style | -| ImageComponent | Image | default | set your own component instead of default react-native Image component | +TextInput and Icon is fully customizable thanks to `prop-drilling`, you can use any `TextInput` props. + +| Property | Type | Default | Description | +| ---------------------------- | :-----------------: | :--------------: | --------------------------------------------------------------------------------------------------------------------- | +| mainColor | string | #008FEB | 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 | +| 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 -# Change Log - -Change log will be here ! - ## Author FreakyCoder, kurayogun@gmail.com ## License -React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info. +React Native Text Input Interactive is available under the MIT license. See the LICENSE file for more info. diff --git a/assets/Screenshots/react-native-text-input-interactive.gif b/assets/Screenshots/react-native-text-input-interactive.gif new file mode 100644 index 0000000..a397e60 Binary files /dev/null and b/assets/Screenshots/react-native-text-input-interactive.gif differ