skills.rest
cometchat
cometchatOFFICIAL
Explore all skills by this author →
WebsiteGitHub

cometchat-native-placement

Plan and implement CometChat placement strategies in React Native apps.

74|2|Updated Apr 3, 2026
Search Tags:#navigation#react-native#modal#bottom-sheet#cometchat#placement-patterns#embedded-chat
One-click install
npx skills add https://github.com/cometchat/cometchat-skills --skill cometchat-native-placement
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cometchat-native-placement
Source: https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-native-placement
Command: npx skills add https://github.com/cometchat/cometchat-skills --skill cometchat-native-placement

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Architecting in-app chat in React Native without a clear pattern leads to inconsistent UX, navigation conflicts, and brittle integrations. This Skill provides five canonical placement patterns to guide developers in choosing and wiring chat surfaces (Stack, Bottom Tab, Modal, BottomSheet, Embedded) using CometChat components.

Core Features & Use Cases

  • Five placement patterns with concrete wiring guidance to React Navigation stacks, bottom tabs, modals, bottom sheets, and embedded layouts.
  • Guidance on when to use each pattern, platform considerations (safe areas, keyboard handling, gestures), and how to wire the provider chain without duplicating init.
  • Real-world scenarios: adding chat to a product detail screen (embedded) or creating a dedicated chat screen in a stack.

Quick Start

Choose a placement, wire navigation, and render the CometChat components accordingly.

Frequently Asked Questions about cometchat-native-placement

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to integrate in-app chat into React Native navigation?▼

Embedded chat placements render CometChat components directly within existing React Native screens, such as a product detail page. This pattern integrates chat without creating a dedicated screen, maintaining the existing layout context.

How do I handle keyboard behavior and safe areas when displaying a bottom sheet chat?▼

Bottom sheet chat placements require explicit height and prop handling to manage platform-specific safe areas and keyboard behavior. Wiring guidance ensures CometChat components adapt correctly to gestures and screen overlays without layout conflicts.

Can I place CometChat components inside existing React Native screens?▼

Yes, embedded chat placement renders CometChat components directly within existing React Native screens, such as a product detail page. This pattern integrates chat without creating a dedicated screen, maintaining existing layout context.

Do I need to follow a specific app root pattern to wire React Native chat navigation?▼

Yes, wiring chat navigation requires adherence to the four-wrapper app root pattern. This structure ensures the provider chain initializes correctly without duplication across stack navigation, bottom tabs, modals, and bottom sheets.

When should I use a modal versus a stack navigation pattern for React Native chat?▼

Use modal placements for temporary, overlay-style chat interactions, while stack navigation suits dedicated chat screens pushed onto the routing history. Choosing between them depends on the desired UX flow and platform-specific gesture handling.

Related Skills

Explore More Software Engineering Skills→
cometchatcometchat
74

cometchat-native-core

Integrate CometChat React Native UI Kit v5 with a four-wrapper provider pattern.

Official
Advanced
MAX5271MAX5271

cometchat-core

Standardize CometChat React UI Kit v6 initialization and login sequencing.

Community
Advanced
ernitpternitpt

modal-patterns

Enforce consistent modal and bottom sheet UI patterns with React Native design tokens.

Community
Intermediate
cometchatcometchat
74

cometchat-components

Catalog CometChat React UI Kit v6 components with imports and usage patterns.

Official
Intermediate