TypeError: Cannot read property 'modes' of undefined

[reamal]

Who has encountered a similar problem to me, this code says that modes cannot be found。

"react-native-ui-lib": "^7.6.2"

import { Picker } from "react-native-ui-lib";

<Picker
                    value={this.state.personValue}
                    onChange={this.changePerson}
                    mode={Picker.modes.SINGLE}
                    showSearch=true
                    searchPlaceholder={'筛选人员'}
                    searchStyle={{ color: Colors.blue30, placeholderTextColor: Colors.dark50 }}
                >
                    {_.map(this.state.personData, filter => (
                        <Picker.Item key={filter.value} value={filter} />
                    ))}
                </Picker>

### Tasks

[ethanshar]

@NitzanWix Can you take a look

[reamal]

and my version is: react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.6 wanted: 0.72.6

[nitzanyiz]

Hey, Could you try to update ui-lib and see if it still happens?

[reamal]

hey, i use version is 7.9.1 , and it still happen.

this my package.json

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "^2.13.4",
    "react-native-reanimated": "^3.5.4",
    "react-native-ui-lib": "^7.9.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

this is my app.tsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type { PropsWithChildren } from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import PickerElemet from './src/PickerElement'

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({ children, title }: SectionProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <View style={{ height: 640, width: 360, borderColor: "#ff0000", borderWidth: 0.5 }}>
            <PickerElemet></PickerElemet>
          </View>

        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

and this is my test code -> PickerElemet

import _ from 'lodash';
import React, { Component } from 'react';
import { ScrollView } from 'react-native-gesture-handler';
import {
    View,
    Colors,
    Icon,
    Incubator,
    Text,
    Picker,
    Avatar,
    Assets,
    PanningProvider,
    Typography,
    PickerProps,
    PickerMethods,
    Button
} from 'react-native-ui-lib'; //eslint-disable-line
import contactsData from './conversations';

const tagIcon = require('./assets/tags.png');
const dropdown = require('./assets/chevronDown.png');
const dropdownIcon = <Icon source={dropdown} tintColor={Colors.$iconDefault} />;

const contacts = _.map(contactsData, (c, index) => ({ ...c, value: index, label: c.name }));

const options = [
    { label: 'JavaScript', value: 'js' },
    { label: 'Java', value: 'java' },
    { label: 'Python', value: 'python' },
    { label: 'C++', value: 'c++', disabled: true },
    { label: 'Perl', value: 'perl' }
];
const filters = [
    { label: 'All', value: 0 },
    { label: 'Draft', value: 1 },
    { label: 'Published', value: 2 },
    { label: 'Scheduled', value: 3 }
];

const schemes = [
    { label: 'Default', value: 1 },
    { label: 'Light', value: 2 },
    { label: 'Dark', value: 3 }
];

export default class PickerScreen extends Component {
    picker = React.createRef ();
    state = {
        itemsCount: 1,
        // language: {value: 'java', label: 'Java'},
        language: undefined,
        language2: options[2].value,
        languages: [],
        nativePickerValue: 'java',
        customModalValues: [],
        filter: filters[0].value,
        scheme: schemes[0].value,
        contact: 0
    };

    renderDialog = modalProps => {
        const { visible, children, toggleModal, onDone } = modalProps;

        return (
            <Incubator.Dialog
                visible={visible}
                onDismiss={() => {
                    onDone();
                    toggleModal(false);
                }}
                width="100%"
                height="45%"
                bottom
                useSafeArea
                containerStyle={{ backgroundColor: Colors.$backgroundDefault }}
                direction={PanningProvider.Directions.DOWN}
                headerProps={{ title: 'Custom modal' }}
            >
                <ScrollView>{children}</ScrollView>
            </Incubator.Dialog>
        );
    };

    render() {
        return (
            <ScrollView keyboardShouldPersistTaps="always">
                <View flex padding-20>
                    <Text text40 $textDefault>
                        Picker
                    </Text>

                    <Picker
                        placeholder="Favorite Languages (up to 3)"
                        value={this.state.languages}
                        onChange={items => this.setState({ languages: items })}
                        mode={Picker.modes.MULTI}
                        selectionLimit={3}
                        trailingAccessory={dropdownIcon}
                    >
                        {_.map(options, option => (
                            <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled} />
                        ))}
                    </Picker>

                    <Picker
                        label="Wheel Picker"
                        placeholder="Pick a Language"
                        useWheelPicker
                        // useWheelPicker
                        value={this.state.nativePickerValue}
                        onChange={nativePickerValue => this.setState({ nativePickerValue })}
                        trailingAccessory={<Icon source={dropdown} />}
                    // containerStyle={{marginTop: 20}}
                    // renderPicker={() => {
                    //   return (
                    //     <View>
                    //       <Text>Open Native Picker!</Text>
                    //     </View>
                    //   );
                    // }}
                    // topBarProps={{doneLabel: 'YES', cancelLabel: 'NO'}}
                    >
                        {_.map(options, option => (
                            <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled} />
                        ))}
                    </Picker>

                    <Picker
                        label="Custom modal"
                        placeholder="Pick multiple Languages"
                        value={this.state.customModalValues}
                        onChange={items => this.setState({ customModalValues: items })}
                        mode={Picker.modes.MULTI}
                        trailingAccessory={dropdownIcon}
                        renderCustomModal={this.renderDialog}
                    >
                        {_.map(options, option => (
                            <Picker.Item
                                key={option.value}
                                value={option.value}
                                label={option.label}
                                labelStyle={Typography.text65}
                                disabled={option.disabled}
                            />
                        ))}
                    </Picker>

                    <Text marginB-10 text70 $textDefault>
                        Custom Picker:
                    </Text>
                    <Picker
                        value={this.state.filter}
                        onChange={filter => this.setState({ filter })}
                        renderPicker={(_value, label) => {
                            return (
                                <View row>
                                    <Icon
                                        style={{ marginRight: 1, height: 16, resizeMode: 'contain' }}
                                        source={tagIcon}
                                        tintColor={Colors.$iconDefault}
                                    />
                                    <Text $textDefault text80>
                                        {label} Posts
                                    </Text>
                                </View>
                            );
                        }}
                    >
                        {_.map(filters, filter => (
                            <Picker.Item key={filter.value} value={filter.value} label={filter.label} />
                        ))}
                    </Picker>

                    <Text marginT-20 marginB-10 text70 $textDefault>
                        Custom Picker Items:
                    </Text>
                    <Picker
                        ref={this.picker}
                        value={this.state.contact}
                        onChange={contact => {
                            this.setState({ contact });
                        }}
                        // getItemValue={contact => contact?.value}
                        renderPicker={(contactValue) => {
                            const contact = contacts[contactValue] ?? undefined;
                            return (
                                <View row>
                                    {contact ? (
                                        <>
                                            <Avatar size={30} source={{ uri: contact?.thumbnail }} />
                                            <Text text70 marginL-10 $textDefault>
                                                {contact?.name}
                                            </Text>
                                        </>
                                    ) : (
                                        <Text text70 $textNeutral>
                                            Pick a contact
                                        </Text>
                                    )}
                                </View>
                            );
                        }}
                    >
                        {_.map(contacts, contact => (
                            <Picker.Item
                                key={contact.name}
                                value={contact.value}
                                label={contact.label}
                                renderItem={(contactValue, props) => {
                                    const contact = contacts[contactValue ];
                                    return (
                                        <View
                                            style={{
                                                height: 56,
                                                borderBottomWidth: 1,
                                                borderColor: Colors.$backgroundNeutral
                                            }}
                                            paddingH-15
                                            row
                                            centerV
                                            spread
                                        >
                                            <View row centerV>
                                                <Avatar size={35} source={{ uri: contact?.thumbnail }} />
                                                <Text marginL-10 text70 $textDefault>
                                                    {contact?.name}
                                                </Text>
                                            </View>
                                            {props.isSelected && <Icon source={Assets.icons.check} tintColor={Colors.$iconDefault} />}
                                        </View>
                                    );
                                }}
                                getItemLabel={contactValue => contacts[contactValue]?.name}
                            />
                        ))}
                    </Picker>

                    <Button
                        label="Open Picker Manually"
                        link
                        style={{ alignSelf: 'flex-start' }}
                        onPress={() => this.picker.current?.openExpandable?.()}
                    />

                    <Text text60 marginT-s5>
                        Different Field Types
                    </Text>
                    <Text text80 marginB-s5>
                        (Form/Filter/Settings)
                    </Text>

                    <Picker
                        value={this.state.filter}
                        onChange={value => this.setState({ filter: value })}
                        placeholder="Filter posts"
                        fieldType={Picker.fieldTypes.filter}
                        marginB-s3
                    >
                        {filters.map(filter => (
                            <Picker.Item key={filter.value} {...filter} />
                        ))}
                    </Picker>

                    <Picker
                        value={this.state.scheme}
                        onChange={value => this.setState({ scheme: value })}
                        label="Color Scheme"
                        placeholder="Filter posts"
                        fieldType={Picker.fieldTypes.settings}
                    >
                        {schemes.map(scheme => (
                            <Picker.Item key={scheme.value} {...scheme} />
                        ))}
                    </Picker>
                </View>
            </ScrollView>
        );
    }
}