# rn-material-ui-textfield

> Material UI textfield

Latest version **1.0.9** (published 2022-11-03) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install rn-material-ui-textfield
pnpm add rn-material-ui-textfield
yarn add rn-material-ui-textfield
bun add rn-material-ui-textfield
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2022-11-03 |
| First published | 2020-11-05 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 840.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40 |
| Maintainers | gabrieldonadel |
| Keywords | react, react-component, react-native, ios, android, material, material-ui, input, textinput, field, textfield, floating, label |

## Links

- npm: https://www.npmjs.com/package/rn-material-ui-textfield
- Repository: https://github.com/gabrieldonadel/rn-material-ui-textfield
- Homepage: https://github.com/gabrieldonadel/rn-material-ui-textfield#readme
- Issues: https://github.com/gabrieldonadel/rn-material-ui-textfield/issues
- npm.io page: https://npm.io/package/rn-material-ui-textfield

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.5.9
- [deprecated-react-native-prop-types](https://npm.io/package/deprecated-react-native-prop-types.md) ^2.3.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2022-11-03
- 1.0.8 — 2022-10-31
- 1.0.7 — 2022-08-14
- 1.0.6 — 2022-03-04
- 1.0.5 — 2021-07-18
- 1.0.4 — 2021-04-22
- 1.0.3 — 2021-04-03
- 1.0.2 — 2020-12-09
- 1.0.1 — 2020-11-19
- 1.0.0 — 2020-11-05

## README

[npm-badge]: https://img.shields.io/npm/v/rn-material-ui-textfield.svg?colorB=ff6d00
[npm-url]: https://npmjs.com/package/rn-material-ui-textfield
[npm-downloads-badge]: https://img.shields.io/npm/dt/rn-material-ui-textfield.svg
[license-badge]: https://img.shields.io/npm/l/rn-material-ui-textfield.svg?colorB=448aff
[license-url]: https://raw.githubusercontent.com/n4kz/rn-material-ui-textfield/master/license.txt
[example-url]: https://cloud.githubusercontent.com/assets/2055622/24325711/eaa4ff08-11af-11e7-8550-2504c1580979.gif
[rn-textinput]: https://facebook.github.io/react-native/docs/textinput.html#props
[md-textfield]: https://material.io/guidelines/components/text-fields.html

# rn-material-ui-textfield

[![npm][npm-badge]][npm-url] [![npm downloads][npm-downloads-badge]][npm-url] [![license][license-badge]][license-url]

Material UI texfield with consistent behaviour on Android, iOS and Web

![example][example-url]

## Features

- Material design [guidelines][md-textfield] compliance
- Consistent look and feel on iOS and Android
- Animated state transitions (normal, focused and errored)
- Customizable font size, colors and animation duration
- Disabled state (with dotted underline)
- Outlined and filled fields
- Masked input support
- Multiline text input
- Character counter
- Prefix and suffix
- Accessory views
- Helper text
- RTL support
- Pure javascript implementation

## Installation

```bash
yarn add rn-material-ui-textfield
npm install rn-material-ui-textfield
```

## Usage

```javascript
import React, { Component } from 'react';
import {
  TextField,
  FilledTextField,
  OutlinedTextField,
} from 'rn-material-ui-textfield';

class Example extends Component {
  fieldRef = React.createRef();

  onSubmit = () => {
    let { current: field } = this.fieldRef;

    console.log(field.value());
  };

  formatText = (text) => {
    return text.replace(/[^+\d]/g, '');
  };

  render() {
    return (
      <OutlinedTextField
        label="Phone number"
        keyboardType="phone-pad"
        formatText={this.formatText}
        onSubmitEditing={this.onSubmit}
        ref={this.fieldRef}
      />
    );
  }
}
```

## Properties

| name                 | description                                 |      type | default                 |
| :------------------- | :------------------------------------------ | --------: | :---------------------- |
| textColor            | Text input color                            |    String | rgba(0, 0, 0, .87)      |
| fontSize             | Text input font size                        |    Number | 16                      |
| labelFontSize        | Text field label font size                  |    Number | 12                      |
| lineWidth            | Text field underline width                  |    Number | 0.5                     |
| activeLineWidth      | Text field active underline width           |    Number | 2                       |
| disabledLineWidth    | Text field disabled underline width         |    Number | 1                       |
| tintColor            | Text field accent color                     |    String | rgb(0, 145, 234)        |
| baseColor            | Text field base color                       |    String | rgba(0, 0, 0, .38)      |
| label                | Text field label text                       |    String | -                       |
| title                | Text field helper text                      |    String | -                       |
| prefix               | Text field prefix text                      |    String | -                       |
| suffix               | Text field suffix text                      |    String | -                       |
| error                | Text field error text                       |    String | -                       |
| errorColor           | Text field color for errored state          |    String | rgb(213, 0, 0)          |
| lineType             | Text field line type                        |    String | solid                   |
| disabledLineType     | Text field line type in disabled state      |    String | dotted                  |
| animationDuration    | Text field animation duration in ms         |    Number | 225                     |
| characterRestriction | Text field soft limit for character counter |    Number | -                       |
| disabled             | Text field availability                     |   Boolean | false                   |
| editable             | Text field text can be edited               |   Boolean | true                    |
| multiline            | Text filed multiline input                  |   Boolean | false                   |
| contentInset         | Layout configuration object                 |    Object | [{...}](#content-inset) |
| labelOffset          | Label position adjustment                   |    Object | [{...}](#label-offset)  |
| inputContainerStyle  | Style for input container view              |    Object | -                       |
| containerStyle       | Style for container view                    |    Object | -                       |
| labelTextStyle       | Style for label inner Text component        |    Object | -                       |
| titleTextStyle       | Style for title inner Text component        |    Object | -                       |
| affixTextStyle       | Style for affix inner Text component        |    Object | -                       |
| formatText           | Input mask callback                         |  Function | -                       |
| renderLeftAccessory  | Render left input accessory view            |  Function | -                       |
| renderRightAccessory | Render right input accessory view           |  Function | -                       |
| onChangeText         | Change text callback                        |  Function | -                       |
| onFocus              | Focus callback                              |  Function | -                       |
| onBlur               | Blur callback                               |  Function | -                       |
| inputRef             | TextInput ref                               | RefObject | -                       |

Other [TextInput][rn-textinput] properties will also work.

### Content Inset

| name  | description                       | Normal | Filled | Outlined |
| :---- | :-------------------------------- | -----: | -----: | -------: |
| top   | Inset on the top side             |     16 |      8 |        0 |
| left  | Inset on the left side            |      0 |     12 |       12 |
| right | Inset on the right side           |      0 |     12 |       12 |
| label | Space between label and TextInput |      4 |      4 |        4 |
| input | Space between line and TextInput  |      8 |      8 |       16 |

### Label Offset

| name | description                          | Normal | Filled | Outlined |
| :--- | :----------------------------------- | -----: | -----: | -------: |
| x0   | Horizontal offset for inactive state |      0 |      0 |        0 |
| y0   | Vertical offset for inactive state   |      0 |    -10 |        0 |
| x1   | Horizontal offset for active state   |      0 |      0 |        0 |
| y1   | Vertical offset for active state     |      0 |     -2 |      -10 |

## Methods

| name                   | description                   | returns |
| :--------------------- | :---------------------------- | ------: |
| focus()                | Acquire focus                 |       - |
| blur()                 | Release focus                 |       - |
| clear()                | Clear text field              |       - |
| value()                | Get current value             |  String |
| isFocused()            | Get current focus state       | Boolean |
| isErrored()            | Get current error state       | Boolean |
| isRestricted()         | Get current restriction state | Boolean |
| isDefaultVisible()     | Get default value visibility  | Boolean |
| isPlaceholderVisible() | Get placeholder visibility    | Boolean |
| setValue()             | Set current value             |       - |

## Example

```bash
git clone https://github.com/gabrieldonadel/rn-material-ui-textfield
cd rn-material-ui-textfield/example
yarn install
yarn run ios # or yarn run android
```

## Contributing

1. Fork it (<https://github.com/yourname/yourproject/fork>)
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes (`git commit -am 'Add some fooBar'`)
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request

---
_Source: https://npm.io/package/rn-material-ui-textfield · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._