tab view ReactNative issue

Question

I am having following issue I have added my code and screenshot. Can anyone guide me to solve this issue:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of SceneView.

This error is located at:
in RCTView (at SceneView.tsx:92)
in SceneView (at TabView.tsx:181)
in RCTView (at createAnimatedComponent.js:233)
in AnimatedComponent(Component) (at Pager.tsx:780)
in PanGestureHandler (at Pager.tsx:769)
in Pager (at TabView.tsx:75)
in RCTView (at TabView.tsx:133)
in TabView (at Test.js:47)
in RCTView (at Test.js:46)
in Test (at SceneView.js:9)
in SceneView (at StackView.tsx:269)
in RCTView (at CardContainer.tsx:171)
in RCTView (at CardContainer.tsx:170)
in RCTView (at Card.tsx:488)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:475)
in PanGestureHandler (at Card.tsx:468)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:464)
in RCTView (at Card.tsx:457)
in Card (at CardContainer.tsx:138)
in CardContainer (at CardStack.tsx:544)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at CardStack.tsx:121)
in MaybeScreen (at CardStack.tsx:537)
in RCTView (at CardStack.tsx:96)
in MaybeScreenContainer (at CardStack.tsx:444)
in CardStack (at StackView.tsx:377)
in KeyboardManager (at StackView.tsx:375)
in SafeAreaProviderCompat (at StackView.tsx:372)
in StackView (at StackView.tsx:41)
in StackView (at createStackNavigator.tsx:33)
in Unknown (at createNavigator.js:80)
in Navigator (at SceneView.js:9)
in SceneView (at StackView.tsx:269)
in RCTView (at CardContainer.tsx:171)
in RCTView (at CardContainer.tsx:170)
in RCTView (at Card.tsx:488)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:475)
in PanGestureHandler (at Card.tsx:468)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at Card.tsx:464)
in RCTView (at Card.tsx:457)
in Card (at CardContainer.tsx:138)
in CardContainer (at CardStack.tsx:544)
in RCTView (at createAnimatedComponent.js:151)
in AnimatedComponent (at CardStack.tsx:121)
in MaybeScreen (at CardStack.tsx:537)
in RCTView (at CardStack.tsx:96)
in MaybeScreenContainer (at CardStack.tsx:444)
in CardStack (at StackView.tsx:377)
in KeyboardManager (at StackView.tsx:375)
in RNCSafeAreaView (at src/index.tsx:26)
in SafeAreaProvider (at SafeAreaProviderCompat.tsx:34)
in SafeAreaProviderCompat (at StackView.tsx:372)
in StackView (at StackView.tsx:41)
in StackView (at createStackNavigator.tsx:33)
in Unknown (at createNavigator.js:80)
in Navigator (at createAppContainer.js:430)
in NavigationContainer (at App.js:20)
in App (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)

index.bundle?platform=ios&dev=true&minify=false:27606:43 createFiberFromTypeAndProps
index.bundle?platform=ios&dev=true&minify=false:27608:19 createFiberFromElement
index.bundle?platform=ios&dev=true&minify=false:27628:48 reconcileSingleElement
index.bundle?platform=ios&dev=true&minify=false:19154:51 reconcileChildFibers
index.bundle?platform=ios&dev=true&minify=false:19201:63 reconcileChildren
index.bundle?platform=ios&dev=true&minify=false:21139:50 updateHostComponent
index.bundle?platform=ios&dev=true&minify=false:21533:26 invokeGuardedCallbackImpl
index.bundle?platform=ios&dev=true&minify=false:12669:21 invokeGuardedCallback
index.bundle?platform=ios&dev=true&minify=false:12765:42 beginWork$$1
index.bundle?platform=ios&dev=true&minify=false:26886:34 performUnitOfWork
index.bundle?platform=ios&dev=true&minify=false:26024:30 workLoopSync
index.bundle?platform=ios&dev=true&minify=false:26006:45 renderRoot
index.bundle?platform=ios&dev=true&minify=false:25770:29 renderRoot
[native code]:0 runRootCallback
index.bundle?platform=ios&dev=true&minify=false:25531:34 runRootCallback
[native code]:0
index.bundle?platform=ios&dev=true&minify=false:16261:38 unstable_runWithPriority
index.bundle?platform=ios&dev=true&minify=false:42653:30 flushSyncCallbackQueueImpl
index.bundle?platform=ios&dev=true&minify=false:16256:28 flushSyncCallbackQueue
index.bundle?platform=ios&dev=true&minify=false:16245:35 scheduleUpdateOnFiber
index.bundle?platform=ios&dev=true&minify=false:25413:37 scheduleRootUpdate
index.bundle?platform=ios&dev=true&minify=false:27838:21 scheduleRoot
index.bundle?platform=ios&dev=true&minify=false:16809:42
index.bundle?platform=ios&dev=true&minify=false:41056:35 forEach
[native code]:0 performReactRefresh
index.bundle?platform=ios&dev=true&minify=false:41048:30 performReactRefresh
index.bundle?platform=ios&dev=true&minify=false:40854:48
index.bundle?platform=ios&dev=true&minify=false:480:40 _callTimer
index.bundle?platform=ios&dev=true&minify=false:30628:17 callTimers
index.bundle?platform=ios&dev=true&minify=false:30835:19 __callFunction
index.bundle?platform=ios&dev=true&minify=false:2681:49
index.bundle?platform=ios&dev=true&minify=false:2394:31 __guard
index.bundle?platform=ios&dev=true&minify=false:2635:15 callFunctionReturnFlushedQueue
index.bundle?platform=ios&dev=true&minify=false:2393:21 callFunctionReturnFlushedQueue
[native code]:0

Code:

import React, {Component} from 'react';
import {View, StyleSheet, SafeAreaView, Text, Button} from 'react-native';
import {
  TabViewAnimated,
  TabView,
  TabViewPage,
  TabBarTop,
} from 'react-native-tab-view';

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
      routes: [
        {key: '1', title: 'First'},
        {key: '2', title: 'Second'},
      ],
    };
  }

  _renderScene = ({route}) => {
    switch (route.key) {
      case '1':
        return <View style={{flex: 1, backgroundColor: '#ff4081'}} />;
      case '2':
        return <View style={{flex: 1, backgroundColor: '#673ab7'}} />;
      default:
        return null;
    }
  };

  _renderPage = props => (
    <TabViewPage {...props} renderScene={this._renderScene} />
  );

  render() {
    return (
      <View>
        <TabView
          navigationState={this.state}
          renderScene={this._renderPage}
          renderHeader={this._renderHeader}
          onIndexChange={index => this.setState({index})}
          style={styles.container}
        />
      </View>
    );
  }
}

I have added snapshot and code. Please guide me how to resolve it.

You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Did you check if one of those is the issue? — AMC

leMale leMale · Accepted Answer · 2020-02-06T01:10:51

The problem is that the Component's context is not available in _renderPage(). As you are calling this._renderScene in renderPage, it needs to be aware of the context / this to find the specific function. Whenever you are giving a function from your class component to another component, you need to also tell that it should inherit the component's context.

You can do this via bindings (renderScene={this._renderPage} to renderScene={this._renderPage.bind(this)}) or specify an anonymous function (renderScene={(data) => this._renderPage(data)}).

tab view ReactNative issue

1 Answers