Picker cannot be in Tab Components

[preflower]

🐛 Bug Report

Invariant Violation: [4,17,{"type":"frames","frames":[0,0.08333333333333333,0.16666666666666666,0.25,0.3333333333333333,0.4166666666666667,0.5,0.5833333333333334,0.6666666666666666,0.75,0.8333333333333334,0.9166666666666666,1],"toValue":"<>","iterations":1},1071] is not usable as a native method argument │ │ This error is located at: │ in TabIndicator (created by TabBar) │ in RCTView (created by TabBar) │ in TabBar (created by Context.Consumer) │ in Wrapper (created by TabBar) │ in TabBar (created by TabView) │ in RCTView (created by TabView) │ in TabView (at HomePage.js:78) │ in RCTView (at SafeAreaView.js:41)

To Reproduce

TabView -> Tab -> ScrollView -> Picker

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.0.0
@ui-kitten/components	5.0.0

[mrcoolbiz]

I have same problem too. This happen when i switch between light and dark team. And I found it's only happen when the first tab is not the tab that i have the switch button. Look like the animation of the tab when it switch from the default tab to current tab during the time it was rendering make the app get the error. Still looking for the solution but no luck.

[mrcoolbiz]

My error is: Invariant Violation: [36,297,{"type":"frames","frames":[0,0.08333333333333333,0.16666666666666666,0.25,0.3333333333333333,0.4166666666666667,0.5,0.5833333333333334,0.6666666666666666,0.75,0.8333333333333334,0.9166666666666666,1],"toValue":"<>","iterations":1},8423] is not usable as a native method argument

This error is located at: in TabIndicator (created by BottomNavigation) in RCTView (created by BottomNavigation) in BottomNavigation (created by Context.Consumer) in Wrapper (created by BottomNavigation) in BottomNavigation (at App.js:156) in BottomTabBar (at App.js:190) in RCTView (at BottomTabView.tsx:96) in SafeAreaProviderCompat (at BottomTabView.tsx:95) in BottomTabView (at createBottomTabNavigator.tsx:41) in BottomTabNavigator (at App.js:188) in TabNavigator (at SceneView.tsx:123) in StaticContainer in StaticContainer (at SceneView.tsx:115) in EnsureSingleNavigator (at SceneView.tsx:114) in SceneView (at useDescriptors.tsx:155) in RCTView (at CardContainer.tsx:199) in RCTView (at CardContainer.tsx:198) in RCTView (at CardSheet.tsx:33) in ForwardRef(CardSheet) (at Card.tsx:543) in RCTView (at createAnimatedComponent.js:151) in AnimatedComponent (at Card.tsx:525) in PanGestureHandler (at GestureHandler.native.tsx:13) in PanGestureHandler (at Card.tsx:519) in RCTView (at createAnimatedComponent.js:151) in AnimatedComponent (at Card.tsx:515) in RCTView (at Card.tsx:509) in Card (at CardContainer.tsx:168) in CardContainer (at CardStack.tsx:562) in RCTView (at Screens.tsx:70) in MaybeScreen (at CardStack.tsx:555) in RCTView (at Screens.tsx:48) in MaybeScreenContainer (at CardStack.tsx:465) in CardStack (at StackView.tsx:437) in KeyboardManager (at StackView.tsx:435) in RNCSafeAreaView (at src/index.tsx:28) in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42) in SafeAreaProviderCompat (at StackView.tsx:432) in RCTView (at StackView.tsx:431) in StackView (at createStackNavigator.tsx:82) in StackNavigator (at App.js:140) in AppSys (at App.js:235) in EnsureSingleNavigator (at BaseNavigationContainer.tsx:328) in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:80) in ThemeProvider (at NavigationContainer.tsx:79) in ForwardRef(NavigationContainer) (at App.js:234) in RCTView (created by ModalPanel) in ModalPanel (created by ApplicationProvider) in ThemeProvider (created by StyleProvider) in MappingProvider (created by StyleProvider) in StyleProvider (created by ApplicationProvider) in ApplicationProvider (at App.js:230) in App in ExpoRoot (at renderApplication.js:40) in RCTView (at AppContainer.js:101) in DevAppContainer (at AppContainer.js:115) in RCTView (at AppContainer.js:119) in AppContainer (at renderApplication.js:39)

fn NativeModules.js:137:10 API.startAnimatingNode NativeAnimatedHelper.js:84:6 __startNativeAnimation Animation.js:64:6 start TimingAnimation.js:104:38 start TimingAnimation.js:115:11 animate AnimatedValue.js:206:6 start AnimatedImplementation.js:205:26 start AnimatedImplementation.js:212:14 getComponentStyle tabIndicator.component.js:44:27 scrollToIndex AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:156616:28 TabIndicator#constructor tabIndicator.component.js:24:13 commitRootImpl

commitRoot

runRootCallback

dispatchAction

AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:127721:25 SceneView SceneView.tsx:42:2 React.useMemo$argument_0 useNavigationBuilder.tsx:269:6 callFunctionReturnFlushedQueue [native code]:0

[enestasdemir]

I have same problem with react-native-picker-select in View Pager component.

ViewPager > Layout > RNPickerSelect

ExceptionsManager.js:76 Invariant Violation: [3,3,{"type":"frames","frames":[0,0.05555555555555555,0.1111111111111111,0.16666666666666666,0.2222222222222222,0.2777777777777778,0.3333333333333333,0.3888888888888889,0.4444444444444444,0.5,0.5555555555555556,0.6111111111111112,0.6666666666666666,0.7222222222222222,0.7777777777777778,0.8333333333333334,0.8888888888888888,0.9444444444444444,1],"toValue":"<>","iterations":1},3747] is not usable as a native method argument

[enestasdemir]

I have same problem with react-native-picker-select in View Pager component.

ViewPager > Layout > RNPickerSelect

ExceptionsManager.js:76 Invariant Violation: [3,3,{"type":"frames","frames":[0,0.05555555555555555,0.1111111111111111,0.16666666666666666,0.2222222222222222,0.2777777777777778,0.3333333333333333,0.3888888888888889,0.4444444444444444,0.5,0.5555555555555556,0.6111111111111112,0.6666666666666666,0.7222222222222222,0.7777777777777778,0.8333333333333334,0.8888888888888888,0.9444444444444444,1],"toValue":"<>","iterations":1},3747] is not usable as a native method argument

It works normally on iOS, crashes only Android platform.

[perry-mitchell]

I'm having the same error with the most basic of setups:

function VaultMenu() {
    // snip
    return (
        <SafeAreaView>
            <Layout>
                <ViewPager
                    selectedIndex={selectedIndex}
                    onSelect={handlePageSelect}
                >
                    {vaults.map(vault => (
                        <Layout key={vault.id} level="2">
                            <Text>Testing</Text>
                            {/* <Card
                                header={props => <VaultCardHeader {...props} vault={vault} />}
                                style={styles.card}
                            >
                                <Text>Some Vault</Text>
                            </Card> */}
                        </Layout>
                    ))}
                </ViewPager>
            </Layout>
        </SafeAreaView>
    );
}

 Invariant Violation: [3,17,{"type":"frames","frames":[0,0.05555555555555555,0.1111111111111111,0.16666666666666666,0.2222222222222222,0.2777777777777778,0.3333333333333333,0.3888888888888889,0.4444444444444444,0.5,0.5555555555555556,0.6111111111111112,0.6666666666666666,0.7222222222222222,0.7777777777777778,0.8333333333333334,0.8888888888888888,0.9444444444444444,1],"toValue":"<<NaN>>","iterations":1},489] is not usable as a native method argument

This error is located at:
    in ViewPager (at VaultMenu.tsx:49)
    in RCTView (at View.js:34)
    in View (created by Layout)
    in Layout
    in Wrapper (created by Layout)
    in Layout (at VaultMenu.tsx:48)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in SafeAreaView (at VaultMenu.tsx:47)
    in VaultMenu (at HomeScreen.tsx:139)
    in RCTView (at View.js:34)
    in View (created by Layout)
    in Layout
    in Wrapper (created by Layout)
    in Layout (at HomeScreen.tsx:137)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in SafeAreaView (at HomeScreen.tsx:120)
    in HomeScreen (at SceneView.tsx:122)

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

[[74,74,74,74,74,74,74,74,74,74,74,74,74,74,3,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74,74],[9,3,10,2,12,2,2,12,12,10,2,2,12,12,3,10,2,2,2,2,2,12,2,17,12,12,12,12,12,10,2,2,2,2,17,12,12,12,12,12,19],[[33,77],[23,105],[22,23],[22],[21,23],[4,21],[21],[23],[25,3],[24,25],[4,24],[24],[25],[1],[28,97],[27,28],[26,27],[10,26],[11,10],[4,11],[11],[12,10],[12,533],[12],[10],[26],[27],[28],[30,5],[29,30],[15,29],[4,15],[16,4],[16,555],[16],[4],[15],[29],[30],[1]],243]

This error is located at:
    in ViewPager (at VaultMenu.tsx:49)
    in RCTView (at View.js:34)
    in View (created by Layout)
    in Layout
    in Wrapper (created by Layout)
    in Layout (at VaultMenu.tsx:48)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in SafeAreaView (at VaultMenu.tsx:47)
    in VaultMenu (at HomeScreen.tsx:139)
    in RCTView (at View.js:34)
    in View (created by Layout)
    in Layout
    in Wrapper (created by Layout)
    in Layout (at HomeScreen.tsx:137)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in SafeAreaView (at HomeScreen.tsx:120)
    in HomeScreen (at SceneView.tsx:122)

[perry-mitchell]

For me the error was the outer <Layout> I had - it was causing the error.

[ecemac]

Is there any solution to this? I'm still having the same problem.

[ycldz]

+