How to dynamically include a module in React Native

Question

I am trying to dynamically do a dynamic import import (this.props.myImportModulePath) but I get :

Error: TrasformError index.js: index.js:Invalid call at line 12: import(_this.props.myImportModulePath), js engine: hermes

I am not sure that this is the way to go about it, but what I am trying to get is to get import ToastExample from './ToastExample'; dynamically.

Below is how I go about it.

Thank you all in advance.

import React, {Component} from 'react';
import {AppRegistry, Text} from 'react-native';

import {name as appName} from './app.json';

class HelloWorld extends Component {

    constructor(props) {
        super(props);

        this.state = {
            OtherComponent: React.lazy(() => import (this.props.myImportModulePath))
        }
    }

    render() {
        return (
            <Text>HELLO World</Text>
        );
    }
}
AppRegistry.registerComponent(appName, () => HelloWorld);

Please note that this works when I change

OtherComponent: React.lazy(() => import (this.props.myImportModulePath))

into

OtherComponent: React.lazy(() => import ('./myImportModule')),

that is, passing the path directly as a string './myImportModule' instead of passing it as a prop value this.props.myImportModulePath

Thank you all in advance.

Andus · Accepted Answer · 2019-12-16 02:28:40Z

2

I think you cannot use import dynamically but you can dynamically change which component you are calling instead, syntax is as mentioned in this post: React - Dynamically Import Components

answered Dec 16, 2019 at 2:28

Andus

1,73917 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lenoarod · Accepted Answer · 2019-12-19 02:28:06Z

0

I think you want to according to some condition to import some components. I think you can do it as the following:

componentDidMount() {
      const { path } = this.props;
      // here your path is your full, if you use relative path, you have to add 
      // prefix
      // here you can add your condition
      import(`${path}`)
      .then(module => this.setState({ module: module.default }))   
   }

render() {
  const { module: Component } = this.state; 
  <View>
  {Component && <Component path='./Footer' />} 
  </View>
}

if you want to use flatlist, your can try use it columnWrapperStyle style.

edited Dec 19, 2019 at 2:28

answered Dec 16, 2019 at 2:47

Lenoarod

3,63116 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to dynamically include a module in React Native

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related