How do I use the DeckSwiper element in NativeBase without getting "Element type is invalid" error?

Question

I'm using NativeBase's DeckSwiper (docs, code) in a view and getting an error every time:

Warning: React.createElement: type should not be null, undefined, 
boolean, or number. It should be a string (for DOM elements) or a 
ReactClass (for composite components). Check the render method of `CardSwiper`.

This markup works:

  <View flex>
    <DeckSwiper dataSource={cards} renderItem={(item) => {
        console.log(item);
        return (
            <Text flex>{item.text}</Text>
        )
    }}/>

But subbing in this markup for the Text (from their site) fails, with the above error:

<Card style={{
    elevation: 3
}}>
    <CardItem>
        <Thumbnail source={item.image}/>
        <Text>{item.text}</Text>
        <Text note>NativeBase</Text>
    </CardItem>
    <CardItem>
        <Image style={{
            resizeMode: 'cover',
            width: null
        }} source={item.image}/>
    </CardItem>
    <CardItem>
        <Icon name="ios-heart" style={{
            color: '#ED4A6A'
        }}/>
        <Text>{item.name}</Text>
    </CardItem>
</Card>

I can't figure out if I'm using it wrong or the docs are off or this is a bug. What's the issue here?

Answer 1

You must import "Image" from "react-native", not from "native-base"

Code from example:

import { Image } from 'react-native';
import { Container, Header, View, DeckSwiper, Card, CardItem, Thumbnail, Text, Left, Body, Icon } from 'native-base';