The component for route '...' must be a React component - react-native

Question

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?

Answer 1

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