Use lodash submodules to reduce bundle size (#5734)

Import lodash sub modules

e2e/ApplicationLifecycleTest.test.js

 const Utils = require('./Utils');
 const Android = require('./AndroidUtils');
 const TestIDs = require('../playground/src/testIDs');
-const _ = require('lodash');
+const includes = require('lodash/includes');
 
 const { elementByLabel, elementById, sleep } = Utils;
-const IS_RELEASE = _.includes(process.argv, '--release');
+const IS_RELEASE = includes(process.argv, '--release');
 const KEY_CODE_R = 46;
 
 describe('application lifecycle test', () => {

integration/env.test.js

-const _ = require('lodash');
+const eq = require('lodash/eq');
+const isEqual = require('lodash/isEqual');
 
 describe('testing that the environment is working properly', () => {
   it('object spread', () => {
   });
 
   it('equality tests', () => {
-    expect(_.eq('hello', 'hello')).toBe(true);
-    expect(_.isEqual('hello', 'hello')).toBe(true);
+    expect(eq('hello', 'hello')).toBe(true);
+    expect(isEqual('hello', 'hello')).toBe(true);
 
-    expect(_.eq('hello', Object('hello'))).toBe(false);
-    expect(_.isEqual('hello', Object('hello'))).toBe(true);
+    expect(eq('hello', Object('hello'))).toBe(false);
+    expect(isEqual('hello', Object('hello'))).toBe(true);
 
     const a = {};
     const b = {};
 
-    expect(_.eq(a, b)).toBe(false);
-    expect(_.isEqual(a, b)).toBe(true);
+    expect(eq(a, b)).toBe(false);
+    expect(isEqual(a, b)).toBe(true);
   });
 });

integration/redux/MyStore.js

 const redux = require('redux');
-const _ = require('lodash');
+const merge = require('lodash/merge');
+const get = require('lodash/get');
 
 const initialState = {
   person: {
 const reducer = (state = initialState, action) => {
   switch (action.type) {
     case 'redux.MyStore.setName': {
-      return _.merge({}, state, { person: { name: action.name } });
+      return merge({}, state, { person: { name: action.name } });
     }
     case 'redux.MyStore.setAge': {
-      return _.merge({}, state, { person: { age: action.age } });
+      return merge({}, state, { person: { age: action.age } });
     }
     default: {
       return state;
 
 const selectors = {
   getName(state) {
-    return _.get(state, 'person.name');
+    return get(state, 'person.name');
   },
 
   getAge(state) {

lib/src/Navigation.ts

-import { isArray } from 'lodash';
+import isArray from 'lodash/isArray';
 import { NativeCommandsSender } from './adapters/NativeCommandsSender';
 import { NativeEventsReceiver } from './adapters/NativeEventsReceiver';
 import { UniqueIdProvider } from './adapters/UniqueIdProvider';

lib/src/adapters/UniqueIdProvider.ts

-import * as _ from 'lodash';
+import uniqueId from 'lodash/uniqueId';
 
 export class UniqueIdProvider {
   generate(prefix?: string): string {
-    return _.uniqueId(prefix);
+    return uniqueId(prefix);
   }
 }

lib/src/commands/Commands.test.ts

-import * as _ from 'lodash';
+import forEach from 'lodash/forEach'
+import filter from 'lodash/filter'
+import invoke from 'lodash/invoke'
 import { mock, verify, instance, deepEqual, when, anything, anyString } from 'ts-mockito';
 
 import { LayoutTreeParser } from './LayoutTreeParser';
 
     function getAllMethodsOfUut() {
       const uutFns = Object.getOwnPropertyNames(Commands.prototype);
-      const methods = _.filter(uutFns, (fn) => fn !== 'constructor');
+      const methods = filter(uutFns, (fn) => fn !== 'constructor');
       expect(methods.length).toBeGreaterThan(1);
       return methods;
     }
         dismissOverlay: { commandId: 'dismissOverlay+UNIQUE_ID', componentId: 'id' },
         getLaunchArgs: { commandId: 'getLaunchArgs+UNIQUE_ID' }
       };
-      _.forEach(getAllMethodsOfUut(), (m) => {
+      forEach(getAllMethodsOfUut(), (m) => {
         it(`for ${m}`, () => {
           expect(argsForMethodName).toHaveProperty(m);
           expect(paramsForMethodName).toHaveProperty(m);
-          _.invoke(uut, m, ...argsForMethodName[m]);
+          invoke(uut, m, ...argsForMethodName[m]);
           expect(cb).toHaveBeenCalledTimes(1);
           expect(cb).toHaveBeenCalledWith(m, paramsForMethodName[m]);
         });

lib/src/commands/Commands.ts

-import * as _ from 'lodash';
+import cloneDeep from 'lodash/cloneDeep'
+import map from 'lodash/map'
 import { CommandsObserver } from '../events/CommandsObserver';
 import { NativeCommandsSender } from '../adapters/NativeCommandsSender';
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
   ) {}
 
   public setRoot(simpleApi: LayoutRoot) {
-    const input = _.cloneDeep(simpleApi);
+    const input = cloneDeep(simpleApi);
     const root = this.layoutTreeParser.parse(input.root);
 
-    const modals = _.map(input.modals, (modal) => {
+    const modals = map(input.modals, (modal) => {
       return this.layoutTreeParser.parse(modal);
     });
 
-    const overlays = _.map(input.overlays, (overlay) => {
+    const overlays = map(input.overlays, (overlay) => {
       return this.layoutTreeParser.parse(overlay);
     });
 
   }
 
   public setDefaultOptions(options: Options) {
-    const input = _.cloneDeep(options);
+    const input = cloneDeep(options);
     this.optionsProcessor.processOptions(input);
 
     this.nativeCommandsSender.setDefaultOptions(input);
   }
 
   public mergeOptions(componentId: string, options: Options) {
-    const input = _.cloneDeep(options);
+    const input = cloneDeep(options);
     this.optionsProcessor.processOptions(input);
 
     this.nativeCommandsSender.mergeOptions(componentId, input);
   }
 
   public updateProps(componentId: string, props: object) {
-    const input = _.cloneDeep(props);
+    const input = cloneDeep(props);
     this.store.updateProps(componentId, input);
     this.commandsObserver.notify('updateProps', { componentId, props });
   }
 
   public showModal(layout: Layout) {
-    const layoutCloned = _.cloneDeep(layout);
+    const layoutCloned = cloneDeep(layout);
     const layoutNode = this.layoutTreeParser.parse(layoutCloned);
 
     const commandId = this.uniqueIdProvider.generate('showModal');
   }
 
   public push(componentId: string, simpleApi: Layout) {
-    const input = _.cloneDeep(simpleApi);
+    const input = cloneDeep(simpleApi);
     const layout = this.layoutTreeParser.parse(input);
 
     const commandId = this.uniqueIdProvider.generate('push');
   }
 
   public setStackRoot(componentId: string, children: Layout[]) {
-    const input = _.map(_.cloneDeep(children), (simpleApi) => {
+    const input = map(cloneDeep(children), (simpleApi) => {
       const layout = this.layoutTreeParser.parse(simpleApi);
       return layout;
     });
   }
 
   public showOverlay(simpleApi: Layout) {
-    const input = _.cloneDeep(simpleApi);
+    const input = cloneDeep(simpleApi);
     const layout = this.layoutTreeParser.parse(input);
 
     const commandId = this.uniqueIdProvider.generate('showOverlay');

lib/src/commands/LayoutTreeCrawler.ts

-import * as _ from 'lodash';
+import merge from 'lodash/merge'
+import isFunction from 'lodash/isFunction'
 import { LayoutType } from './LayoutType';
 import { OptionsProcessor } from './OptionsProcessor';
 import { Store } from '../components/Store';
   }
 
   private applyStaticOptions(node: LayoutNode) {
-    node.data.options = _.merge({}, this.staticOptionsIfPossible(node), node.data.options);
+    node.data.options = merge({}, this.staticOptionsIfPossible(node), node.data.options);
   }
 
   private staticOptionsIfPossible(node: LayoutNode) {
     const foundReactGenerator = this.store.getComponentClassForName(node.data.name!);
     const reactComponent = foundReactGenerator ? foundReactGenerator() : undefined;
     if (reactComponent && this.isComponentWithOptions(reactComponent)) {
-      return _.isFunction(reactComponent.options) ? reactComponent.options(node.data.passProps || {}) : reactComponent.options;
+      return isFunction(reactComponent.options) ? reactComponent.options(node.data.passProps || {}) : reactComponent.options;
     }
     return {};
   }

lib/src/commands/LayoutTreeParser.test.ts

-import * as _ from 'lodash';
+import keys from 'lodash/keys';
 import { LayoutTreeParser } from './LayoutTreeParser';
 import { LayoutType } from './LayoutType';
 import { Options } from '../interfaces/Options';
 
     it('bottom tabs', () => {
       const result = uut.parse(LayoutExamples.bottomTabs);
-      expect(_.keys(result)).toEqual(['id', 'type', 'data', 'children']);
+      expect(keys(result)).toEqual(['id', 'type', 'data', 'children']);
       expect(result.id).toEqual('myUniqueId');
       expect(result.type).toEqual(LayoutType.BottomTabs);
       expect(result.data).toEqual({});
 
     it('side menus', () => {
       const result = uut.parse(LayoutExamples.sideMenu);
-      expect(_.keys(result)).toEqual(['id', 'type', 'data', 'children']);
+      expect(keys(result)).toEqual(['id', 'type', 'data', 'children']);
       expect(result.id).toEqual('myUniqueId');
       expect(result.type).toEqual(LayoutType.SideMenuRoot);
       expect(result.data).toEqual({});
 
     it('top tabs', () => {
       const result = uut.parse(LayoutExamples.topTabs);
-      expect(_.keys(result)).toEqual(['id', 'type', 'data', 'children']);
+      expect(keys(result)).toEqual(['id', 'type', 'data', 'children']);
       expect(result.id).toEqual('myUniqueId');
       expect(result.type).toEqual(LayoutType.TopTabs);
       expect(result.data).toEqual({ options: LayoutExamples.options });

lib/src/commands/OptionsProcessor.ts

-import * as _ from 'lodash';
+import isEqual from 'lodash/isEqual'
+import isObject from 'lodash/isObject'
+import isArray from 'lodash/isArray'
+import endsWith from 'lodash/endsWith'
+import forEach from 'lodash/forEach'
 
 import { Store } from '../components/Store';
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
   }
 
   private processObject(objectToProcess: object) {
-    _.forEach(objectToProcess, (value, key) => {
+    forEach(objectToProcess, (value, key) => {
       this.processColor(key, value, objectToProcess);
 
       if (!value) {
       this.processImage(key, value, objectToProcess);
       this.processButtonsPassProps(key, value);
 
-      if (!_.isEqual(key, 'passProps') && (_.isObject(value) || _.isArray(value))) {
+      if (!isEqual(key, 'passProps') && (isObject(value) || isArray(value))) {
         this.processObject(value);
       }
     });
   }
 
   private processColor(key: string, value: any, options: Record<string, any>) {
-    if (_.isEqual(key, 'color') || _.endsWith(key, 'Color')) {
+    if (isEqual(key, 'color') || endsWith(key, 'Color')) {
       options[key] = value === null ? 'NoColor' : this.colorService.toNativeColor(value);
     }
   }
 
   private processImage(key: string, value: any, options: Record<string, any>) {
     if (
-      _.isEqual(key, 'icon') ||
-      _.isEqual(key, 'image') ||
-      _.endsWith(key, 'Icon') ||
-      _.endsWith(key, 'Image')
+      isEqual(key, 'icon') ||
+      isEqual(key, 'image') ||
+      endsWith(key, 'Icon') ||
+      endsWith(key, 'Image')
     ) {
       options[key] = this.assetService.resolveFromRequire(value);
     }
   }
 
   private processButtonsPassProps(key: string, value: any) {
-    if (_.endsWith(key, 'Buttons')) {
-      _.forEach(value, (button) => {
+    if (endsWith(key, 'Buttons')) {
+      forEach(value, (button) => {
         if (button.passProps && button.id) {
           this.store.updateProps(button.id, button.passProps);
           button.passProps = undefined;
   }
 
   private processComponent(key: string, value: any, options: Record<string, any>) {
-    if (_.isEqual(key, 'component')) {
+    if (isEqual(key, 'component')) {
       value.componentId = value.id ? value.id : this.uniqueIdProvider.generate('CustomComponent');
       if (value.passProps) {
         this.store.updateProps(value.componentId, value.passProps);

lib/src/components/ComponentWrapper.tsx

 import * as React from 'react';
 import { ComponentProvider } from 'react-native';
-import * as  _ from 'lodash';
+import merge from 'lodash/merge'
 import { polyfill } from 'react-lifecycles-compat';
 import hoistNonReactStatics = require('hoist-non-react-statics');
 
     class WrappedComponent extends React.Component<HocProps, HocState> {
       static getDerivedStateFromProps(nextProps: any, prevState: HocState) {
         return {
-          allProps: _.merge({}, nextProps, store.getPropsForId(prevState.componentId))
+          allProps: merge({}, nextProps, store.getPropsForId(prevState.componentId))
         };
       }
 
       }
 
       public setProps(newProps: any) {
-        this.setState({allProps: newProps});
+        this.setState({ allProps: newProps });
       }
 
       componentWillUnmount() {

lib/src/events/ComponentEventsObserver.ts

-import * as _ from 'lodash';
+import isString from 'lodash/isString'
+import isNil from 'lodash/isNil'
+import uniqueId from 'lodash/uniqueId'
+import unset from 'lodash/unset'
+import forEach from 'lodash/forEach'
 import { EventSubscription } from '../interfaces/EventSubscription';
 import {
   ComponentDidAppearEvent,
   public bindComponent(component: React.Component<any>, componentId?: string): EventSubscription {
     const computedComponentId = componentId || component.props.componentId;
 
-    if (!_.isString(computedComponentId)) {
+    if (!isString(computedComponentId)) {
       throw new Error(`bindComponent expects a component with a componentId in props or a componentId as the second argument`);
     }
-    if (_.isNil(this.listeners[computedComponentId])) {
+    if (isNil(this.listeners[computedComponentId])) {
       this.listeners[computedComponentId] = {};
     }
-    const key = _.uniqueId();
+    const key = uniqueId();
     this.listeners[computedComponentId][key] = component;
 
-    return { remove: () => _.unset(this.listeners[computedComponentId], key) };
+    return { remove: () => unset(this.listeners[computedComponentId], key) };
   }
 
   public unmounted(componentId: string) {
-    _.unset(this.listeners, componentId);
+    unset(this.listeners, componentId);
   }
 
   notifyComponentDidAppear(event: ComponentDidAppearEvent) {
   }
 
   private triggerOnAllListenersByComponentId(event: ComponentEvent, method: string) {
-    _.forEach(this.listeners[event.componentId], (component) => {
+    forEach(this.listeners[event.componentId], (component) => {
       if (component && component[method]) {
         component[method](event);
       }

package.json

   },
   "devDependencies": {
     "@babel/core": "7.6.4",
-    "@babel/types": "7.6.x",
     "@babel/plugin-proposal-export-default-from": "7.2.0",
     "@babel/plugin-proposal-export-namespace-from": "7.2.0",
-    "@types/hoist-non-react-statics": "^3.0.1",
+    "@babel/types": "7.6.x",
     "@react-native-community/eslint-config": "0.0.3",
-    "babel-jest": "24.9.x",
+    "@types/hoist-non-react-statics": "^3.0.1",
     "@types/jest": "24.x.x",
-    "@types/lodash": "4.x.x",
+    "@types/lodash": "^4.14.149",
     "@types/react": "16.x.x",
     "@types/react-native": "0.57.7",
     "@types/react-test-renderer": "16.x.x",
+    "babel-jest": "24.9.x",
     "detox": "14.x.x",
-    "react-native-ui-lib": "3.24.2",
     "handlebars": "4.x.x",
     "jest": "24.9.x",
+    "lodash": "^4.17.15",
     "metro-react-native-babel-preset": "0.57.x",
     "react": "16.9.0",
     "react-native": "0.61.4",
+    "react-native-keyboard-tracking-view": "5.x.x",
     "react-native-typescript-transformer": "1.2.12",
+    "react-native-ui-lib": "3.24.2",
     "react-native-view-overflow": "0.0.4",
-    "react-native-keyboard-tracking-view": "5.x.x",
     "react-redux": "5.x.x",
     "react-test-renderer": "16.9.x",
     "redux": "3.x.x",
       }
     }
   }
-}
+}

playground/src/commons/Layouts.js

-const { isString, isArray } = require('lodash');
+const isString = require('lodash/isString');
+const isArray = require('lodash/isArray');
 
 const stack = (rawChildren, id) => {
   const childrenArray = isArray(rawChildren) ? rawChildren : [rawChildren];

playground/src/screens/FullScreenModalScreen.js

-const _ = require('lodash');
+const concat = require('lodash/concat');
+const last = require('lodash/last');
 const React = require('react');
 const Root = require('../components/Root');
 const Button = require('../components/Button')
         name: Screens.Modal,
         passProps: {
           modalPosition: this.getModalPosition() + 1,
-          previousModalIds: _.concat([], this.props.previousModalIds || [], this.props.componentId)
+          previousModalIds: concat([], this.props.previousModalIds || [], this.props.componentId)
         }
       }
     });
 
   getModalPosition = () => this.props.modalPosition || 1;
 
-  getPreviousModalId = () => _.last(this.props.previousModalIds);
+  getPreviousModalId = () => last(this.props.previousModalIds);
 }
 module.exports = FullScreenModalScreen;

playground/src/screens/ModalScreen.js

-const _ = require('lodash');
+const last = require('lodash/last');
+const concat = require('lodash/concat');
+const forEach = require('lodash/forEach');
+const head = require('lodash/head');
 const React = require('react');
 const Root = require('../components/Root');
 const Button = require('../components/Button')
         name: Screens.Modal,
         passProps: {
           modalPosition: this.getModalPosition() + 1,
-          previousModalIds: _.concat([], this.props.previousModalIds || [], this.props.componentId)
+          previousModalIds: concat([], this.props.previousModalIds || [], this.props.componentId)
         }
       }
     });
 
   dismissUnknownModal = () => Navigation.dismissModal('unknown');
 
-  dismissAllPreviousModals = () => _.forEach(this.props.previousModalIds, (id) => Navigation.dismissModal(id));
+  dismissAllPreviousModals = () => forEach(this.props.previousModalIds, (id) => Navigation.dismissModal(id));
 
-  dismissFirstModal = () => Navigation.dismissModal(_.head(this.props.previousModalIds));
+  dismissFirstModal = () => Navigation.dismissModal(head(this.props.previousModalIds));
 
   dismissAllModals = () => Navigation.dismissAllModals();
 
 
   getModalPosition = () => this.props.modalPosition || 1;
 
-  getPreviousModalId = () => _.last(this.props.previousModalIds);
+  getPreviousModalId = () => last(this.props.previousModalIds);
 }
 module.exports = ModalScreen;

playground/src/screens/PushedScreen.js

-const _ = require('lodash');
+const concat = require('lodash/concat');
 const React = require('react');
 const { BackHandler } = require('react-native');
 const Navigation = require('../services/Navigation');
         name: Screens.Pushed,
         passProps: {
           stackPosition: this.getStackPosition() + 1,
-          previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId)
+          previousScreenIds: concat([], this.props.previousScreenIds || [], this.props.componentId)
         },
         options: {
           animations: {
         name: Screens.Pushed,
         passProps: {
           stackPosition: this.getStackPosition() + 1,
-          previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId)
+          previousScreenIds: concat([], this.props.previousScreenIds || [], this.props.componentId)
         },
         options: {
           animations: {
   createPassProps = () => {
     return {
       stackPosition: this.getStackPosition() + 1,
-      previousScreenIds: _.concat([], this.props.previousScreenIds || [], this.props.componentId)
+      previousScreenIds: concat([], this.props.previousScreenIds || [], this.props.componentId)
     }
   };
   getStackPosition = () => this.props.stackPosition || 1;

playground/src/services/Navigation.js

-const { isString, get } = require('lodash');
+const get = require('lodash/get');
+const isString= require('lodash/isString');
+
 const { stack, component } = require('../commons/Layouts');
 const { Navigation } = require('react-native-navigation');
 

scripts/gen-docs/MarkdownWriter.ts

-import * as _ from 'lodash';
+import concat from 'lodash/concat'
 import * as Handlebars from 'handlebars';
 import * as fs from 'fs';
 import { ClassContext } from './ClassParser';
     const files2 = interfaceContexts.map(mapper);
     const files3 = enumContexts.map(mapper);
 
-    const menuMarkdown = this.menuFn({ files: _.concat(files, files2, files3) });
+    const menuMarkdown = this.menuFn({ files: concat(files, files2, files3) });
     fs.writeFileSync(`${this.outputDir}/_sidebar.md`, menuMarkdown, { encoding: 'utf8' });
     fs.writeFileSync(`${this.outputDir}/README.md`, menuMarkdown, { encoding: 'utf8' });
   }

scripts/install-android.js

-const _ = require('lodash');
+const includes = require('lodash/includes')
 const exec = require('shell-utils').exec;
 
-const release = _.includes(process.argv, '--release');
+const release = includes(process.argv, '--release');
 
 run();
 

scripts/release.js

 const exec = require('shell-utils').exec;
 const semver = require('semver');
 const fs = require('fs');
-const _ = require('lodash');
+const includes = require('lodash/includes');
 const path = require('path');
 
 // Workaround JS
             console.log(`Released ${theCandidate}`);
             return;
         } catch (err) {
-            const alreadyPublished = _.includes(err.toString(), 'You cannot publish over the previously published version');
+            const alreadyPublished = includes(err.toString(), 'You cannot publish over the previously published version');
             if (!alreadyPublished) {
                 throw err;
             }

scripts/test-e2e.js

-const _ = require('lodash');
+const includes = require('lodash/includes');
 const exec = require('shell-utils').exec;
 
-const android = _.includes(process.argv, '--android');
-const release = _.includes(process.argv, '--release');
-const skipBuild = _.includes(process.argv, '--skipBuild');
-const headless = _.includes(process.argv, '--headless');
-const multi = _.includes(process.argv, '--multi');
-const verbose = _.includes(process.argv, '--verbose');
+const android = includes(process.argv, '--android');
+const release = includes(process.argv, '--release');
+const skipBuild = includes(process.argv, '--skipBuild');
+const headless = includes(process.argv, '--headless');
+const multi = includes(process.argv, '--multi');
+const verbose = includes(process.argv, '--verbose');
 
 run();
 

scripts/test-js.js

 const exec = require('shell-utils').exec;
-const _ = require('lodash');
+const { includes, chain, split, filter } = require('lodash');
 
-const fix = _.includes(process.argv, '--fix') ? '--fix' : '';
+const fix = includes(process.argv, '--fix') ? '--fix' : '';
 
 const dirs = [
   'lib/src',
 run();
 
 function run() {
-  const paths = _.chain(dirs).map((d) => d === 'e2e' ? `${d}/**/*.[tj]s` : `${d}/**/*.[tj]sx?`).join(' ').value();
+  const paths = chain(dirs).map((d) => d === 'e2e' ? `${d}/**/*.[tj]s` : `${d}/**/*.[tj]sx?`).join(' ').value();
   exec.execSync(`tslint ${paths} ${fix} --format verbose`);
   assertAllTsFilesInSrc();
   exec.execSync(`jest --coverage`);
 
 function assertAllTsFilesInSrc() {
   const allFiles = exec.execSyncRead('find ./lib/src -type f');
-  const lines = _.split(allFiles, '\n');
-  const offenders = _.filter(lines, (f) => !f.endsWith('.ts') && !f.endsWith('.tsx'));
+  const lines = split(allFiles, '\n');
+  const offenders = filter(lines, (f) => !f.endsWith('.ts') && !f.endsWith('.tsx'));
   if (offenders.length) {
     throw new Error(`\n\nOnly ts/tsx files are allowed:\n${offenders.join('\n')}\n\n\n`);
   }

scripts/test-unit.js

-const _ = require('lodash');
+const includes = require('lodash/includes');
 const exec = require('shell-utils').exec;
 
-const android = _.includes(process.argv, '--android');
-const release = _.includes(process.argv, '--release');
+const android = includes(process.argv, '--android');
+const release = includes(process.argv, '--release');
 
 function run() {
   if (android) {

tsconfig-strict.json

 {
   "$schema": "http://json.schemastore.org/tsconfig",
   "compilerOptions": {
-    "allowSyntheticDefaultImports": false,
+    "allowSyntheticDefaultImports": true,
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "diagnostics": true,

tsconfig.json

     "module": "commonjs",
     "jsx": "react-native",
     "declaration": true,
+    "esModuleInterop": true,
     "skipLibCheck": true,
     "types": [
       "jest",