A detailed walkthrough builds a ChatGPT-style AI chat app in React Native, showing how to achieve a native feel using Callstack's Liquid Glass component, react-native-keyboard-controller for keyboard-synced animations, Reanimated for UI-thread animations, and Skia for a shimmering 'thinking' text effect. It covers streaming replies via OpenAI's Responses API over a native WebSocket (react-native-nitro-websockets) rather than HTTP, implementing RAG with Pinecone as a function-calling tool, natively rendering markdown with react-native-enriched-markdown, and performance techniques like socket prewarming, native fetch, and profiling in release builds. The source code is open source on GitHub.
Table of contents
Liquid-glass Floating ComposerLet's send a message, shall we?Talking to OpenAI, nativelyAnswering Margelo questions with RAGSwiping to recentsWhy it all feels nativeA few general tipsConclusionQuestions this post answers
Why would you use a WebSocket instead of HTTP streaming for OpenAI's Responses API in a tool-calling chat app?
A WebSocket keeps one persistent connection to /v1/responses and continues a tool-calling turn by sending only new items plus a previous_response_id, avoiding resending the growing context on every HTTP request. This matters when the model calls tools mid-turn, since each round trip over HTTP would otherwise require a fresh request. OpenAI reports up to roughly 40% faster end-to-end performance for rollouts with 20 or more tool calls. Developers weighing streaming transports for AI chat features can track these tradeoffs on daily.dev.
How can you make a React Native WebSocket connection start faster on cold app launch?
react-native-nitro-websockets exposes a prewarmOnAppStart function that queues the connection intent so native code begins the TCP and TLS handshake on a background thread before the JS bundle finishes loading, then the later NitroWebSocket constructor adopts that warm connection instead of opening a new one. Measured gains were roughly 150ms on an iPhone 16 and 250ms on a Samsung Galaxy S22. Teams optimizing mobile app cold-start latency can follow techniques like this via daily.dev.
How do you make a UIKit Liquid Glass effect gracefully degrade on Android or older iOS in React Native?
Use @callstack/liquid-glass's isLiquidGlassSupported boolean, which is a real UIKit capability check on iOS 26+ and hard-coded false everywhere else, then branch: render LiquidGlassView when true, or a plain View with a fallback tint color and the same layout when false, so nothing shifts visually between platforms. React Native developers targeting iOS 26 glass effects can dig deeper into implementation patterns on daily.dev.