---
title: "Handling Multiple Native iOS Views in React Native"
description: "In this article Piotr Trocki, software developer at Callstack, explains how to handle multiple Native iOS views in React Native."
url: https://www.callstack.com/blog/handling-multiple-native-ios-views-in-react-native
updated: 2026-10-24T08:39:30.310Z
---

# Handling Multiple Native iOS Views in React Native

In this article Piotr Trocki, software developer at Callstack, explains how to handle multiple Native iOS views in React Native.

_By Piotr Trocki, Software Engineer @ Callstack · Published 2019-06-03 · Category: iOS_

This article based on [creating native ui components](https://facebook.github.io/react-native/docs/native-components-ios) and [native modules.](https://facebook.github.io/react-native/docs/native-components-ios)

## Intro

As a React Native developer with native background, I wanted to create an iOS view component of [react-native-viewpager](https://github.com/react-native-community/react-native-viewpager). This component allows the user to swipe left and right through pages of data. I opened the [docs](https://facebook.github.io/react-native/docs/native-components-ios) and followed it step by step, which seemed to work just fine. I was wondering, what about the case, when the parent view will have multiple native children views?

## Problem

Let’s consider the following case. React Native view can have more than one child view in the view tree eg.

[GitHub Gist](https://gist.github.com/callstack-bot/6a9f7447e7c771e8396eca662dc2bbdc)

Class _MyNativeView_ is a wrapper for _NativeComponent_ and exposes methods, which will be called on the iOS side. A component rendering two _MyNativeView’s_ inside a _View_ and it looks like as follow:

![screenshot presenting a component rendering two MyNativeView’s inside a View](https://www.callstack.com/assets/67eaca62dab5f24c2ca7f79b_67cf5b085aba4f4fd001d657_650c0266db364283d2b80d06_61e5a7567b811f799800d5d0_MyNativeView.jpeg)

The above picture shows example application, which contains two _MyNativeView’s_ and 2 _ButtonContainer’s,_ which contain two buttons called next and previous. These buttons in _ButtonContainer_ controls the behavior of the respective views.

When the user interacts with the component, like pressing the button or swipe, _MyNativeView_ should change the page. In this case, the component would not know which _MyNativeView_ should be handled and which _MyNativeView_ should change page. Below you will find a solution to this problem:

[GitHub Gist](https://gist.github.com/callstack-bot/bd118fbb9a68a7da50b8b8efde752be5)

Now the above component has a [reference](https://reactjs.org/docs/refs-and-the-dom.html) to a particular _MyNativeView,_ which allows us to use a specific instance of _MyNativeView_. Now the button can control which _MyNativeView_ should change its page.

[GitHub Gist](https://gist.github.com/callstack-bot/692440a2ab7e22e5ffe36105b6118183)

Let’s assume, that _goToNextPage_ and _goToPreviousPage_ changes pages of viewpager and call Objective-C method in iOS component. The documentation says, that it should be implemented like above.

But another question is, which view should call one of the above methods? _NativeComponent_ does not know, which view should change the page in this case. I’ve found the answer in React Native [repository](https://github.com/facebook/react-native/blob/b1f1c5375c25f7959becdc67b4ea97962987148b/React/Modules/RCTUIManager.m#L1062).

### Solution

Let’s change implementation of _goToNextPage_ and _goToPreviousPage_ using _UIManager:_

[GitHub Gist](https://gist.github.com/callstack-bot/c0a40ede20dd4c8bd0cc7e995d8e93ea)

_dispatchViewManagerCommand_ needs 3 parameters:

- \<rte-code\>(nonnull NSNumber \*)reactTag \<rte-code\>— id of react view.
- \<rte-code\>commandID:(NSInteger)commandID\<rte-code\> — Id of native method, that should be called
- \<rte-code\>commandArgs:(NSArray\<id\>\*)commandArgs\<rte-code\> — Args of native method, that we can pass from JS to Native side.

Now let’s describe the iOS part. To expose this method in JS, NativeModule needs export function:

[GitHub Gist](https://gist.github.com/callstack-bot/1002b0c0e2fe7db994535cb88f9d784e)

Here both methods are defined in the _RNCMyNativeViewManager_.m. Remember, that react bridge adds \<rte-code\>_(nonnull NSNumber\*)\<rte-code\> reactTag_ as the first parameter of each exported functions. This exported functions will find a particular view using _addUIBlock,_ which contains the _viewRegistry_ parameter and returns the component based on _reactTag,_ allowing it to call the method on the correct component. Now we are sure, that an appropriate view is handled correctly.  


## Summary:

- Use ref to create reference to your view component
- Method \<rte-code\>UIManager.dispatchViewManagerCommand\<rte-code\> call exported method from native module
- Remember to add \<rte-code\>_(nonnull NSNumber\*) reactTag\<rte-code\>_ as first parameter of exported function
- Checkout github [repo](https://github.com/ptrocki/react-native-viewpager) to see example usage

If you like the idea that I described in this article or want to talk about it, please contact me on [Twitter](https://twitter.com/pTr0cki). If you need more help in React Native or Open Source, feel free to [contact us](https://callstack.com/contact-us) at Callstack.