"malformed calls from JS field sizes are different" error on Android - react-native

Question

I'm using React-Native.I'm living trouble with Picker component on Android. I use Picker from Native-Base Library. Here is my Picker code with it's parent view.

<View style={{height: 40, marginTop: 20}}>

                    <Label style={{fontWeight: 'bold', color: '#d7d7d7'}}>Phone</Label>
                    <View style={{flexDirection: 'row',width: '100%',borderWidth: 1, borderColor: '#d7d7d7', height: 40}}>
                        <View style={{flexDirection: 'row',width: '30%', height: '100%' ,backgroundColor: '#d7d7d7', alignItems: 'center'}}>
                            <Picker style={{width: 100, height: '100%', marginLeft: 5}}
                                    selectedValue={this.state.selectedCountry}
                                    onValueChange={(value)=>this.onCodeChanged(value)}>
                                <Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
                                    <Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+90.png')}/> +90</Text>} value="+90"/>
                                <Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
                                    <Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+44.png')}/> +44</Text>} value="+44"/>
                                <Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
                                    <Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+1.png')}/> +1</Text>} value="+1"/>
                            </Picker>
                        </View>
                        <Input keyboardType={'numeric'} style={{width: '70%', height: '100%'}} value={this.state.phone} onChangeText={(value)=>this.setState({phone: value},()=>console.log("Phone State: ", this.state.phone))}/>
                    </View>

</View>

Here is how Picker looks like in IOS

And here is the error screen I get on android.

It seems the problem is Picker.Item's Labelcontent. When I changed the content of label from Text to usual, ordinary string, it works fine on android, as well. But, somehow I need the flag and code together in Picker.Item I hope there is someone who faced & handled this issue before.

Dimmer

NativeBase Picker for Android is an implementation of React Native Picker. From RN Picker source code label should be a string. Passing a component to label will be invalid – Sheryllshetland

Have you found any solution ? – Basuto

I got this when using height: 100% in an Animated.View as a default value – Mada

Answer 1

I faced the same problem while using Country Code Picker, In my case I need only 2 countries, so I created a static JSON

export const CountryCodes = [
  {
    label: "+91",
    value: "91",
    flag: INDIA_FLAG,
    name: "India",
    flag_string: "🇮🇳",
  },
  {
    label: "+1",
    value: "1",
    flag: US_FLAG,
    name: "United States",
    flag_string: "🇺🇸",
  }
]

and then I created a Custom Component RadioButtonCountryCodeSelector

interface Item {
    label: string;
    value: string;
    flag: any;
    name: string;
}

interface RadioProps {
    value : string;
    disabled? : boolean;
    onPress?(value: any): void;
    style?: StyleProp<ViewStyle>;
    title: string;
    length?: number;
    item?: any;
}
    

const RadioButtonCountryCodeSelector: FC<RadioProps> = (props) => {

    const theme = setThemeJSON();

    const { disabled = false, style, value, onPress, length = 0, item } = props;

    return (
        <View style={[style, shadowStyle, {
            elevation: 10,
            width: '100%',
            opacity: disabled ? 0.4 : 1,
            borderWidth: 0,
            backgroundColor: '#ffffff',
            shadowColor: 'transparent',
            borderRadius: 0,
            marginTop: 0,
            borderColor: 'transparent',
        }]}>
            <TouchableWithoutFeedback
                disabled={disabled}
                onPress={() => onPress && onPress(value)}
            >

                <View style={{ paddingHorizontal: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', margin: 10 }}>
                    <Image source={item?.flag} style={{ height: 25, width: 25 }} resizeMode={resizeMode.contain}/>

                    <TextComponent fontSize={14} fontFamily={MontserratSemiBold} //checked ? MontserratSemiBold : MontserratMedium}
                               color={theme?.theme?.DEFAULT_TEXT_COLOR }
                               styles={{ letterSpacing: 1.1 }}
                               value={item?.name}/>

                    <TextComponent fontSize={14} fontFamily={MontserratSemiBold} //checked ? MontserratSemiBold : MontserratMedium}
                               color={theme?.theme?.DEFAULT_TEXT_COLOR }
                               styles={{ letterSpacing: 1.1 }}
                               value={props.title}/>
                </View>

            </TouchableWithoutFeedback>
        </View>
    )
};

const styles = StyleSheet.create({
    radio: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    item: {
        marginLeft: 5,
        alignItems: 'center',
        justifyContent: 'center',
    }
});

export default RadioButtonCountryCodeSelector;

and then Implemented the above component as

<RadioGroup
        onValueChange={async (value) => {
            setSelected(value);
            if (value && value !== selected) {
                hideModel(value);
            }
        } }
        selectedValue={selected}
    >
        {
            CountryCodes && CountryCodes.map((item, index) => {
                return <RadioButtonCountryCodeSelector key={index}
                                                    item={item}
                                                    value={item?.value}
                                                    title={item?.label}
                                                    length={CountryCodes.length}
                />
            })
        }

</RadioGroup>

Mcbrayer