Low startup performance with react-native >= 0.71

Author: marcoburrometoCreated Mar 5, 2025Updated Mar 5, 2025

Bug Report

Hello! I have very slow performances with react-native version greater than 0.71.

It takes a lot of time to load the first time, maybe parsing the mapping json? I'm using a custom mapping and followed the guides to include it in the build using metro config so it should not be generated at runtime.

I lazily loaded a bit of stuff looking for the bottleneck but then I realized that without kitten ui and eva startup time is <0.5 s

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.2.0
@ui-kitten/components	5.3.1

metro config

bash

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

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const MetroConfig = require('@ui-kitten/metro-config');

const evaConfig = {
  evaPackage: '@eva-design/eva',
  customMappingPath: './assets/kitten-ui/mapping.json',
};

const defaultConfig = getDefaultConfig(__dirname);

const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: defaultConfig.resolver.assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'],
  },
};

module.exports = MetroConfig.create(
  evaConfig,
  mergeConfig(defaultConfig, config),
);

part of App.tsx

bash

return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <PortalProvider>
        <ApplicationProvider
          mapping={eva.mapping}
          customMapping={mapping}
          theme={WhiteLabelConfig.API_PREFIX === 'cds' ? themeCDS : themeTS}>
          <NetworkProvider>
            <ErrorBoundary>
              <Provider store={store}>
                <Suspense fallback={<Loader />}>
                  <AppNavigator />
                </Suspense>
              </Provider>
            </ErrorBoundary>
          </NetworkProvider>
        </ApplicationProvider>
      </PortalProvider>
    </GestureHandlerRootView>
  );

Environment information

bash


  System:
    OS: macOS 15.3.1
    CPU: (11) arm64 Apple M3 Pro
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: DriverKit 24.2, iOS 18.2, macOS 15.2, tvOS 18.2, visionOS 2.2, watchOS 11.2
    Android SDK:
      Android NDK: 22.1.7171670
  IDEs:
    Xcode: 16.2/16C5032a - /usr/bin/xcodebuild
  npmPackages:
    react: ^18.2.0 => 18.3.1 
    react-native: ^0.75.4 => 0.75.4

Source: akveo/react-native-ui-kitten

View original on GitHub View discussion on GitHub