Unable to resolve "../Utilities/Platform" w/ Metro bundler

[devoren]

Hey! Love this library ❤️. I have a problem with the lib when I use it in expo web where Metro is used as the bundler. I need to use metro because of expo router. Do you know how to solve the problem?

[andreialecu]

Could you clarify why you believe that error is related to this library?

[devoren]

@andreialecu When I remove the react-native-collapsible-tab-view import the error disappears

[devoren]

I downloaded example and tried to run it:

[devoren]

On the "native" works without any problem

[andreialecu]

Take a look through https://github.com/expo/expo/issues/16227 and related issues. I think it's an Expo issue of some sort.

[devoren]

Yes, I checked them all, but so far none of the solutions work :(

[devoren]

@andreialecu is it posibble to import file only if platform is mobile or native? I tried something like this:

var CollapsibleTabs =
    Platform.OS !== 'web' ? require('src/components/Home/Tabs/CollapsibleTabs') : null;

[andreialecu]

See the sections at the end of: https://reactnative.dev/docs/platform-specific-code

[devoren]

@andreialecu It helps, for now in "web" I use rn tab-view, but i hope the problem will be solved soon

[Jonatthu]

@sayem314 @devoren @andreialecu This is happening to me as well on web bundling and looks like it's due this library is accessing to private libraries from react native, https://github.com/callstack/react-native-pager-view/blob/master/src/PagerViewNativeComponent.ts

A solution could be to replace this just like react navigation did on web:

https://github.com/react-navigation/react-navigation/blob/main/packages/react-native-tab-view/src/Pager.tsx

Then on native you go back into react-native-pager-view

https://github.com/react-navigation/react-navigation/blob/main/packages/react-native-tab-view/src/PagerViewAdapter.tsx

This might be the most to copy from for be able to render on web:

https://github.com/react-navigation/react-navigation/blob/main/packages/react-native-tab-view/src/PanResponderAdapter.tsx

Another solution is to simply create a web version using https://reactnavigation.org/docs/tab-view/ And just adding header and lazy loading to it

[Jonatthu]

@andreialecu https://snack.expo.dev/@satya164/react-native-tab-view-custom-tabbar Please consider this web rendered version of a tabview I could make a PR for this but there is many strategies to achieve this, need more opinions over the topic.

[martinezguillaume]

that's a complicated question, or we create a PagerView web compatible (copy from rn tab-view) or directly using the whole rn tab-view only on web side

For me, as rn tab-view did, using a PagerView adapter only for web would be a good solution I think the purpose of this repo is to not use rn tab-view

[saulamsal]

Any update on this? Looking at the code, all we need is replace PagerView like rn tab-view does.

[oksana-vyshinskaya]

In my case it helped

alias: {
  'react-native$': require.resolve('react-native-web'),
}

RN Paper web support guide