Module does not work with react-native 0.26

[arunshan]

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Get the above error when I import this module using require

import React, { Component } from 'react'
const config = require('../../../config')
import Icon from 'react-native-vector-icons'
import Mixpanel from 'react-native-mixpanel'
Mixpanel.sharedInstanceWithToken(config.mixpanel.token)

const Carousel = require('react-native-carousel')

import {
  View,
  Image,
  Text,
  TouchableOpacity,
  StyleSheet
} from 'react-native'

const Dimensions = require('Dimensions')
const windowSize = Dimensions.get('window')
const deviceWidth = windowSize.width
const deviceHeight = windowSize.height

export default class Onboarding extends Component {
  gotoApp() {
    this.props.navigator.push({
      id: 3,
      passProps: {
        loggedin: true,
        user: this.props.results
      }
    })
  }

  render() {
    return (
      <View style={styles.mainContainer}>
        <Carousel
          width={deviceWidth}
          indicatorOffset={20}
          animate={false}
          loop={false}
          indicatorColor="#ffffff"
          inactiveIndicatorColor="#5f6f81"
          indicatorAtBottom={true}>
          <View style={styles.container}>
            <Text style={styles.titleText}>{'Getting started is simple.'}</Text>
            <Image source={{uri: 'onboarding1_1x.png'}} style={styles.onboardImage} />
          </View>
          <View style={styles.container}>
            <Text style={styles.titleText}>{'Scan QR Code or enter table #.'}</Text>
            <Image source={{uri: 'onboarding2_1x.png'}} style={styles.onboardImage} />
          </View>
          <View style={styles.container}>
            <Text style={styles.titleText}>{'Interact with your Waiter.'}</Text>
            <Image source={{uri: 'onboarding3_1x.png'}} style={styles.onboardImage} />
          </View>
          <View style={styles.container}>
            <Text style={styles.titleText}>{'Review your experience.'}</Text>
            <Image source={{uri: 'onboarding4_3x.png'}} style={styles.onboardImage} />
          </View>
          <View style={styles.container}>
            <Text style={styles.titleText}>{'Thats It!'}</Text>
            <TouchableOpacity style={styles.onboardImage} onPress={() => this.gotoApp()}>
              <Icon
                name={'ion|ios-checkmark-outline'}
                size={50}
                color={'#ffffff'}
                style={{width: 50, height: 50, alignSelf:'center'}}
              />
            </TouchableOpacity>
          </View>
        </Carousel>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    width: deviceWidth,
    height: deviceHeight,
    justifyContent: 'center',
    backgroundColor: '#23292F'
  },
  container: {
    width: deviceWidth,
    height: deviceHeight,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
    flexDirection: 'column'
  },
  titleText: {
    color: '#fff',
    fontSize: 18,
    fontFamily: 'PTSans-CaptionBold'
  },
  onboardImage: {
    width: 0.9 * deviceWidth,
    height: 0.7 * deviceHeight,
    marginTop: 30,
    borderRadius: 10,
    justifyContent: 'center'
  }
})

Even

import Carousel from 'react-native-carousel' does not work.

[vidyuthd]

I think it doesn't work if Carousel component is embedded inside View, I also use react native 0.26.1 and it worked if Carousel is the root component and didn't work when it was inside View. I think it has to work even if its inside View and is a bug.

[vigyanhoon]

import Carousel from 'react-native-carousel';

It works for me. I had to restart server after npm install.