Taimoor Khan Taimoor Khan - 1 month ago 7
iOS Question

ERROR - Element type is invalid: expected a string (for built-in components)

Strange error is appearing while developing one of my React Native project.
enter image description here

Following is the code I am using;

import React, {Component} from 'react';
import {Text, View, Image, StyleSheet} from 'react-native';
import {Content, Container} from 'native-base';
import {Carousel} from 'react-native-looped-carousel';

export default class AppBody extends Component {
render() {
return (
<Container>
<Content>
<Carousel delay={500}>
<View style={[{
backgroundColor: '#BADA55'
}
]}/>
<View style={[{
backgroundColor: 'red'
}
]}/>
<View style={[{
backgroundColor: 'blue'
}
]}/>
</Carousel>
</Content>
</Container>
);
}
}

module.export = AppBody;

Answer Source

Your import from react-native-looped-carousel is incorrect:

import Carousel from 'react-native-looped-carousel'

After fixing that, the carousel won't work. Because you should provide dimensions for it:

import React, { Component } from 'react'
import { Text, View, Image, StyleSheet, Dimensions } from 'react-native'
import { Content, Container } from 'native-base'
import Carousel from 'react-native-looped-carousel'

const {width, height} = Dimensions.get('window')
export default class AppBody extends Component {

  constructor(props) {
    super(props)

    this.state = {
      size: {width, height},
    }
  }

  render() {
    return (
      <Container>
        <Content>
          <Carousel
            delay={2000}
            style={this.state.size}
            autoplay
            pageInfo
            onAnimateNextPage={(p) => console.log(p)}
          >
            <View style={[{backgroundColor: '#BADA55'}, this.state.size]}><Text>1</Text></View>
            <View style={[{backgroundColor: 'red'}, this.state.size]}><Text>2</Text></View>
            <View style={[{backgroundColor: 'blue'}, this.state.size]}><Text>3</Text></View>
          </Carousel>
        </Content>
      </Container>
    )
  }
}

module.export = AppBody