Failed prop type: Invalid prop children of type object supplied to IGNORE

[riamon-v]

Describe the bug

While using the Picker of this library I get the following warning every-time

To Reproduce

1. Creating a basic Picker
2. Having a list of object, each object like so: {key: '..', label: '...', value: '...'}
3. Creating a list of Picker.Item by maping my list of object. Without lodash library, just the standard JS map function

Expected behavior

The picker is actually working, but i can't find why it is sending me this warning everytime. I checked the code here, and it seems i did the same except for lodash use and the key prop added to each object.

Code snippet

<Picker
	ref={ref}
	title={`${props.label}Picker`}
	floatingPlaceholder
	// migrate={true}
	placeholder={props.placeholder}
	value={props.value}
	onChange={props.onValueChange}
	floatingPlaceholderStyle={{
		...Typography.normal,
		fontSize: 16,
		color: Colors.placeholder,
		// marginLeft: Spacings.S - 3,
	}}
	style={[
		{
		...Typography.normal,
		color: Colors.text,
		top: props.label ? -8 : 0,
		paddingBottom: 15,
		paddingTop: 5,
		textAlign: props.label ? 'right' : 'left',
	       },
                props.label && { width: '50%' },
	]}
	renderRightIcon={() => (
		<TouchableOpacity
			onPress={ref?.current?.toggleExpandableModal}
		>
                  <Text>Toggle</Text>
               </TouchableOpacity>
	)}
	hideUnderline
	useNativePicker={!props.search}
	showSearch={props.search}
	wheelPickerProps={{
		items: props.items,
		textStyle: {
			fontSize: 15,
		},
	}}
>
	{props.items.map((option) => (
		<Picker.Item
			key={option.key}
			value={option.value}
			label={option.label}
			inputLabel={option.inputLabel ?? undefined}
			disabled={false}
			labelStyle={{
				...Typography.title,
				color: Colors.primary,
			}}
			selectedIconColor={Colors.highlight}
		/>
	))}
</Picker>

HERE is what I pass to my items props when using my custom component using the picker

items={itemsFromSomwhere.map((m) => ({
	value: m,
	label: m,
	key: m,
}))}

Screenshots

Device (please complete the following information)

IOS Emulator: Iphone 8

Additional context

[fledgling-vish]

following this

[mercatoid-ux]

Im getting the same thing

[surethink]

same issue, any workaround?

[M-i-k-e-l]

Hi @riamon-v,

I could not reproduce this in a new project with this code:

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

import React, {useState} from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  useColorScheme,
} from 'react-native';

import {
  Colors as RNColors,
  Header
} from 'react-native/Libraries/NewAppScreen';

import Picker from 'react-native-ui-lib/picker';

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 App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const [language, setLanguage] = useState();

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

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        
      <Picker
        migrate
        migrateTextField
        placeholder="Favorite Language"
        floatingPlaceholder
        value={language}
        enableModalBlur={false}
        onChange={item => setLanguage(item)}
        topBarProps={{title: 'Languages'}}
        showSearch
        searchPlaceholder={'Search a language'}
      >
        {options.map(option => (
          <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
        ))}
      </Picker>
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;

Perhaps I could try with your code if I could copy it (I do not understand why you chose to add a screenshot as a snippet).

[riamon-v]

Hi @riamon-v,

I could not reproduce this in a new project with this code:

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

import React, {useState} from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  useColorScheme,
} from 'react-native';

import {
  Colors as RNColors,
  Header
} from 'react-native/Libraries/NewAppScreen';

import Picker from 'react-native-ui-lib/picker';

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 App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const [language, setLanguage] = useState();

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

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        
      <Picker
        migrate
        migrateTextField
        placeholder="Favorite Language"
        floatingPlaceholder
        value={language}
        enableModalBlur={false}
        onChange={item => setLanguage(item)}
        topBarProps={{title: 'Languages'}}
        showSearch
        searchPlaceholder={'Search a language'}
      >
        {options.map(option => (
          <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
        ))}
      </Picker>
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;

Perhaps I could try with your code if I could copy it (I do not understand why you chose to add a screenshot as a snippet).

Hey @M-i-k-e-l , thanks for your interest.

I updated the issue with the code and further informations, please let me know if you have any questions

[M-i-k-e-l]

Hi @riamon-v,

When creating a ticket you should try to make it self contained (what is ms for example?) and as small as possible (is Feather required here?).

With that said, I removed some things that should not matter (padding the renderRightIcon etc), the main changes I did were:

title -> label={...}
migrate
migrateTextField

Full example:

import React, {useState, useMemo, useCallback} from 'react';
import {SafeAreaView} from 'react-native';
import {Colors, View, Text, Picker, Typography} from 'react-native-ui-lib';

const itemsFromSomewhere = ['a', 'b', 'c', 'd'];
const showSearch = true;

export default function App() {
  const [value, setValue] = useState('a');

  const items = useMemo(() => {
    return itemsFromSomewhere.map(m => ({
      value: m,
      label: m,
      key: m
    }));
  }, [itemsFromSomewhere]);

  const onValueChange = useCallback(
    val => {
      setValue(val);
    },
    [setValue]
  );

  return (
    <View flex bg-red30>
      <SafeAreaView style={{flex: 1}}>
        <Text>Title</Text>

        <Picker
          label={'bla'}
          floatingPlaceholder
          migrate
          migrateTextField
          placeholder={'placeholder'}
          value={value}
          onChange={onValueChange}
          floatingPlaceholderStyle={{
            ...Typography.normal,
            color: Colors.placeholder
            // marginLeft: Spacings.S - 3,
          }}
          style={[
            {
              ...Typography.normal,
              color: Colors.text,
              top: 0,
              paddingBottom: 10,
              paddingTop: 10,
              textAlign: 'right'
            },
            {width: '50%'}
          ]}
          hideUnderline
          useNativePicker={!showSearch}
          showSearch={showSearch}
          wheelPickerProps={{
            items
          }}
        >
          {items.map(option => (
            <Picker.Item
              key={option.key}
              value={option.value}
              label={option.label}
              inputLabel={option.inputLabel ?? undefined}
              disabled={false}
              labelStyle={{
                ...Typography.title,
                color: Colors.primary
              }}
              selectedIconColor={Colors.highlight}
            />
          ))}
        </Picker>
      </SafeAreaView>
    </View>
  );
}

I did not see the warnings you have mentioned.

Perhaps you (or anyone in this thread) can provide a project in which this is reproduced?

[riamon-v]

Well it's not fixing the error in my project currently.
I use RNUiLib version 5.28.0, this may be the issue, but can't upgrade in the project for now

[M-i-k-e-l]

Sorry, but I'm closing this ticket; that is not even the latest major version, which is 6 and will probably be 7 soon.