Element type is invalid: expected a string when using TouchableHighlight

Question

I am having problems when adding the TouchableHighlight component from react-native, and I am given the following error:

Element type is invalid: expected a string

Everything works fine if I delete this

The code is the following:

import React from 'react';
import {View, Text, Image, ScrollView} from 'react-native';
import axios from 'axios';
import {Card, CardItem, Right, Left, TouchableHighlight} from 'native-base';
import { Icon } from 'react-native-elements'

import HeaderMenu from '../Header/Header';

class homeScreen extends React.Component {

    state = {
        noticias: []
    }

    componentDidMount() {
        axios.get('URL')
        .then(res => this.setState({
            noticias: res.data
        }));
    }

    render() {
        const {navigate} = this.props.navigation;
      return (
        <View style={{flex: 1}}>
          <HeaderMenu title='Noticias'/>
          <ScrollView>
                <View style={{borderTopColor: 'white', borderTopWidth: 2}}>
                    {
                        this.state.noticias.map((noticia, index) => (
                            <TouchableHighlight onPress={() => navigate('SingleScreen')}>
                                <CardItem key={index} style={{height: 100, padding: 5, borderBottomColor: '#dee0e2', borderBottomWidth: 1}} >
                                    <View>
                                        <Image style={{width: 120, height: 80, alignSelf: 'stretch'}} source={{uri: noticia.imagen}} />
                                    </View>
                                    <View style={{height: 80, flex: 1, paddingLeft: 10}}>
                                        <Text style={{fontSize: 12, marginBottom: 8}} >{noticia.titulo}</Text>
                                    </View>
                                    <Icon style={{marginTop: 40 ,width: 20, height: '100%', color: '#343537', justifyContent: 'center', paddingLeft: 5}} name="chevron-right" />
                                </CardItem>
                            </TouchableHighlight>
                        ))
                    } 
                </View> 
            </ScrollView>
        </View>
      );
    }
  }

export default homeScreen;

Already checked other answers but none of them solve my problem.

Answer 1

I found the problem. You are doing this.

import {Card, CardItem, Right, Left, TouchableHighlight} from 'native-base';

You are importing TouchableHighlight from native-base which is wrong. You have to remove it.

You have to import TouchableHighlight from react-native

import {View, Text, Image, ScrollView,TouchableHighlight} from 'react-native';