Skip to content

Low startup performance with react-native >= 0.71 #1846

Open
@marcoburrometo

Description

@marcoburrometo

🐛 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

/**
 * 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

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

  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 

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions