CODEWITHSUNDEEP
react-nativereact-navigation
Abd Maj
Abd Maj

Reputation: 217

The component for route '...' must be a React component

I have a React component (Highlight.js) that accepts two properties, image and description. The user will swipe through 4 different screens with it's own background image and description, as an introduction to the app.

TestScreen.js is where I've setup the logic for navigating between screens. When i try to set the screen in my AppContainer as the Highlight component, I keep getting the error that 'The component for route 'Page1' must be a React component.

I've tried to play around a lot with the code to see how I can manage to get it working and the only way it does is when I don't mention the image and description properties, in which case neither is displayed and the screen is mostly blank.

Highlight.js

import React, { Component } from 'react';
import { View, Text, Image, ImageBackground } from 'react-native';

import { NextButton } from '../Buttons';

import styles from './styles';

export default class Highlight extends Component {
  render() {
    return (
      <ImageBackground style={styles.container}>
        <Image
          style={styles.image}
          source={this.props.image} // the image goes here
          resizeMode="cover"
        />
        <View style={styles.textContainer}>
          <Text style={styles.text1}>MYAPP</Text>
          <Text style={styles.text2}>Highlights</Text>
          <Text style={styles.text3}>{this.props.description}</Text> // the description goes here
        </View>
        <View style={styles.buttonContainer}>
          <NextButton />
        </View>
      </ImageBackground>
    );
  }
}

TestScreen.js

import React, { Component } from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';

import { Highlight } from '../components/Highlights';

export default class TestScreen extends Component {
  render() {
    return <AppContainer />;
  }
}

const AppContainer = createAppContainer(
  createStackNavigator({
    Page1: {
      screen: (
        <Highlight
          image={require('../components/Highlights/images/highlight1.png')}
          description={
            'Avoid No-Show of Candidates after setting up an interview'
          }
        />
      )
    }
  })
);

I expect the screen to display content with the image and description properties. Currently I have 4 separate components with essentially the same code (except for the image and description). How to I tackle this problem and avoid the repetition of code?

Upvotes: 0

Views: 66

Answers (1)

cuongtd
cuongtd

Reputation: 3182

A brief explanation

you're passing an element to the route not a Component itself

() => (<Highlight ... />)

this creates a new function Component which returns your expected element, that's why it worked

Upvotes: 1

Related Questions