Cannot read property 'style' of undefined

[asdf23]

This error is found in the demo provided at https://snack.expo.io/@bd-arc/react-native-snap-carousel-%7C-example-with-custom-interpolations

I see the same issue in my own code.

[capelski]

Running fine on Android though. The error is raised in web only

[aioia]

TypeError: Cannot read property 'style' of undefined

node_modules/react-native-pages/src/components/indicator/index.js:9
   6 | 
   7 | export default class Indicator extends PureComponent {
   8 |   static propTypes = {
>  9 |     style: ViewPropTypes.style,
  10 | 
  11 |     pages: PropTypes.number.isRequired,
  12 |     progress: PropTypes.instanceOf(Animated.Value).isRequired,

npm install expo-cli@3.28.3 --global
expo init project
npm i -S react-native-snap-carousel
npm i -S @types/react-native-snap-carousel

and useing react-native-snap-carousel then error this. (web)

[richardkarlsen]

👀

[yacaeh]

Similar error for me on web only. Works fine on android device. TypeError: Cannot read property 'style' of undefined

Module.../../../react-native-snap-carousel/src/carousel/Carousel.js > 46 | containerCustomStyle: ViewPropTypes ? ViewPropTypes.style : View.propTypes.style,

[shwetankshrey]

Hey! Any fixes for this?

[Lovej4972]

Run the Application on mobile not desktop web

On Sat, Dec 26, 2020, 6:42 AM Shwetank Shrey <notifications@github.com wrote:

Hey! Any fixes for this?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/archriss/react-native-snap-carousel/issues/779#issuecomment-751321115, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMHCE2VZF5SAIZQRHRQ24RLSWVZTNANCNFSM4TOR4FIA .

[capelski]

Run the Application on mobile not desktop web

Sure, @Lovej4972! No problem when running on mobile. We'd like to get it working on desktop too though, since many of us use Expo, and we'd like to run the app as a web app from the same codebase.

[hcphoon01]

I get the same issue running snap carousel v3.9.1 on web

[sam-uraii]

I am having the same error plz help!!!! Somebody!!

[leon-do]

Same problem. looking for a solution

[capelski]

I've created a PR that fixes the issue on browsers: https://github.com/meliorence/react-native-snap-carousel/pull/820. I've never used React propTypes, so I'm not sure what consequences the fix might have. If anyone with experience on propTypes has a better solution I'll be happy to apply the changes. Cheers!

[BlameFelix]

This resolved the error for me. The carousel still doesn't work on web, but I think web is not supported by this libary anyway.

[capelski]

@BlameFelix Give a try at https://github.com/meliorence/react-native-snap-carousel/pull/820. I'm getting the carousel working on Google Chrome. What error do you get?

[BlameFelix]

Interessting. I haven't really looked into what exactly is wrong. So far it just didn't render the page. I was assuming that the libary just doesn't support web, as it says at reactnative.directory. I will check into it tomorrow

[BlameFelix]

@capelski all right I got it to work. Imo the underlying problem comes from react native web. This fixed it for me. Your PR also works but I think the fix at react native web is cleaner

[capelski]

@BlameFelix I don't understand how react-native-web is involved here 🤔 If you check the package.json in this repo, it is not registered as a dependency.

Leaving that aside, the solution provided in https://github.com/necolas/react-native-web/issues/1537#issuecomment-619969653 is a workaround, not a fix. The clean solution would be to modify the react-native-web source code, not adding a postinstall script in every package that uses react-native-web.

My PR provides the same mock as the solution you mention, but it makes it part of the react-native-snap-carousel code. What makes you feel the solution in react-native-web is cleaner?

[BlameFelix]

From my perspective the problem is this. And this library was made for rn, not rn web. That's why it didn't work before. The rn web developers don't want to support ViewPropTypes anymore, so from their side the problem will persist. But the developers here didn't show any interest in merging your pr, which might be because they don't support web. So that means we're by ourselves to make it work. Fixing it at react native web is just less code and by that the path of the least resistance.

[capelski]

@BlameFelix I've finally understood how react-native-web is involved; expo adds it as dependency to our project's package.json. So yes, fixing the issue in react-native-web would do the trick.

I've been reading about it and the situation here is that React Native deprecated propTypes in v0.60, so did react-native-web in v0.12:

That's why they closed https://github.com/necolas/react-native-web/issues/1537 last year. Seems that propTypes are gone for good. Being that the case, we can't count on react-native-web to fix the issue.

In fact, knowing about this deprecation, my fix (https://github.com/meliorence/react-native-snap-carousel/pull/820) is also a bad idea. We should align with the React Native evolution and remove propTypes instead of mocking the missing types.

[capelski]

I've created https://github.com/meliorence/react-native-snap-carousel/pull/836, removing references to ViewPropTypes instead of mocking the missing properties. Perhaps maintainers of the repo like this approach better even though is not the ideal fix: migrating to Flow types

[i6mi6]

As a temp workaround I went into node_modules/react-native-snap-carousel and replaced all appearances of ViewPropTypes and ViewPropTypes.style with PropTypes.any then patching using npx patch-package react-native-snap-carousel For example inside node_modules/react-native-snap-carousel/src/pagination/PaginationDot.js replaced ViewPropTypes ? ViewPropTypes.style : View.propTypes.style with PropTypes.any

[petrkrejcik]

If you don't mind using different Carousel component for web and native you can use codegen.macro as a workaround. The idea is that on web you will load a web-compatible component and on native you will load react-native-snap-carousel.

// webpack.config.js
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  process.env.IS_WEB = true; // <--- Add this
  return config;
};

// carousel/index.js
import codegen from 'codegen.macro';

codegen`
if (process.env.IS_WEB) {
  module.exports = "import { CarouselWeb as Carousel } from './Carousel.web'; export { Carousel };";
} else {
  module.exports = "import { Carousel } from './Carousel'; export { Carousel };";
}
`;

// carousel/Carousel.js
import React from 'react';
import CarouselLib from 'react-native-snap-carousel';

export const Carousel = () => {
  return (
    <CarouselLib
    // ...
    />
  );
};

// carousel/Carousel.web.js
import React from 'react';
import { Image } from 'react-native';

export const CarouselWeb = () => {
  return (
    <Image
    // ...
    />
  );
};

// App.js
import { Carousel } from 'carousel';

export default function App() {
  return <Carousel />;
}

[hirbod]

@petrkrejcik thats a very interesting approach. Does this work with expo? And how do you deal css/scss which is shipped with most of those web components? I am currently looking for a solution which stops preventing me from using expo but giving me the freedom to use default web components for the "web part" of my application while still be able to produce a native app.

Edit: your example worked perfectly. Also managed to load css and scss. Awesome!

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

[udemezue01]

I have these errors too, any help

[benjamingordon27]

still getting these errors on the web!

[Benj846]

we need this to support on web as well thanks!!

[YajanaRao]

+1

[zail59]

+1

[erjakhar96]

Still no update on this issue?

[udemezue01]

THanks, I fixed it already!

[batazo]

THanks, I fixed it already!

How?

[udemezue01]

I will send a screenshot of the code

On Sun, 10 Jul 2022, 3:05 pm Bata Zoltán, @.***> wrote:

THanks, I fixed it already!

How?

— Reply to this email directly, view it on GitHub https://github.com/meliorence/react-native-snap-carousel/issues/779#issuecomment-1179735446, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD2KU4MXWV5USGEFISC2QK3VTLKC7ANCNFSM4TOR4FIA . You are receiving this because you were mentioned.Message ID: @.***>

[bananemo]

@udemezue01 I've encountered the same issue, is it possible for you to share your solution? Thanks!

[capelski]

@bananemo Here you have one: https://github.com/meliorence/react-native-snap-carousel/pull/836/files

[bananemo]

@capelski Thanks a lot!

[Chris-Imade]

This error is found in the demo provided at https://snack.expo.io/@bd-arc/react-native-snap-carousel-%7C-example-with-custom-interpolations

I see the same issue in my own code.

facing this same error

[Chris-Imade]

Run the Application on mobile not desktop web … On Sat, Dec 26, 2020, 6:42 AM Shwetank Shrey @.*** wrote: Hey! Any fixes for this? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#779 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMHCE2VZF5SAIZQRHRQ24RLSWVZTNANCNFSM4TOR4FIA .

yeah but I want to run it on both

[PiyushKumar1918]

Just uninstall the current version

npm uninstall react-native-snap-carousel

Then install this

npm install --save react-native-snap-carousel@4.0.0-beta.6