bamlab / bamlab/react-native-formik

withNextInputAutoFocus doesn't work with FlatList

Open
#145 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
398
Forks
50
PR merge metrics
No merged PRs in 30d

Description

Hi,

i use a `FlatList` inside a `FieldArray` inside a component wrapped with `withNextInputAutoFocusForm`

### Current behavior

inputs inside the `FlatList` always have the `done` button

### Expected behavior

inputs inside the `FlatList` should display the `next` button when this is not the last

### Technical detail

`FlatList` has a `renderItem` prop but doesn't have the `children` prop

so, `getInputs` can find the inputs because it search `children` prop

https://github.com/bamlab/react-native-formik/blob/ab0a0173a2e248ca584bba2169ead7e9e982cb97/src/withNextInputAutoFocus.js#L11-L19

### Demo

```tsx
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react-native';
import { FieldArray, Formik } from 'formik';
import React from 'react';
import { FlatList, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { handleTextInput, withNextInputAutoFocusForm, withNextInputAutoFocusInput } from 'react-native-formik';
import { compose } from 'redux';

const TextField = compose(
handleTextInput,
withNextInputAutoFocusInput,
)(TextInput);

const NextInputAutoFocus = withNextInputAutoFocusForm(View);

const initialFormValues = { someList: ['first item', 'second item', 'third item'] };

storiesOf('fields', module).add('fieldArray', () => (

{({ handleSubmit }) => (


{() => (
}
keyExtractor={(_item, index) => index.toString()}
/>
)}


Submit


)}

));
```

---

It seems related to this issue https://github.com/bamlab/react-native-formik/issues/42 but i'm not sure this is the same problem

---

Thanks for this module : it's simple and usefull

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.