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: about 2 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 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-05T11:46:53.000Z (almost 5 years ago)
• Last Synced: 2024-05-01T18:08:31.204Z (8 months ago)
• Language: JavaScript
• Homepage:
• Size: 19.5 KB
• Stars: 4
• Watchers: 5
• 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)} />;

  }

}

```