Dynamic Import #

You can use dynamic import with Herina. It's exactly the same how you use import() with Webpack or Vite.

Load Remote Module #

Let's say you have a function requiring a module to excuse.

const onCallDynamic = async () => {
    const {dynamicFunction} = await import('./dynamic');

    dynamicFunction();
};

import {Alert} from 'react-native';

export const dynamicFunction = () => {
    Alert.alert('Hello World.');
};

When onCallDynamic is called, you will see an alert on the screen.

React Suspense API #

Of course, Herina gives you the ability to use Suspense API and lazily load component.

import {lazy, Suspense, useEffect} from 'react';

const LazyComponent = lazy(() => import('./dynamic-import'));

const App = () => {
  useEffect(() => {
    registerUpdateManager('https://hector.im');
  }, []);

  return (
    <View>
      <Suspense>
        <LazyComponent />
      </Suspense>
    </View>
  );
};

export default App;

import {Text} from 'react-native';

const DynamicImportComponent = () => {
  return <Text>I'm loaded from outside.</Text>;
};

export default DynamicImportComponent;

How does it work? #

Although React Native does not support this feature by default, we know Metro as React Native's bundler giving us the API to make it happen.

Based on this API, Herina creates its own runtime similar to Webpack to resolve remote modules.