/react-native

Skill: Native SDKs

Replace web polyfills and JS navigators with native React Native implementations for better performance.

Quick Pattern

Before (JS polyfills - 430+ KB):

import '@formatjs/intl-datetimeformat/polyfill';
import CryptoJS from 'crypto-js';
import { createStackNavigator } from '@react-navigation/stack';

After (native implementations):

// Hermes has native Intl.DateTimeFormat - no polyfill needed
import { createHash } from 'react-native-quick-crypto';  // 58x faster
import { createNativeStackNavigator } from '@react-navigation/native-stack';

When to Use

• Large JS bundle from polyfills
• Navigation feels non-native
• Crypto operations are slow
• Internationalization bloating bundle

Step-by-Step Instructions

1. Remove Unnecessary Intl Polyfills

Hermes now supports many Intl APIs natively. Check your imports:

// BEFORE: All these polyfills (430+ KB)
import '@formatjs/intl-getcanonicallocales/polyfill';
import '@formatjs/intl-locale/polyfill';
import '@formatjs/intl-numberformat/polyfill';
import '@formatjs/intl-numberformat/locale-data/en';
import '@formatjs/intl-datetimeformat/polyfill';
import '@formatjs/intl-datetimeformat/locale-data/en';
import '@formatjs/intl-pluralrules/polyfill';
import '@formatjs/intl-pluralrules/locale-data/en';
import '@formatjs/intl-relativetimeformat/polyfill';
import '@formatjs/intl-relativetimeformat/locale-data/en';
import '@formatjs/intl-displaynames/polyfill';

Hermes Support (as of 2025):

// AFTER: Only needed polyfills
import '@formatjs/intl-locale/polyfill';
import '@formatjs/intl-pluralrules/polyfill';
import '@formatjs/intl-pluralrules/locale-data/en';
import '@formatjs/intl-relativetimeformat/polyfill';
import '@formatjs/intl-relativetimeformat/locale-data/en';
import '@formatjs/intl-displaynames/polyfill';

2. Use Native Crypto

Replace JS crypto with native C++ implementation:

npm install react-native-quick-crypto

Performance: Up to 58x faster than crypto-js.

// BEFORE: Slow JS implementation
import CryptoJS from 'crypto-js';

// AFTER: Native C++ implementation
import { createHash } from 'react-native-quick-crypto';

Essential for:

• Web3 wallet seed generation
• CSPRNG (Cryptographically Secure Random Numbers)
• Any heavy cryptographic operations

3. Use Native Stack Navigator

npm install @react-navigation/native-stack react-native-screens

// BEFORE: JS-based stack (more flexible, less native)
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

// AFTER: Native stack (native feel, better performance)
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

// Usage is nearly identical
<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>

Benefits:

• Native navigation animations
• Platform-specific headers (large titles on iOS)
• Lower memory usage
• Offloads work from JS thread

4. Use Native Bottom Tabs

npm install @bottom-tabs/react-navigation react-native-bottom-tabs

// BEFORE: JS tabs
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tabs = createBottomTabNavigator();

// AFTER: Native tabs
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
const Tabs = createNativeBottomTabNavigator();

<Tabs.Navigator>
  <Tabs.Screen name="Home" component={HomeScreen} />
  <Tabs.Screen name="Profile" component={ProfileScreen} />
</Tabs.Navigator>

Recommended Native Libraries

Decision Matrix

Common Pitfalls

• Assuming all polyfills needed: Check Hermes compatibility first
• Ignoring migration effort: Native navigators have slightly different APIs
• Over-customizing native components: If design requires heavy customization, JS might be better

Related Skills

• bundle-analyze-js.md - Measure polyfill impact
• bundle-library-size.md - Compare library sizes