# PnP React Native - v5 to v6

> PnP React Native SDK - v5 to v6 | Embedded Wallets

### Overview

This guide provides a detailed step-by-step process to help you migrate your PnP React Native project from version 5 to version 6 of the SDK. This includes necessary changes to your `metro.config.js` and `globals.ts` files and updates for both bare React Native and Expo workflows.

## Metro configurations

### Expo workflow

#### Before

```javascript
const { getDefaultConfig } = require('expo/metro-config')

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname)

config.resolver.extraNodeModules = {
  assert: require.resolve('empty-module'), // assert can be polyfilled here if needed
  http: require.resolve('empty-module'), // stream-http can be polyfilled here if needed
  https: require.resolve('empty-module'), // https-browserify can be polyfilled here if needed
  os: require.resolve('empty-module'), // os-browserify can be polyfilled here if needed
  url: require.resolve('empty-module'), // url can be polyfilled here if needed
  zlib: require.resolve('empty-module'), // browserify-zlib can be polyfilled here if needed
  path: require.resolve('empty-module'),
  crypto: require.resolve('crypto-browserify'),
  stream: require.resolve('readable-stream'),
  buffer: require.resolve('buffer'),
}

config.transformer.getTransformOptions = () => ({
  transform: {
    experimentalImportSupport: false,
    inlineRequires: true,
  },
})

module.exports = config
```

#### After

```javascript
const { getDefaultConfig } = require('expo/metro-config')

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname)

config.resolver.extraNodeModules = {
  assert: require.resolve('empty-module'), // assert can be polyfilled here if needed
  http: require.resolve('empty-module'), // stream-http can be polyfilled here if needed
  https: require.resolve('empty-module'), // https-browserify can be polyfilled here if needed
  os: require.resolve('empty-module'), // os-browserify can be polyfilled here if needed
  url: require.resolve('empty-module'), // url can be polyfilled here if needed
  zlib: require.resolve('empty-module'), // browserify-zlib can be polyfilled here if needed
  path: require.resolve('empty-module'),
  stream: require.resolve('readable-stream'),
  buffer: require.resolve('buffer'),
}

// focus-start
config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName === 'crypto') {
    // when importing crypto, resolve to react-native-quick-crypto
    return context.resolveRequest(context, 'react-native-quick-crypto', platform)
  }
  // otherwise chain to the standard Metro resolver.
  return context.resolveRequest(context, moduleName, platform)
}
// focus-end

config.transformer.getTransformOptions = () => ({
  transform: {
    experimentalImportSupport: false,
    inlineRequires: true,
  },
})

module.exports = config
```

## Updating `globals.ts`

### Bare React Native workflow

```typescript

install()

// Needed so that 'stream-http' chooses the right default protocol.
// @ts-ignore
global.location = {
  protocol: 'file:',
}
// @ts-ignore
global.process.version = 'v16.0.0'
if (!global.process.version) {
  global.process = require('process')
  console.log({ process: global.process })
}
// @ts-ignore
process.browser = true
```

### Expo workflow

```typescript

// This file should only import and register the root. No components or exports
// should be added here.
renderRootComponent(App)
```

:::note

Make sure to install the `react-native-quick-crypto` module:

```bash
npm install react-native-quick-crypto
```

:::

## Updating `index.ts`

### Bare React Native workflow

```typescript

AppRegistry.registerComponent(appName, () => App)
```

### Expo workflow

```typescript

// This file should only import and register the root. No components or exports
// should be added here.
renderRootComponent(App)
```