razorpay / blade

Design System that powers Razorpay
https://blade.razorpay.com
MIT License
509 stars 143 forks source link

[react-native][tabs] Error - Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager #1847

Closed gupta-ji6 closed 7 months ago

gupta-ji6 commented 11 months ago

Description

When I used the Tabs component inside react-native, I got the error stack trace attached below. It was resolved for me by adding react-native-pager-view as a dependency in the project.

(ref - slack thread)

Error ``` ERROR Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager. This error is located at: in RNCViewPager (created by PagerView) in PagerView in Unknown (created by PagerViewAdapter) in PagerViewAdapter (created by TabView) in RCTView (created by View) in View (created by TabView) in TabView (created by Tabs) in Tabs (created by TransactionTabs) in TransactionTabs (created by TransactionList) in RCTView (created by View) in View in StyledNativeComponent (created by Styled(View)) in Styled(View) (created by BaseBox) in _BaseBox (created by Box) in _Box (created by TransactionList) in RNCSafeAreaView in Unknown (created by SafeAreaView) in SafeAreaView (created by TransactionList) in TransactionList (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View in CardSheet (created by Card) in RCTView (created by View) in View in Unknown (created by PanGestureHandler) in PanGestureHandler (created by PanGestureHandler) in PanGestureHandler (created by Card) in RCTView (created by View) in View in Unknown (created by Card) in RCTView (created by View) in View (created by Card) in Card (created by CardContainer) in CardContainer (created by CardStack) in RNSScreen in Unknown (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by MaybeScreen) in MaybeScreen (created by CardStack) in RNSScreenContainer (created by ScreenContainer) in ScreenContainer (created by MaybeScreenContainer) in MaybeScreenContainer (created by CardStack) in RCTView (created by View) in View (created by Background) in Background (created by CardStack) in CardStack (created by HeaderShownContext) in RCTView (created by View) in View (created by SafeAreaInsetsContext) in SafeAreaProviderCompat (created by StackView) in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by StackNavigator) in StackNavigator (created by Navigation) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by Navigation) in Navigation (created by Wrapper) in AuthProvider (created by Wrapper) in ErrorBoundary (created by Wrapper) in BottomSheetStackProvider (created by BladeProvider) in ThemeProvider (created by BladeProvider) in PortalProviderComponent (created by BladeProvider) in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by BladeProvider) in BladeProvider (created by Wrapper) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by Wrapper) in QueryClientProvider (created by PersistQueryClientProvider) in PersistQueryClientProvider (created by Wrapper) in Wrapper in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in wallet_mobile_app(RootComponent), js engine: hermes ```

Expectation

Ideally, blade consumers shouldn't need to install this package separately in their repo as it's expected to be shipped with the blade itself.

As per the setup, react-native-pager-view package is required by react-native-tab-view & both are getting shipped with the blade as per yarn why command but error still persists.

image

Environment

"@razorpay/blade": "10.18.1",
"@react-navigation/native": "6.1.6",
"@react-navigation/stack": "6.3.16",
"react": "18.2.0",
"react-native": "0.72.5",
"react-native-reanimated": "3.5.4",
"react-native-safe-area-context": "4.7.2",
"react-native-screens": "3.25.0",
saurabhdaware commented 7 months ago

Its added in documentation and peer dependency so closing this