error Unexpected identifier "import React from 'react';" in react-native

I try to implement Preloading module concept in react native. I follow the react-native documentation. Configure Preloading and Inline Requires . I run this command "react-native start --verbose" and getting error.

Error::

error Unexpected identifier
debug /home/iron/Documents/React-native/16-05-2019/LazyLoading/index.js:1
import React from 'react';
       ^^^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/home/iron/Documents/React-native/16-05-2019/LazyLoading/packager/modulePaths.js:2:20)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)

metro.config.js

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const modulePaths = require('./packager/modulePaths');
const resolve = require('path').resolve;
const fs = require('fs');

// Update the following line if the root folder of your app is somewhere else.
const ROOT_FOLDER = path.resolve(__dirname, '..');

const config = {
  transformer: {
    getTransformOptions: () => {
      const moduleMap = {};
      modulePaths.forEach(path => {
        if (fs.existsSync(path)) {
          moduleMap[resolve(path)] = true;
        }
      });
      return {
        preloadedModules: moduleMap,
        transform: { inlineRequires: { blacklist: moduleMap } },
      };
    },
  },
};
module.exports = config;

index.js::

import React from 'react';
const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
   .filter(moduleId => modules[moduleId].isInitialized)
   .map(moduleId => modules[moduleId].verboseName);

const waitingModuleNames = moduleIds
   .filter(moduleId => !modules[moduleId].isInitialized)
   .map(moduleId => modules[moduleId].verboseName);

console.log(
   'loaded:',
   loadedModuleNames.length,
   'waiting:',
   waitingModuleNames.length
);

// grab this text blob, and put it in a file named packager/modulePaths.js
console.log(`module.exports = ${JSON.stringify(loadedModuleNames.sort())};`);
import App from './src/App';
const app = new App();

packager/modulePaths.js::

const loadedName = require('../index');
module.exports = loadedName.loadedModuleNames;

Package.json

{
  "name": "LazyLoading",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "native-base": "^2.12.1",
    "react": "^16.8.6",
    "react-loadable": "^5.5.0",
    "react-native": "^0.59.9",
    "react-native-navigation": "^2.21.0",
    "react-redux": "^7.0.3",
    "redux": "^4.0.1",
    "redux-form": "^8.2.3",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/runtime": "7.4.5",
    "babel-jest": "24.8.0",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.1",
    "react-test-renderer": "^16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

I provide a code above, please tell me how to solve this issue. Also how to implement error loadable module concept in react-native. I have never found any article for this.

Thanks!