React native dynamic render

Question

I'm trying to make a custom router component, that will pick a layout dynamically. But, when I'm trying to render layout dynamically I receive blank page.

What I'm doing wrong?

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

import WelcomePageLayout from '../layouts/welcome-page';
import GamePageLayout from '../layouts/game';

export default class Router extends Component {
  constructor(props) {
    super(props);

    this.layouts = [
      WelcomePageLayout,
      GamePageLayout
    ];

    this.state = {
      currentLayout: 0
    };
  }

  render() {
    const layout = this.layouts[this.state.currentLayout];

    return (
      <View style={styles.container}>
        { layout }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1,
    paddingTop: 60,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 100
  }
});

A step ago, before adding this dynamic render everything was working as expected. So I'm pretty sure it's something about that.

Thanks in advance.

Answer 1

You are just passing the component as a child to View . Make sure you render it as well:

render() {
  const Layout = this.layouts[this.state.currentLayout];

  return (
    <View style={styles.container}>
      <Layout />
    </View>
  );
}