Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wrathchaos/react-native-text-input

React Native Text Input
https://github.com/wrathchaos/react-native-text-input

android apple front-end google ios mobile modern modern-text-input react react-native reactjs text text-input

Last synced: 3 months ago
JSON representation

React Native Text Input

Host: GitHub
URL: https://github.com/wrathchaos/react-native-text-input
Owner: WrathChaos
Created: 2020-10-27T16:37:39.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2021-05-22T17:36:48.000Z (over 3 years ago)
Last Synced: 2024-11-02T14:51:38.290Z (3 months ago)
Topics: android, apple, front-end, google, ios, mobile, modern, modern-text-input, react, react-native, reactjs, text, text-input
Language: Java
Homepage: https://freakycoder.com
Size: 14.9 MB
Stars: 8
Watchers: 3
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        

[![React Native Text Input](https://img.shields.io/badge/-Modern%20text%20input%20with%20fully%20customization%20options%20for%20React%20Native-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-text-input)

[![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-text-input.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-text-input)

[![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-text-input.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-text-input)

![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 TextInput

    

    

      React Native TextInput without button

    

  

 

    

      

    

    

      

    

   

# Installation

Add the dependency:

```bash

npm i @freakycoder/react-native-text-input

```

## Peer Dependencies

IMPORTANT! You need install them


```js

"@freakycoder/react-native-bounceable": "^0.2.4",

```

# Usage

## Import

```jsx

import RNTextInput from "@freakycoder/react-native-text-input";

```

## Fundamental Usage

```jsx

 console.log("Text: ", text)}

/>

```

## Without Button Usage

```jsx

 console.log("Text: ", text)}

/>

```

## Example Project 😍

You can checkout the example project 🥰

Simply run

- `npm i`

- `react-native run-ios/android`

should work of the example project.

# Configuration - Props

## Fundamentals

| Property      |   Type   |  Default  | Description                        |

| ------------- | :------: | :-------: | ---------------------------------- |

| onChangeText  | function | undefined | set the onChangeText functionality |

| disableButton | boolean  |   false   | disable right component button     |

| placeholder   |  string  | undefined | set the placeholder for text input |

## Customization (Optionals)

| Property       |    Type    |  Default  | Description                                                            |

| -------------- | :--------: | :-------: | ---------------------------------------------------------------------- |

| onPress        |  function  | undefined | set your own logic for the button functionality when it is pressed     |

| 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                  |

| textInputStyle | TextStyle  |  default  | set or override the style object for the text input style              |

| iconImageStyle | ImageStyle |  default  | set or override the style object for the image icon style              |

| ImageComponent |   Image    |  default  | set your own component instead of default react-native Image component |

| inputRef       | reference  | undefined | set the TextInput reference for the programmatic usage                 |

| iconComponent  |    any     | component | set your own icon component                                            |

## Future Plans

- [x] ~~LICENSE~~

- [ ] Write an article about the lib on Medium

## Author

FreakyCoder, [email protected]

## License

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