'ViewPropTypes' is not supported in 'react-native-web' v12.0 onwards

[kkapilchoubisa]

Getting following error while running my app with react-native-web-swiper:

./node_modules/react-native-web-swiper/build/Badge.js
Attempted import error: 'ViewPropTypes' is not exported from 'react-native'.

My code is below:

    const carouselItems = carouselData.map((data, index)=>{
      return renderCarouselView(data, index);
    })
    return (
      <Swiper>
        { carouselItems }
      </Swiper>
    );

[kkapilchoubisa]

I was trying to figure out the problem and I found that react-native-web version 12.0 and onwards do not support ViewPropType.

[dantenol]

Any updates on how to fix that?

[dantenol]

So, as the last issue reported, this package no longer works work with the latest react-native-web because ViewPropTypes is deprecated (more on the release note). The Controls, Swiper and Badge files used this method for validation of styles received as props.

The solution is pretty easy, basically use PropTypes.shape() for number, array or object.

Can i submit a PR for that?

[ozcanzaferayan]

I forked repo and fixed this issue: https://github.com/ozcanzaferayan/react-native-web-swiper

[wkngau219]

Hi, any plan to merge ozcanzaferayan's fix and release?

[oxyii]

@ozcanzaferayan Thank you for your help. Changes from your fork already merged as diff.

@kei-ngau @dantenol @kkapilchoubisa Please try 2.1.1

[oxyii]

@ozcanzaferayan Can you take this repo (and npm package) for maintaining? #42

[flyskywhy]

npm install --save-dev react-app-rewired

Create a config-overrides.js in your project root

// used by react-app-rewired

const webpack = require('webpack');
const path = require('path');

module.exports = {
  webpack: function (config, env) {
    config.module.rules[1].use[0].options.baseConfig.extends = [
      path.resolve('.eslintrc.js'),
    ];

    const webAliases = {
      'react-native': path.resolve('web/aliases/react-native'),
    };
    Object.assign(config.resolve.alias, webAliases);

    config.plugins.push(
      new webpack.DefinePlugin({
        __DEV__: process.env.NODE_ENV !== 'production',
      }),
    );

    return config;
  },
  paths: function (paths, env) {
    paths.appIndexJs = path.resolve('index.web.js');
    paths.appSrc = path.resolve('.');
    paths.moduleFileExtensions.push('ios.js');
    return paths;
  },
};

Also create a web/aliases/react-native/index.js

// ref to https://levelup.gitconnected.com/react-native-typescript-and-react-native-web-an-arduous-but-rewarding-journey-8f46090ca56b

import {Text as RNText, Image as RNImage} from 'react-native-web';
// Let's export everything from react-native-web
export * from 'react-native-web';

// And let's stub out everything that's missing!
export const ViewPropTypes = {
  style: () => {},
};
RNText.propTypes = {
  style: () => {},
};
RNImage.propTypes = {
  style: () => {},
  source: () => {},
};

export const Text = RNText;
export const Image = RNImage;
// export const ToolbarAndroid = {};
export const requireNativeComponent = () => {};

Now you can just run react-app-rewired start instead of react-scripts start

[danzeeeman]

This is still a problem

[danzeeeman]

what is the solution? why did something get deprecated when it is still being used in many many packages and examples?

[frknltrk]

change all ViewPropTypes.style to PropTypes.style in the source code don't forget to import PropTypes from "prop-types"; which requires npm install prop-types