https://github.com/sospedra/reinput
A React Native TextInput with material style 😎
https://github.com/sospedra/reinput
icons labels material placeholder react-native textinput
Last synced: 2 days ago
JSON representation
A React Native TextInput with material style 😎
- Host: GitHub
- URL: https://github.com/sospedra/reinput
- Owner: sospedra
- License: other
- Created: 2017-09-11T13:49:21.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T19:08:51.000Z (over 3 years ago)
- Last Synced: 2026-07-13T02:53:36.446Z (2 days ago)
- Topics: icons, labels, material, placeholder, react-native, textinput
- Language: JavaScript
- Homepage: https://reinput.sospedra.me
- Size: 2.61 MB
- Stars: 56
- Watchers: 2
- Forks: 28
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Reinput
[](http://standardjs.com/)
[](https://github.com/semantic-release/semantic-release)
[](https://www.npmjs.org/package/awesome-badges)
A React Native TextInput with material style 😎
### Installation
`npm install --save reinput`
`yarn add reinput`
### Motivation
Styling react-native inputs can be cumbersome. And most of them heavily relies
onto the material design patterns. This style layer over the regular `TextInput`
paves the way towards and easier and faster development.
We also expose a ReinputButton. Check the docs ;)
### Demo
Wanna try before? Here's an [interactive Expo snack](https://snack.expo.io/@git/github.com/sospedra/reinput:example).
Otherwise, you can clone the repo and run the `/example` folder. It's the same, tho.
### Usage
```js
import Reinput from "reinput"
const Input = () => (
)
```
### Props
#### Input
| Name | Type | Default |
| :------------------ | :--------------- | :-------- |
| activeColor | String |
| color | String | `#000000` |
| fontFamily | String |
| fontSize | Number | `15` |
| fontWeight | String or Number | `normal` |
| height | Number | `64` |
| marginBottom | Number | `8` |
| marginLeft | Number |
| marginRight | Number |
| marginTop | Number |
| maxHeight | Number |
| minHeight | Number |
| onBlur | Function |
| onChangeText | Function |
| onContentSizeChange | Function |
| onFocus | Function |
| paddingBottom | Number | `8` |
| paddingLeft | Number | `0` |
| paddingRight | Number | `0` |
| paddingTop | Number | `20` |
| register | Function | `noop` |
| textAlign | String | `left` |
- Register exposes the `TextInput` ref component out
#### Label
| name | type | default |
| :--------------- | :----- | :-------- |
| label | String |
| labelActiveColor | String | `#3f51b5` |
| labelActiveScale | Number | `0.8` |
| labelActiveTop | Number | `-18` |
| labelColor | String | `#757575` |
| labelDuration | Number | `200` |
#### Icon
| Name | Type | Default |
| :---------- | :------ | :------ |
| icon | Element |
| iconOverlay | Element |
#### Placeholder
| Name | Type | Default |
| :-------------------- | :------ | :-------- |
| placeholder | String |
| placeholderColor | String | `#757575` |
| placeholderVisibility | boolean | undefined | null |
How `placeholderVisibility` works?
```
{
Always: 1,
Never: null,
OnFocus: true,
OnBlur: false,
}
```
#### Underline
| Name | Type | Default |
| :-------------------- | :----- | :-------- |
| underlineActiveColor | String | `#3f51b5` |
| underlineActiveHeight | Number | `2` |
| underlineColor | String | `#757575` |
| underlineDuration | Number | `200` |
| underlineHeight | Number | `1` |
#### Error
| Name | Type | Default |
| :----------------------- | :-------- | :-------- |
| error | String |
| errorColor | String | `#fc1f4a` |
| errorStyle | TextStyle |
| errorStyle.fontSize | Number | `12` |
| errorStyle.paddingTop | Number | `4` |
| errorStyle.paddingBottom | Number | `4` |
And **also** all the [TextInput](https://facebook.github.io/react-native/docs/textinput.html#props) properties will work.
### ReinputButton
We also expose a component that looks like an Input but it's a button so accepts `onPress` prop.
We do following the [material design guidelines](https://material.io/design/components/text-fields.html).
Props are the same as the Input but it also accepts an `onPress` and doesn't have hooks for focus/blur events.
```js
import { ReinputButton } from "reinput"
const Input = () => (
)
```
### Credits
Style patterns are mainly based on [Material Design](https://material.io/guidelines/components/text-fields.html#); properly adapted for iOS.