Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

withNextInputAutoFocus doesn't work with FlatList #145

Open
brunoebstein opened this issue Jun 15, 2020 · 0 comments
Open

withNextInputAutoFocus doesn't work with FlatList #145

brunoebstein opened this issue Jun 15, 2020 · 0 comments

Comments

@brunoebstein
Copy link

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

const getInputs = children =>
React.Children.toArray(children).reduce((partialInputs, child) => {
if (child && child.props && child.props.children) {
return partialInputs.concat(getInputs(child.props.children));
}
if (child && child.props && !!child.props.name)
return partialInputs.concat(child);
return partialInputs;
}, []);

Demo

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', () => (
  <Formik initialValues={initialFormValues} onSubmit={action('submit')}>
    {({ handleSubmit }) => (
      <NextInputAutoFocus>
        <FieldArray name="someList">
          {() => (
            <FlatList
              data={initialFormValues.someList}
              renderItem={({ index }) => <TextField name={`someList[${index}]`} />}
              keyExtractor={(_item, index) => index.toString()}
            />
          )}
        </FieldArray>
        <TouchableOpacity onPress={handleSubmit}>
          <Text>Submit</Text>
        </TouchableOpacity>
      </NextInputAutoFocus>
    )}
  </Formik>
));

It seems related to this issue #42 but i'm not sure this is the same problem


Thanks for this module : it's simple and usefull

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant