LogoLogo
API Status
  • 👋Welcome
  • 🌐What is Morpheus Platform?
    • Interoperability
  • â„šī¸Help
    • 📗Glossary
    • 🆘Support
    • Firewall problems
    • EULA
  • CREATION
    • 🎮Unreal Development
      • ⚡Get Started
        • âš’ī¸Download the Editor
        • âĢUpload Content
        • 🌎Creating your own map
        • 📝Morpheus Base Project
        • ❓Differences from Unreal
          • 🧍Character Configuration
        • 📡Morpheus Networking
          • Introduction to Morpheus Networking
          • Network Levels
          • Replicated Properties
          • RPCs
          • Morpheus Render Targets
          • Morpheus Array
          • Networking FAQ
          • Replicating Sublevels
      • 📚Features & Guides
        • 📒Example Plugin
          • Nameplates
          • In-game roles
          • Resizing
        • 🏊Actor Pooling
        • 🔊Audio
        • 🎭Avatars
          • Creating an Avatar
          • Attachments
            • MML Attachments
          • Custom Animation Variables
          • Importing an NFT collection
          • Capsules and Mesh Transforms
        • 🤖Bots
        • đŸŽ™ī¸Chat
          • Unreal Text Chat
        • đŸŽ›ī¸Control Panels
          • Control Panel Configuration
          • DJ booth mission control
          • Observer Controls
        • 🔉Crowd Audio
        • đŸ¤ŧCrowd Rendering
          • Legacy Animated Crowd
            • Animated Crowd Console Commands
            • Attaching static meshes to crowd members
          • Crowd Materials
          • Performance Parameters
          • Live Config Settings
          • Crowd Animation
            • Crowd Anim Blueprint
              • User Guide - Crowd Anim Blueprint
              • Reference Guide - ABP Nodes
                • Animation Playback
                • States and State Machines
                • Variables
                • Transitions
                • Special
                • Blends
                • Additional Notes
        • 🍱Helpers & Extras
          • "Instanced Objects" in Blueprints
          • Objects with "world context"
          • Making DataAsset classes
          • Duplicate Objects
          • The Bootflow Subsystem
          • The "Wait For Condition" System
          • Advanced Graphics settings
          • Listening to inputs on UObjects
          • Morpheus UserID
          • World Services
          • M2Extras: Skins System
        • đŸ–Ĩī¸Loading Screen
        • ⚡Live Config
          • Editing for a World
          • Editing Locally
          • Default Settings
          • Accessing via Blueprint
          • Adding New Settings
          • Overriding Defaults
          • Using Arrays
        • 🧊MML
        • đŸ•ēMotion Capture
        • 📡Networking
        • đŸ“ĸNotifications
        • Raycastable Crowd
        • 🌐Singletons
        • 📱Streaming & Multiplatform
          • GFN on mobile
        • đŸ–Ĩī¸UI
          • "UI Mode"
        • đŸ—ƒī¸User Collections
          • Creating a New Object Definition
          • Accessing from Unreal
            • Creating Objects Definitions
            • Transfer Objects
            • User Collection Views
            • Receiving Updates
        • đŸ“ēVideo Players
          • Embedded Video Player
          • Millicast video streaming
            • How to Setup an In-Game Video Stream
            • Picture-in-Picture mode
          • Streaming Video Player
            • How to Setup a URL Video Player
            • Picture-in-Picture mode
        • 🐞Visual Debugging
          • Inspector
        • đŸĒŸWeb UI
        • Online Services
          • KV Store Service
        • 💠Web Requests
          • Http Requests
            • Legacy HTTP Nodes
          • JSON Handling
          • WebSockets
          • Identity Validation
          • Allowed External URLs
          • Walkthrough Example
            • Example Counter Service
        • âœˆī¸World Travel
          • World Travel in the editor
        • Avatar Physics Assets
        • Action Gameplay Helper Components
      • 🔑Workflows
        • â†—ī¸Upgrade the Editor
          • đŸ–Ĩī¸Version History
        • âš™ī¸Editing Project Settings
        • 📈Profiling
        • đŸ§ēMarketplace Importing
        • đŸ› ī¸Extra Workflows
          • Setup Play-in-Editor
          • Setup Local Asset Validation
          • Adding Gameplay Tags
          • Validating Game Assets
          • Custom Connection Modes
          • Connect Editor to a World
          • Common Issues
      • 📚Useful Reading
        • ⭐Best Practices
    • 🌎Worlds
      • 📩Invite Players
        • Setting Role Groups
      • Persistent Worlds
      • Always on Worlds
    • 📅Running events
      • ✅Large scale events - Checklist
      • 👾Anti-Cheat (EAC)
      • 🎮Player Entry
        • 📱React Native
        • Steam
        • đŸ’ģHardware Reqs
      • đŸŽĨBroadcast
        • 📹OBS Integration
      • Failover
      • 🏁Capacity And Queue Management
  • ADMINS
    • đŸ‘ĒAccess Control
      • Adding metaverse contributors
      • Creating a new project
    • 💲Pricing
      • Development Support
      • Included Usage & Overages
      • Cloud Streaming
      • Access Modes
      • War Room Support
      • Platform SLA
    • âš™ī¸Settings
      • đŸ—ƒī¸Projects
  • APIs and Tooling
    • đŸ–Ĩī¸API Reference
      • Accounts
      • Events
      • Key/Value Store
      • Organizations
      • Realtime
      • User Profile
      • World Builder
      • Worlds
    • đŸ’ģTemplate Web App
      • đŸ’ĸModeration
    • Pixel Streaming
    • 🚀Launcher
  • Integrations
    • 📊Analytics
      • Sending events from web
      • 🎮Sending Events from Unreal
    • đŸ’ŦChat
      • 🎮Integrating Pubnub with your Unreal Project
      • Adding Moderation to Chat
