---
title: "Creating Native Components That Accept React Native Subviews"
description: "React Native’s standard native-module documentation does not explain how to reuse an existing native container while rendering React Native views inside it. This Android-focused Kotlin guide builds a native bottom-sheet component with a ViewGroupManager, inflating a CoordinatorLayout XML layout whose second child becomes the draggable sheet content. It overrides addView to place the first React Native child in the main container and subsequent content in the bottom sheet, then exposes the component through TypeScript with style and children props. A sheetState prop accepts collapsed or expanded, while BottomSheetBehaviour emits a BottomSheetStateChange event so native gestures update React state. The guide concludes that ViewGroupManager enables flexible React Native layouts around native functionality, while noting that platform parity remains important."
---

# Creating Native Components That Accept React Native Subviews

[Shopify](https://yomu.fyi/company/shopify) · 2023-10-18 · Feb 25, 2020

**Type:** Tutorial

## Summary

React Native’s standard native-module documentation does not explain how to reuse an existing native container while rendering React Native views inside it. This Android-focused Kotlin guide builds a native bottom-sheet component with a ViewGroupManager, inflating a CoordinatorLayout XML layout whose second child becomes the draggable sheet content. It overrides addView to place the first React Native child in the main container and subsequent content in the bottom sheet, then exposes the component through TypeScript with style and children props. A sheetState prop accepts collapsed or expanded, while BottomSheetBehaviour emits a BottomSheetStateChange event so native gestures update React state. The guide concludes that ViewGroupManager enables flexible React Native layouts around native functionality, while noting that platform parity remains important.

## Context

The guide addresses the need to reuse an existing or platform-native component in React Native when building the functionality entirely with React Native is not possible or easy. Its example focuses on an Android bottom sheet that renders React Native subviews and supports gestures.

## Approach / What changed

It creates an Android Kotlin ViewGroupManager, inflates a CoordinatorLayout-based XML layout, overrides addView to route React Native children into the main content and bottom-sheet containers, and exposes the component through TypeScript. A sheetState prop and BottomSheetBehaviour listener connect programmatic state changes and native gesture events with React state.

## Takeaways

- The component expects two children: the first is placed in the main screen content, while the second is rendered inside the bottom sheet; additional children also go into the sheet in the initial implementation.
- The sheetState prop accepts collapsed or expanded, allowing React Native to set the bottom sheet’s initial or updated state programmatically.
- A BottomSheetBehaviour state listener emits BottomSheetStateChange, allowing native dragging to notify React Native and keep related UI state synchronized.

**Tags:** [Android](https://yomu.fyi/topic/android), [Architecture](https://yomu.fyi/topic/architecture), [React Native](https://yomu.fyi/topic/react-native)

- Source: [Shopify](https://shopify.engineering/creating-native-components-accept-react-native-subviews)
- Source URL: https://shopify.engineering/creating-native-components-accept-react-native-subviews
- Ingested by Yomu: 2026-08-31T01:13:10.352Z

[Read original post](https://shopify.engineering/creating-native-components-accept-react-native-subviews)