example of react-native multi-select with formik

Question

Does anybody have a working example of a react-native multi-select with formik? I already tried

import SectionedMultiSelect from 'react-native-sectioned-multi-select';

but the value array doesn't get submitted, but instead get an empty array.

Thank you.

Answer 1

there you have, hope you're reading the docs for both libraries. I'm doing that and it was just joining the code. it should work.

// Formik x React Native example
import React from 'react';
import { Button, TextInput, View } from 'react-native';
import { Formik } from 'formik';    
import Icon from 'react-native-vector-icons/MaterialIcons';
import SectionedMultiSelect from 'react-native-sectioned-multi-select';

const items = [
  {
    name: 'Fruits',
    id: 0,
    // these are the children or 'sub items'
    children: [
      { name: 'Apple', id: 10 },
      { name: 'Strawberry', id: 17 },                 
    ],
  },
];

export const MyReactNativeForm = props => (
  <Formik
    initialValues={{ items: [] }}
    onSubmit={values => console.log(values)}
  >
    {({ handleChange, handleBlur, handleSubmit, values }) => (
      <View>
        <SectionedMultiSelect
          items={items}
          IconRenderer={Icon}
          uniqueKey="id"
          subKey="children"
          selectText="Choose some things..."
          showDropDowns={true}
          readOnlyHeadings={true}              
          onSelectedItemsChange={handleChange('items')}
          selectedItems={values.items}
        />
        <Button onPress={handleSubmit} title="Submit" />
      </View>
    )}
  </Formik>
);