CODEWITHSUNDEEP
reactjsreact-nativeimportmodular
user3512797
user3512797

Reputation: 373

Can you conditionally import files in react native?

Situation: I'm working on a react native project with different versions for the same app. To do this I'm using app flavors for android and for iOS I will be using build targets. I've already made a native android module that can return the android build flavor that is being used. My goal is to be able to import a different React component to display for each flavor.

Problem: My original idea was to conditionally import the React Native component to display for each flavor, but I've come to understand that conditional imports aren't a thing in JavaScript and they have to be at the top level scope. Is there a way to tackle this problem without importing every file for every build? (I want to avoid making the binary larger by importing components that are only being used in other flavors of the app).

What I want to do:

import { NativeModules } from 'react-native';

var appFlavor;

NativeModules.RNVariantsLib.getBuildFlavor((err ,flavor) => {
  console.log('flavor ' + flavor);
  appFlavor = flavor;
});

if(appFlavor == 'flavorA'){
  import Component from './a';
}
if(appFlavor == 'flavorB'){
  import Component from './b';
}

export default Component;

Upvotes: 3

Views: 3186

Answers (2)

limco
limco

Reputation: 1410

You can use the solution from Conditional imports in React Native

const MODULE_NAME = <CONDITION> ? require(MODULE_A) : require(MODULE_B);

Upvotes: 0

Tuan Luong
Tuan Luong

Reputation: 4162

You could try with require

let Component = null;
if(appFlavor == 'flavorA'){
  Component = require('./a');
}
if(appFlavor == 'flavorB'){
  Component = require('./b');
}

export default Component;

Upvotes: 1

Related Questions