React Native Router - Element type is invalid

Question

I'm trying to make routes for the different pages in my React Native app. So I've created a router.js file with a new Router:

// @flow

import React, { Component } from 'react';
import View from 'react-native';
import { NativeRouter, Route, Link } from 'react-router-native'
import PropTypes from 'prop-types';

import Splash from './components/Splash';
import Home from './components/Home';

class Router extends Component {
    
    componentWillMount() {
        navigator = this.context.history;
    }

    /**
     * Render
     * @return {XML} JSX
     */
    render() {
        return (
            <View style={{flex: 1}}>
                <Route exact path="/" component={Splash}/>
                <Route exact path="/home" component={Home}/>
            </View>
        );
    }
}

export default Router;

And then I've imported the router in my Splash Component. From there I want a button to redirect the user to the home screen.

import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { NativeRouter, Route, Link, Switch } from 'react-router-native'
import Home from "./Home";
import Router from "../router";

class Splash extends Component {

    render() {
        return(
            <View style={ styles.container }>
                <Router>
                    <Button onPress={() => navigator.push('/home')}
                            title="Go to home" />
                </Router>
            </View>
        );
    }
}

export default Splash;

But I get the following error:

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

Check the render method of 'Router'

This is my first time using React Native Router and I don't get it working. Does someone know the best solution to make a simple router to navigate between screens?

Answer 1

It seems to be the components you are passing in. In the docs:

https://github.com/jmurzy/react-router-native

the components are just done like this:

const Detail = (props) => (
  <View style={[styles.component, { backgroundColor: '#FFFFFF' }]}>
  {props.children}</View>
);

you seem to be importing a file and passing a reference to that in. Try doing it as per the docs above and see if that resolves it.