'UI-Kitten' Select Component not rendering value

Question

I am using react naitve with UI-kitten and formik to build a registration form. I am using select component of ui kitten inside formik. I am not been able to get the selected value from the component. It gives me the index of the selected item (in console.warn()) and the selected item does't appear in the field. It works fine with input and datePicker component.

    const formSchema = yup.object({
    name: yup.string().required("*Full Name is required"),
    gender: yup.string().required("*Gender is required"),
    dob: yup.string().required("*Date of birth is required"),})

    export default class Registration extends Component {
    render() {
        return (
            <Formik
                validationSchema={formSchema}
                initialValues={{
                    name: '',
                    gender: '',
                    dob: '',
                }}
                onSubmit={(values) => {
                    console.log(values)
                }}
            >
                {(props) => (

                    <ScrollView style={styles.containerStyle}>
                        <LinearGradient style={{ height: '100%' }}
                            colors={["#0C1248", "#D03737"]}>
                            <ScrollView contentContainerStyle={styles.scrollViewStyle}>
                                <Text style={styles.textStyle} category='h2'>Registration</Text>
                                <Input
                                    style={styles.inputView}
                                    value={props.values.name}
                                    status='primary'
                                    placeholder="Full Name"
                                    onChangeText={props.handleChange('name')}
                                />

                                <Text style={styles.errorText}>{props.touched.name && props.errors.name}</Text>

                                <Datepicker
                                    style={styles.inputView}
                                    date={props.values.dob}
                                    placeholder="Date of birth"
                                    onSelect={(dob) => { props.setFieldValue('dob', dob) }}
                                />

                                <Text style={styles.errorText}>{props.touched.dob && props.errors.dob}</Text>

                                <Select
                                    style={styles.inputView}
                                    value={props.values.gender}
                                    placeholder='Gender'
                                    onSelect={item => props.setFieldValue(
                                       'gender', item.value
                                    )}
                                >
                                    <SelectItem title='Male' />
                                    <SelectItem title='Female' />
                                </Select>

                              

                                <TouchableOpacity style={{ alignItems: "center", justifyContent: 'center' }}>
                                    <LinearGradient style={{ width: width / 1.25, padding: 12, borderRadius: 30 }}
                                        colors={["#D03737", "#0C1248"]}>
                                        <Text style={{ color: "white", textAlign: "center" }} onPress={props.handleSubmit}>Next</Text>
                                    </LinearGradient>
                                </TouchableOpacity>
                            </ScrollView>
                        </LinearGradient>
                    </ScrollView>

                )}
            </Formik>
        );
    }
}

score 2 · Accepted Answer · edited Aug 31 '22 at 13:04

2

You should refer the documentation https://akveo.github.io/react-native-ui-kitten/docs/components/select/overview#select

The select component doenst have a value prop, it has a selectedIndex props which will chose the item on the given index.

In your case you can do something like this

<Select
    style={styles.inputView}
    value={props.values.gender}
    placeholder='Gender'
    onSelect={item => props.setFieldValue(
    'gender', item.row == 0 ? 'Male' : 'Female'
    )}
    >
    <SelectItem title='Male' />
    <SelectItem title='Female' />
</Select>

Based on the state value you can find the index and vise versa. This will make sure that Select always getting an index value and your state always having a string.

edited Aug 31 '22 at 13:04

Gregoire Ducharme

1,095
12
24

answered Nov 01 '20 at 17:32

Guruparan Giritharan

15,660
4
27
50

I tried this. But it gives me an error - selectedIndex.equals is not a function. (In 'selectedIndex.equals(index)', 'selectedIndex.equals' is undefined) – zaid mohammad Nov 02 '20 at 09:03
is 'selectedIndex.equals' part of your code or it something from the library itself ? – Guruparan Giritharan Nov 02 '20 at 09:09
2

ok found it, you have to use React.useState(new IndexPath(0)); check that page i have given – Guruparan Giritharan Nov 02 '20 at 09:10
i am using class component so i cant use react hooks – zaid mohammad Nov 02 '20 at 09:11
But you will have to use the new IndexPath(0) as the default value – Guruparan Giritharan Nov 02 '20 at 09:14
i tried to add that in the initial values inside the formik and then use onSelect as you showed before but it gives me the same error – zaid mohammad Nov 02 '20 at 09:18
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/223972/discussion-between-guruparan-giritharan-and-zaid-mohammad). – Guruparan Giritharan Nov 02 '20 at 09:19

score 1 · Answer 2 · answered Nov 07 '21 at 16:57

I created the function "getSelectValue" which handles this for multi- and single select. Here is the slightly modified example code from UIKittenDocs for a Multiselect but you can just remove the property from the Select component for Singleselect.

import React from 'react';
import { StyleSheet } from 'react-native';
import { IndexPath, Layout, Select, SelectItem } from '@ui-kitten/components';

export const TAGS = [
  'Handwerk',
  'Bio',
  'Vegetarisch',
  'Vegan',
  'Glutenfrei',
  'Laktosefrei',
  'Natürlich'
];

function getSelectValue(selectedIndexPaths, options) {
  if (selectedIndexPaths.length) {
    // multiSelect
    return selectedIndexPaths
    .map((indexPath) => options[indexPath.row])
    .join(', ');
  } else {
    // singleSelect
    return options[selectedIndexPaths.row]
  }
}

export const SelectMultiSelectShowcase = () => {

  const [selectedTags, setSelectedTags] = React.useState([
    new IndexPath(0),
    new IndexPath(1),
  ]);

  return (
    <Layout style={styles.container} level='1'>
      <Select
        value={getSelectValue(selectedTags, TAGS)}
        multiSelect
        selectedIndex={selectedTags}
        onSelect={setSelectedTags}
      >
        {TAGS.map((tag, index) => 
          <SelectItem key={index} title={tag} />
        )}
      </Select>
    </Layout>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 128,
  },
});

'UI-Kitten' Select Component not rendering value

2 Answers2