TouchableWithoutFeedback is throwing rendering error

Question

I am developing a React Native application for learning purposes. Now I am using TouchableWithoutFeedback component to response the user interaction. But I am getting an error.

Here is my code:

class Events extends React.Component {
  static navigationOptions = {
    title: "Events"
  };

  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          id: 1,
          name: "Name 1",
          image_url: "https://www.vkguy.co.uk/images/slideshow/05.jpg"
        },
        {
          id: 2,
          name: "Name 2",
          image_url: "https://www.vkguy.co.uk/images/slideshow/05.jpg"
        },
        {
          id: 3,
          name: "Name 3",
          image_url: "https://www.vkguy.co.uk/images/slideshow/05.jpg"
        }
      ]
    };
  }

  _handleLoadMore() {}

  renderItem(item) {
    return (
      <TouchableWithoutFeedback onPress={() => {
        
      }}>
        <View>
        <Card>
          <CardItem cardBody>
            <Image
              source={{ uri: item.image_url }}
              style={{ height: 200, width: null, flex: 1 }}
            />
          </CardItem>
          <CardItem>
            <Left>
              <Button transparent>
                <Icon active name="thumbs-up" />
                <Text>12 Likes</Text>
              </Button>
            </Left>
            <Body>
              <Button transparent>
                <Icon active name="chatbubbles" />
                <Text>4 Comments</Text>
              </Button>
            </Body>
            <Right>
              <Text>11h ago</Text>
            </Right>
          </CardItem>
        </Card>
        </View>
      </TouchableWithoutFeedback>
    );
  }

  render() {
    return (
      <View style={{ flex: 1, width: "100%" }}>
        <FlatList
          data={this.state.data}
          keyExtractor={item => item.id.toString()}
          renderItem={({ item }) => this.renderItem(item)}
          onEndReached={this._handleLoadMore}
        />
      </View>
    );
  }
}

export default Events;

When I click on the view, I got this error.

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

What's wrong with my code and how can I fix it?

Is your `renderItem` function bound? Cannot see that in the provided code. Try binding the function by adding `this.renderItem=this.renderItem.bind(this)` in your constructor. Or simply convert the function to a fat-arrow function `()=>{}`. — Nishant Nair, Jun 09 '19 at 04:57
Hi, Nishant, I added the binding in the constructor. But still does not work. — Wai Yan Hein, Jun 09 '19 at 13:10

score 2 · Answer 1 · answered Oct 10 '19 at 13:29

Not sure if you solved this yet, but I just had the same issue.

Was an easy fix to a rather silly mistake.

import React, { Component, TouchableWithoutFeedback } from "react";
import { View } from "react-native";

should have been

import React, { Component } from "react";
import { View, TouchableWithoutFeedback } from "react-native";

score 0 · Answer 2 · answered Jun 08 '19 at 16:18

0

To start with , maybe try Opening App.js file and modifying this line class YourApp extends Component { into export default class YourApp extends Component<{}> {

answered Jun 08 '19 at 16:18

Vagtse

121
1
15

Also , you maybe accidentally imported image from native-base instead of importing it from react-native (it's a common mistake) – Vagtse Jun 08 '19 at 16:21
No it is not the issue. If I removed TouchableWithoutFeedback component, everything is working as expected. – Wai Yan Hein Jun 08 '19 at 16:23
maybe you should fill the ''onPress'' function with something?like just and alert? – Vagtse Jun 08 '19 at 16:28

score 0 · Answer 3 · answered Jun 12 '19 at 23:47

Without being able to see your imports it's tough to say. If you're sure you're exporting your components, then it probably has to do with named vs default exports, or forgetting to export one of your components. Check to make sure if you're using a default export...

export default ExampleComponent

your import doesn't include brackets and looks like

import ExampleComponent from '../../folder/file'

Otherwise if you're using named exports like so...

export const ExampleComponent = () => {

your import includes brackets

import { ExampleComponent } from '../../folder/file'

Could help you more if you provide all of the involved components including the imports

TouchableWithoutFeedback is throwing rendering error

3 Answers3