TypeError: Cannot read property 'modes' of undefined
reamal opened this issue · comments
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>
@nitzanwix
Can you take a look
and my version is:
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.6
wanted: 0.72.6
Hey,
Could you try to update ui-lib and see if it still happens?
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>
);
}
}