Display Networks

Recommended: JavaScript SDK for React Native

While this SDK is still supported, we recommend using newer JavaScript SDK, which is optimized for React Native, but also comes with a host of other benefits.

React Native provides access to networks through the dynamicClient.networks.evm property and allows you to switch networks using the dynamicClient.wallets.switchNetwork() method.

React Native

import { useEffect, useMemo, useState } from 'react'
import { dynamicClient } from '<path to client file>'

// Example: list EVM networks and switch using the primary wallet
export function NetworkPickerRN() {
  const [currentNetworkId, setCurrentNetworkId] = useState<number | string | null>(null)
  const evmNetworks = dynamicClient.networks.evm

  const primaryWallet = dynamicClient.wallets.primary
  const options = useMemo(
    () => evmNetworks.map((n) => ({ label: n.name, value: n.networkId })),
    [evmNetworks]
  )

  useEffect(() => {
    (async () => {
      if (!primaryWallet) return
      const { network } = await dynamicClient.wallets.getNetwork({ wallet: primaryWallet })
      setCurrentNetworkId(network)
    })()
  }, [primaryWallet])

  const onChange = async (value: number | string) => {
    if (!primaryWallet) return
    await dynamicClient.wallets.switchNetwork({
      wallet: primaryWallet,
      chainId: value,
    })
    setCurrentNetworkId(value)
  }

  return null
}