Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

withNextInputAutoFocus doesn't work with FlatList

オープン
  • 何か問題がありますか？
#145 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
42/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
javascript, react-native
領域
mobile

調査の方向性

src/withNextInputAutoFocus.js、特に issue で参照されている getInputs ロジックから始め、提供されている FlatList/FieldArray の例を再現してください。FlatList の renderItem を通じてレンダリングされた inputs がどのように検出されるかを確認してください。done は最後の input にのみ表示され、それより前の inputs には next が表示されるはずです。

索引モデルが issue の本文から書いたものです。

説明

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
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 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

主要言語
JavaScript
スター
397
フォーク
47
30日以内にマージされた PR はありません

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

bamlab/react-native-formik のほかの issue

bamlab/react-native-formik の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。