Powered by GitBook
On this page
  • Downloading and Setting Up the Project
  • Download our Example Project
  • Installing project packages
  • Starting Up the Project on your Device

Was this helpful?

  1. CREATION
  2. Running events
  3. Player Entry

React Native

Supporting Mobile Accessibility to your Event for Users

PreviousPlayer EntryNextSteam

Last updated 3 months ago

Was this helpful?

You can directly embed an MSquared streaming client into a WebView in your own React Native app. You can see the required configuration in our example app and, by following the guide below, you can test the end-to-end flow!

Downloading and Setting Up the Project

Download our Example Project

Navigate to our public github repository here:

This contains all the code you need to run an example mobile application using Expo Go.

The example will connect you to one of our public-facing persistent worlds that is open to all users, and gives you an example of what joining an experience via the WebView looks like.

Download and extract a copy of this project into a directory of your choosing.

For Native Devices

  • You should be able to find the Expo Go app in the relevant app store for your device. Simply download and install. The app should look like the below:

For Emulators:

  • Download the relevant emulator. E.g. for Android, you can download the latest version of Android Studio, and spin up their default "Medium Phone" virtual device.

  • Download Expo Go for emulators via the link above. You should find a file named Exponent-[version #].apk .

  • Drag the .apk file onto your virtual device to install app on the emulator

Installing project packages

Once your device OR emulator is set up:

Navigate to the project directory in your terminal, and run: npm i . If successful, you should see output in your terminal that looks something like this (this command may find vulnerabilities; this can be safely ignored in most cases, but you are free to address these issues in your project should you wish):

Ensure you have NodeJS installed before attempting to run npm i, otherwise this command will fail

Starting Up the Project on your Device

Once you've installed all the relevant packages, and Expo Go is is up and running on your device/emulator, in your project repo execute:

  • npx expo start

If this command does not work on your native device (e.g. your android phone), execute a different command in your terminal from your project directory:

  • npx expo start --tunnel - this will allow your device to connect to your development project.

This may require you to install an additional package: The package @expo/ngrok@^4.1.0 is required to use tunnels, would you like to install it globally?

  • Simply enter 'y' to accept and install.

You can now either scan the QR code, or copy and paste the relevant exp:// url from the logs into the expo app. This should load an example landing page, from which you can enter our example MSquared world.

If successful, you should see the experience run in your device/emulator as shown in the example at the top of this page!

Also ensure you download onto your device:

📅
🎮
📱
https://github.com/msquared-io/msquared-react-native-webview
Expo Go
Example of what you should see in your terminal after running the start command