CODEWITHSUNDEEP
androidreactjsreact-native
Chiranjhivi Ghimire
Chiranjhivi Ghimire

Reputation: 1739

Always getting error "super expression must either be null or a function, not undefined." when I navigate to this page

'use strict';
import React, {Component} from 'react';
import { Tab, TabLayout } from 'react-native-android-tablayout';

import{
  ViewPagerAndroid,
  View,
  StyleSheet,
  ScrollView,
  Text,
} from 'react-native';

import EventList from './javra-event-list';

var eventLayout = (
  <ScrollView>
    <EventList 
      title='Latest Event' 
      event='latest' 
      itemsPerRow={this.props.movies.length} 
      items={this.props.movies} direction={true}/>
    <EventList 
      title='Event Type' 
      event='event' 
      itemsPerRow={this.props.movies.length} 
      items={this.props.movies} direction={true}/>
    <EventList 
      title='Popular Event' 
      event='popular' 
      itemsPerRow={this.props.movies.length} 
      items={this.props.movies} direction={true}/>
  </ScrollView>
);

var tabView = eventLayout;

export default class TabsUi extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pagePosition: 0,
    }
  }

  render(){
    return(
      <View style={{marginTop:0, flex:1}}>
        <TabLayout  
          style ={{height:40, backgroundColor: 'skyblue'}} 
          selectedTab = {this.state.pagePosition}
          onTabSelected = {this.setPagePosition.bind(this)}>
          <Tab name="Events" style={styles.tab1}/>
          <Tab name="User Uploads" style={styles.tab1}/>
        </TabLayout>
        {tabView}
      </View>
    );
  }

  setPagePosition(e:Event){
    const pagePosition = e.nativeEvent.position;
    console.log(pagePosition);
    this.setState({pagePosition});
    switch (pagePosition) {
      case 0:
        tabView = (
          <ScrollView>
            <EventList 
              title='Latest Event' 
              event='latest' 
              itemsPerRow={this.props.movies.length} 
              items={this.props.movies} direction={true}/>
            <EventList 
              title='Event Type' 
              event='event' 
              itemsPerRow={this.props.movies.length} 
              items={this.props.movies} 
              direction={true}/>
            <EventList 
              title='Popular Event' 
              event='popular' 
              itemsPerRow={this.props.movies.length} 
              items={this.props.movies} 
              direction={true}/>
          </ScrollView>
        );
        break;
      case 1: 
        tabView = (
          <View>
            <Text>
              Tab content 2
            </Text>
         </View>
        );
        break;
      default:
    }
    this.forceUpdate();
  }
}

I always get the above error when I navigate to this page. I have used the latest ECMA script syntax with the latest react-native version 0.27. What is the problem with my code?

Any suggestion would be appreciated.

Upvotes: 0

Views: 305

Answers (2)

Chiranjhivi Ghimire
Chiranjhivi Ghimire

Reputation: 1739

now react-native-android-tablayout is updated to latest version of react-native greater than 0.28v. Thanks, for author of this library. https://github.com/AlbertBrand/react-native-android-tablayout/issues/22

Now tablayout is supported in android.

Upvotes: 0

Alex Tip&#225;n
Alex Tip&#225;n

Reputation: 36

I had same problem, I just updated two files Tab.js and TabLayout.js on node_modules from https://github.com/AlbertBrand/react-native-android-tablayout this worked for me, main changes are call to import modules.

import {
  React,
  Component,
  PropTypes,
  processColor,
  requireNativeComponent,
  View,
} from 'react-native';

replace by

import React, {
  Component,
  PropTypes
} from 'react';
import {
  processColor,
  requireNativeComponent,
  View,
} from 'react-native';

but better replace entire file

Upvotes: 2

Related Questions