Skip to content

Commit 8641f85

Browse files
WrathChaosWrathChaos
committed
new: Documentation is completed
1 parent 88e10f0 commit 8641f85

File tree

2 files changed

+32
-36
lines changed

2 files changed

+32
-36
lines changed

‎README.md

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,50 @@
1-
<img alt="React Native Typescript Library Starter" src="assets/logo.png" width="1050"/>
1+
<img alt="React Native Text Input Interactive" src="assets/logo.png" width="1050"/>
22

3-
[![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)
3+
[![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)
44

5-
[![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)
5+
[![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)
66

7-
[![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)
8-
[![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)
7+
[![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)
8+
[![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)
99
![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
1010
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
1111
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)
1212

1313
<p align="center">
14-
<img alt="React Native Typescript Library Starter"
15-
src="assets/Screenshots/typescript.jpg" />
14+
<img alt="React Native Text Input Interactive"
15+
src="assets/Screenshots/react-native-text-input-interactive.gif" />
1616
</p>
1717

1818
# Installation
1919

2020
Add the dependency:
2121

2222
```bash
23-
npm i react-native-typescript-library-starter
23+
npm i react-native-text-input-interactive
2424
```
2525

2626
## Peer Dependencies
2727

28-
<h5><i>IMPORTANT! You need install them</i></h5>
29-
30-
```js
31-
"react": ">= 16.x.x",
32-
"react-native": ">= 0.55.x",
33-
```
28+
<b><i>Zero Dependency!</i></b>
3429

3530
# Usage
3631

3732
## Import
3833

3934
```jsx
40-
import MyComponent from "react-native-typescript-library-starter";
35+
import InteractiveTextInput from "react-native-text-input-interactive";
4136
```
4237

4338
## Fundamental Usage
4439

4540
```jsx
46-
<MyComponent />
41+
<InteractiveTextInput onChangeText={(text: string) => {}} />
4742
```
4843

4944
## Example Project 😍
5045

5146
You can checkout the example project 🥰
47+
There is **advanced** usage on example.
5248

5349
Simply run
5450

@@ -59,37 +55,37 @@ should work of the example project.
5955

6056
# Configuration - Props
6157

62-
## Fundamentals
63-
64-
| Property | Type | Default | Description |
65-
| ----------- | :----: | :-------: | --------------------- |
66-
| title | string | undefined | change the title |
67-
| description | string | undefined | change the descrition |
68-
6958
## Customization (Optionals)
7059

71-
| Property | Type | Default | Description |
72-
| -------------- | :-------: | :-------: | ---------------------------------------------------------------------- |
73-
| enableButton | boolean | false | let you enable the button (must use it for button) |
74-
| onPress | function | undefined | set your own logic for the button functionality when it is pressed |
75-
| buttonText | string | undefined | change the button's text |
76-
| style | ViewStyle | default | set or override the style object for the main container |
77-
| buttonStyle | ViewStyle | default | set or override the style object for the button style |
78-
| ImageComponent | Image | default | set your own component instead of default react-native Image component |
60+
TextInput and Icon is fully customizable thanks to `prop-drilling`, you can use any `TextInput` props.
61+
62+
| Property | Type | Default | Description |
63+
| ---------------------------- | :-----------------: | :--------------: | --------------------------------------------------------------------------------------------------------------------- |
64+
| mainColor | string | #008FEB | change the main animated color |
65+
| originalColor | string | transparent | change the original/default animated color |
66+
| animatedPlaceholderTextColor | string | #757575 | change the placeholder text animated color |
67+
| ImageComponent | Component | Image | set your own image component such as; `FastImage` |
68+
| IconComponent | Component | TouchableOpacity | set your own icon component such as; [react-native-bounceable](https://github.com/WrathChaos/react-native-bounceable) |
69+
| enableIcon | boolean | false | set the true for using the right sided icon |
70+
| enableIcon | boolean | false | set the true for using the right sided icon |
71+
| iconImageSource | ImageSourcePropType | undefined | set the icon image |
72+
| onIconPress | Function | undefined | set your own logic for the icon button functionality when the icon is pressed |
73+
| style | ViewStyle | default | set or override the style object for the main container |
74+
| textInputStyle | TextStyle | default | set or override the style object for the text input itself |
75+
| iconContainerStyle | ViewStyle | default | set or override the style object for the icon container |
76+
| iconImageStyle | ImageStyle | default | set or override the style object for the icon image style |
77+
| buttonText | string | undefined | change the button's text |
78+
| ImageComponent | Image | default | set your own component instead of default react-native Image component |
7979

8080
## Future Plans
8181

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

85-
# Change Log
86-
87-
Change log will be here !
88-
8985
## Author
9086

9187
FreakyCoder, kurayogun@gmail.com
9288

9389
## License
9490

95-
React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info.
91+
React Native Text Input Interactive is available under the MIT license. See the LICENSE file for more info.

‎assets/Screenshots/react-native-text-input-interactive.gif

6.43 MB
Loading

0 commit comments

Comments
 (0)