Skip to main content
Version: 4.6.1-saas

React Native Agent

Overview​

React Native Agent is a client-side SDK that provides NetFUNNEL 4 traffic control functionality for React Native applications.

Key Features​

  • Client-side SDK: Direct integration into React Native applications
  • Code-based integration: Precise control at button clicks, API calls, etc.
  • Native waiting room: WebView-based waiting room template
  • Real-time queue updates: Provides queue position, wait time, and progress information
  • Network recovery: Automatic recovery from network issues
  • Robust error handling: Comprehensive callback system
  • Lightweight SDK: Minimal dependencies

System Requirements​

  • React Native: 0.70.0 or higher
  • react-native-webview: 13.0.0 or higher
  • react-native-async-storage/async-storage: 1.23.1 or higher

Compatible Environments​

  • React Native applications: iOS and Android native apps
  • Hybrid apps: React Native-based hybrid applications

How It Works​

  1. SDK initialization: Initialize NetFUNNEL and configure settings
  2. Add WebView component: Add WebView component to display waiting room
  3. Code-based integration: Control traffic using nfStart and nfStop functions
  4. Waiting room display: WebView-based waiting room is automatically displayed

Agent Operation Flow​

Before waiting: Page load → Agent initialization → Trigger rule match

During waiting: NetFUNNEL server request → NetFUNNEL key issuance → Move to waiting room page

After waiting: Service page entry → NetFUNNEL key return

Integration Methods​

Code-based Integration​

Code-based integration supports two control types:

  1. Basic Control: Entry rate control
  2. Section Control: Maintain concurrent user count in specific section
Choosing an Integration Method

To compare basic control and section control and choose the most suitable approach for your use case, refer to the Integration Methods Overview.

Limitations​

URL-Triggered Integration Not Supported

React Native Agent does not support URL-Triggered integration. Only code-based integration can be used.

Quick Start​

To quickly get started with React Native Agent, refer to the Quick Start guide.

Sample Projects

Need a basic project for practice? Check out the Sample Projects.

Documentation​

Core Documentation​

Implementation Guides​

Related Content​