ViewPropTypes from react-native undefined, causing TypeError on the 'style' prop

[sajidrocks]

Issue summary

react-native-multi-select.js is failing to compile with TypeError: Cannot read property 'style' of undefined. The error appears to be for any reference made to ViewPropTypes. I have run 'yarn outdated' to check my node module versions and dependencies; nothing wrong stood out for me.

My app is built/run using "react-app-rewired start" with a few customize-cra rules in the config-overrides.js.

Any help/idea would be appreciated.

Library versions

react: ^17.0.1
react-native: 0.63.3
react-native-multiple-select: ^0.5.6

Steps to Reproduce

This error shows up for "import MultiSelect from 'react-native-multiple-select'" line in my code when "react-app-rewired start" is run.

Expected Behavior

I expected ViewPropTypes.style from react-native to not cause any problems, and the multiple select list would show up in my app.

Actual Behavior

Commenting out all the lines that reference ViewPropTypes.style bypasses the compilation issue, but obviously that's not desirable. For example, these lines:

In react-native-multi-select.js    
   styleDropdownMenu: ViewPropTypes.style,
    styleDropdownMenuSubsection: ViewPropTypes.style,
    styleInputGroup: ViewPropTypes.style,
    styleItemsContainer: ViewPropTypes.style,

[AugustoAleGon]

@sajidrocks are you using a Typescript version?

[sajidrocks]

@sajidrocks are you using a Typescript version?

@AugustoAleGon , thanks for looking into it. No, I am not using a Typescript version.

[AugustoAleGon]

Ok. Let me take a look. Can you post a snippet of the code?

[sajidrocks]

Ok. Let me take a look. Can you post a snippet of the code?

Please see below. FYI - the MultiSelect component is embedded inside a react-hook-form Controller, which is not even reached since the import triggers compilation, which fails with the error //import MultiSelect from 'react-native-multiple-select';

<View style={lstyles.localities}>
    <Text style={lstyles.localitiesLabel}>Preferred Work Localities</Text>
    <Controller
        name="localities"
        control={control}
        rules={{required: true}}
        defaultValue=""
        render={({onChange, onBlur, value}) => (
            <MultiSelect
                items={localitiesRefData}
                uniqueKey="id"
                onSelectedItemsChange={this.onSelectedItemsChange}
                ref={(component) => {this.multiSelect = component}}
                selectedItems={localities}
                selectText="Select Localities"
                searchInputPlaceholderText="Search localities..."
                displayKey="name"
            />
            )}
    />
    {errors.localities && (
        <Text style={lstyles.fieldsInvalidErrMsg}>Required</Text>
    )}
</View>

[AugustoAleGon]

Can you please remove the node_modules folder and run yarn ?

I am testing right now with the latest RN version and all is looking good.

[AugustoAleGon]

I see what the problem is. Trying just to wrap the component around a View

[sajidrocks]

Following your suggestions, I removed the node_modules folder and ran yarn, first with a View wrapping the component and then without the View but I am afraid to say, in both of these cases, it made no difference for me. Same error. Thanks so much for continuing to look into it.

[28harishkumar]

I see what the problem is. Trying just to wrap the component around a View

Any progress on this? Is there any temporary solution other than commenting propTypes?