https://github.com/ethercreative/react-native-form-auto-next
A simple React Native form component that automatically focuses the next TextInput on return
https://github.com/ethercreative/react-native-form-auto-next
Last synced: 8 months ago
JSON representation
A simple React Native form component that automatically focuses the next TextInput on return
- Host: GitHub
- URL: https://github.com/ethercreative/react-native-form-auto-next
- Owner: ethercreative
- License: mit
- Created: 2019-08-16T23:23:42.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-05T11:46:53.000Z (almost 6 years ago)
- Last Synced: 2025-04-18T23:18:50.049Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 19.5 KB
- Stars: 4
- Watchers: 4
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-form-auto-next
A simple React Native form component that automatically focuses the next TextInput on return
## Installation
```
npm install react-native-form-auto-next
yarn add react-native-form-auto-next
expo install react-native-form-auto-next
```
## Usage
```js
import React from 'react';
import { View } from 'react-native';
import { Form } from 'react-native-form-auto-next';
export default () => {
const submit = () => {
// Submit the form
};
return (
// Nesting works
// Override behaviour with onSubmitEditing prop
);
};
```
## Usage with custom/abstracted inputs
```js
// Form.js
import React from 'react';
import { View } from 'react-native';
import { Form } from 'react-native-form-auto-next';
import CustomInput from './CustomInput';
export default () => {
const submit = () => {
// Submit the form
};
return (
// Nesting works
// Override behaviour with onSubmitEditing prop
);
};
// CustomInput.js
import React, { Component } from 'react';
import { TextInput } from 'react-native';
class CustomInput extends Component {
constructor(props) {
super(props);
this.input = null;
}
componentDidMount() {
const { onRef } = this.props;
if (!onRef) {
return;
}
onRef(this);
}
focus = () => {
if (!this.input) {
return;
}
this.input.focus();
};
render() {
return (this.input = input)} />;
}
}
```