title: How do you pass a string via props then use that as a value in the component tag in React Native?
body: <p>I have a String name tag and I passed it from 'Main' component to 'Details' component  via props and want to use that tag string to use in the render function of Details like </p>
  
  <p>Tried this in the render function of 'Details', not working</p>
  
  <pre><code>render() {
      const Tagname = this.props.navigation.getParam('component', 'Component Does not exist')
      return (
        &lt;Container&gt;
          &lt;Tagname/&gt;
        &lt;/Container&gt;
      )
    }
  </code></pre>
  
  <p>The value of <code>const Tagname</code> is <code>Basic</code> (console logged) and I have a component created and imported correctly named <code>Basic</code></p>
  
  <p>Here is the Main : </p>
  
  <pre><code>import React, { Component } from "react";
  import { View, Text, Button } from 'react-native';
  export default class Main extends Component {
    render() {
      &lt;View&gt;
        &lt;Text
          style={styles.texts}
          onPress={()=&gt; {
            this.props.navigation.navigate('Details', {
              component: 'Basic'
            })
          }}
        &gt;
          {elem}
        &lt;/Text&gt;
      &lt;/View&gt;
    }
  }
  </code></pre>
  
  <p>The router :</p>
  
  <pre><code>import React from 'react';
  import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';
  import Details from './Details'
  import Main from './Main'
  
  const AppNavigator = createStackNavigator({
    Home: {
      screen: Main,
    },
    Details: {
      screen: Details,
    },
  }, {
      initialRouteName: 'Home',
  });
  
  export default createAppContainer(AppNavigator);
  </code></pre>
  
  <p>The Details : </p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, Button } from 'react-native';
  import Basic from './Basic.js'
  
  export default class Details extends Component {
    render() {
      const Tagname = this.props.navigation.getParam('component', 'Component Does not exist')
      return (
        &lt;View&gt;
          &lt;Tagname/&gt;
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  
  <p>The Basic : </p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, Button } from 'react-native';
  
  export default class Basic extends Component {
    render() {
      return (
        &lt;View&gt;
          &lt;Text&gt;Hello world&lt;/Text&gt;
        &lt;/View&gt;
      )
    }
  }
  
  </code></pre>