React-native-tab-view: Invariant Violation Element Type - error located in SceneComponent

[mhannan]

Current behaviour

I just tried to run your example code in my React-Native app, building using expo, it throws an error just before screen loads.

Error: 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 SceneComponent. This error is located at: in SceneComponent (at SceneMap.js:16

Expected behaviour

Should display the tabs view as shown in your documentation sample code.

Code sample

Screenshots (if applicable)

import React from 'react';
import { ScrollView, StyleSheet, SectionList,View, Text, TouchableHighlight, Image, Dimensions  } from 'react-native';
import images from '@assets/images';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

const FirstRoute = () => (
    <View style={[styles.tabScene, { backgroundColor: '#ff4081' }]} />
);
const SecondRoute = () => (
    <View style={[styles.tabScene, { backgroundColor: '#673ab7' }]} />
);
const ThirdRoute = () => (
<View style={[styles.tabScene, { backgroundColor: '#683327' }]} />
);

export default class ChatThreadsScreen extends React.Component {
    static navigationOptions = {
        title: 'Bookings',
        headerStyle: {
        backgroundColor: '#0087e2',
    },
    headerTintColor: '#fff',

  };

constructor(props){
    super(props);
    this.section1_items = [
        { 'title': 'George',

          'photo': images.AVATAR_STUDENT,
          'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
          'time': 'yesterday'
        },
        { 'title': 'Harry', 
          'photo': images.AVATAR_STUDENT2,
          'text': 'Nulla sit amet nulla nec odio varius luctus id sed dui.',
          'time': '2 days ago'
        },
        { 'title': 'Jack', 
          'photo': images.AVATAR_STUDENT3,
          'text': 'Sed ac nunc at nunc tincidunt hendrerit et nec tellus.',
          'time': '1 week ago'
        }];
    this.section2_items = [
        { 'title': 'Jacob', 
          'photo': images.AVATAR_STUDENT4,
          'text': 'In tempus tortor sed tempus blandit.',
          'time': '1 month ago'
        },
        { 'title': 'Charlie', 
          'photo': images.AVATAR_STUDENT5,
          'text': 'Vivamus nec nunc quis leo aliquet gravida.',
          'time': '1 month ago'
        }];  
    this.section3_items = [
        { 'title': 'Harry', 
          'photo': images.AVATAR_STUDENT2,
          'text': 'Fusce vitae libero in massa cursus accumsan.',
          'time': '2 months ago'
        }, 
        { 'title': 'Jacob', 
          'photo': images.AVATAR_STUDENT4,
          'text': 'Sed sollicitudin dui accumsan ultrices consectetur.',
          'time': '2 months ago'
        }];     

    this._chatThreadItem = this._chatThreadItem.bind(this);
    this.state = {index: 0,
                  routes: [
                    { key: 'Upcoming', title: 'Upcoming' },
                    { key: 'Past', title: 'Past' },
                    { key: 'Cancelled', title: 'Cancelled' },
                  ],
    };
}

render() {
    return (
        <TabView
            navigationState={this.state}
            renderScene={SceneMap({
              first: FirstRoute,
              second: SecondRoute,
              third: ThirdRoute,
            })}
            onIndexChange={index => this.setState({ index })}
            initialLayout={{ width: Dimensions.get('window').width }}
        />
    );
}

What have you tried

The code sample if has anything un-expected variables, those are defined and worked in my another screen. And works pretty well. If I remove your Tab view code, then my screen will load properly.
I use expo start command to run my react-native app.

Your Environment

| software | version
| --------------------- | -------
| android | 6.0
| react-native | v16.3.1
| react-native-tab-view | v1.3.1
| node | v8.9.4
| npm | v5.6.0
| expo | v30.0.1

[satya164]

You need to change the name of the keys in SceneMap to correspond to the keys of your routes.

[mhannan]

Very good catch. Appreciate your swift response. One last thing that I am trying to achieve with this Tab View; where should I attache/embed my custom list view that I want to display in each tab view?

I want to embed:

<ScrollView style={styles.container}>
    <SectionList> ... </SectionList>
<ScrollView>

In each of my Tab view, and I am note sure where I should embed this code?

Is there only one way, and that is to import an external view, and import it in this code, and use in:

import MyTabScreen1 from './_MyTabScreen1';

const FirstRoute = () => (
    <View style={[styles.tabScene, { backgroundColor: '#ff4081' }]}>  
        <MyTabScreen1 />
    </View>
);

[satya164]

Create separate components for them and use them in SceneMap as the property values.

[kuldeep-pixer]

I have console log perfectly but, not showing any render element of first and second routes

[rizbud]

I have console log perfectly but, not showing any render element of first and second routes

the key should be not a string.

renderScene={SceneMap({
  1: FirstRoute,
  2: SecondRoute,
})}