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
Hi,
i use a
FlatListinside aFieldArrayinside a component wrapped withwithNextInputAutoFocusFormCurrent behavior
inputs inside the
FlatListalways have thedonebuttonExpected behavior
inputs inside the
FlatListshould display thenextbutton when this is not the lastTechnical detail
FlatListhas arenderItemprop but doesn't have thechildrenpropso,
getInputscan find the inputs because it searchchildrenpropreact-native-formik/src/withNextInputAutoFocus.js
Lines 11 to 19 in ab0a017
Demo
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