Skip to content
  • Services
    • Strategy
    • Customer Experience
    • Agile Delivery
    • Security
  • About
  • Partners
    • Aha!
    • Amazon Web Services (AWS)
    • Atlassian
    • Cloudflare
    • GitHub
    • InVision
    • Ionic
    • Pendo
    • Radar
    • Vue.js
  • Work
    • Modus Create Labs
  • Insights
    • Blog
  • Careers
  • Contact
  • Services
    • Strategy
    • Customer Experience
    • Agile Delivery
    • Security
  • About
  • Partners
    • Aha!
    • Amazon Web Services (AWS)
    • Atlassian
    • Cloudflare
    • GitHub
    • InVision
    • Ionic
    • Pendo
    • Radar
    • Vue.js
  • Work
    • Modus Create Labs
  • Insights
    • Blog
  • Careers
  • Contact
October 19, 2015

Leverage Existing iOS Views In Your React Native App

Front End Development, React

While React Native is a relatively new framework, native iOS application development has been around since March 2008. Through the years, the development community has released many open source components, companies have developed countless internal artifacts and, more importantly, Apple has provided us with a library of first party components that we can embed in our application. We’re going to take a look at how we can take an existing native iOS UI View Controller and render it inside our React Native app.

Let’s Visualize the App

For us to figure out how to render an external iOS View Controller we should visualize what our Native App will look like. On the left hand side, we have our view controller that will render and be able to communicate with our React Native code on the right.

Native App View

In order to accomplish the rendering of the view and facilitate communication to the React Native app, we need to create a React Native Module that logically encapsulates this View Controller instance.

Native App View with custom view manager highlighted

Before we continue further, we should take a look at the component structure of a standard React Native iOS application.

component structure of a standard React Native iOS application

The one important component to note here is the instance of UIViewController (named rootViewController in your AppDelegate implementation).

Our next step here is to expose our rootViewController variable as a property attached to our AppDelegate. This will allow for other classes to reference this controller, and in our case if they are an instance of UIViewController present themselves on the screen.

Our Native Module

Now that we have our rootViewController accessible from outside our AppDelegate we can create our Native Module that will wrap the view we want to display. For our example we will be using the MPMediaPickerController. This is a subclass of UIViewController that is responsible for displaying the iOS Media Library (aka iPod library). The MPMediaPickerController is an excellent example since it is a modal controller and also implements a delegate (MPMediaPickerControllerDelegate) that we will leverage.

Here is the sample MediaController class we will be implementing. Note: to support playing the audio track selected, we are including use of the AVAudioPlayer class.

The following are a few snippets that handle the two major things we need:
1) Displaying and hiding the media library

2) Communicating with our React Native application in regards to what was done in the MPMediaPickerController

Here we’re firing an event SongPlaying through the RCTBridge with the track title.

Here we are adding a listener for the event and updating our state accordingly.

For further reference, here is the full implementation of our MediaController

Posted in Front End Development, React
Share this

Stan Bershadskiy

Stan Bershadskiy specializes in all things JavaScript with vast knowledge in Sencha frameworks. Recently, he has directed his focus towards React Native and has co-authored The React Native Cookbook. Stan is located in New York City and can be found presenting at conferences around the country. During his time with Modus Create, Stan filled the role of Architect.
Follow

Related Posts

  • React Navigation and Redux in React Native Applications
    React Navigation and Redux in React Native Applications

    In React Native, the question of “how am I going to navigate from one screen…

  • Using ES2016 Decorators in React Native
    Using ES2016 Decorators in React Native

    *picture courtesy of pixabay Decorators are a popular bit of functionality currently in Stage 1…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Join Our Global Team

Would you like to be a Modite? We are redefining distributed consultative services. We have open positions throughout the globe.

See Open Positions

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Newsroom
  • Careers
  • Contact
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top