Quick Start

Get started with NetFUNNEL 4 React Native Agent in 5-10 minutes with this quick start guide.

What You Can Do in This Guide

• Code-based integration: Control traffic with precise timing at the button/API level

Choosing an Integration Method

To compare integration methods and find the most suitable approach for your use case, refer to the Integration Methods Overview.

---

Prerequisites

• NetFUNNEL console access
• React Native project
• Basic JavaScript/TypeScript knowledge

Sample Projects

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

---

Step 1: Get Client ID

1. Go to the NetFUNNEL console
2. Click the profile icon in the top right
3. Select the Integration Credentials menu
4. Copy the Client ID

---

Step 2: Installation and Initialization

Package Installation

npm install netfunnel-rn-agent

Initialization

Initialize NetFUNNEL in App.js or App.tsx:

import Netfunnel from 'netfunnel-rn-agent';

// Initialize when app starts
Netfunnel.initialize({
  clientId: 'your-client-id'  // Client ID obtained in Step 1
});

Add WebView Component

Add Netfunnel.WebViewComponent in App.js or App.tsx:

import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import Netfunnel from 'netfunnel-rn-agent';

export default function App() {
  return (
    <View>
      <NavigationContainer>
        {/* Your app navigation */}
      </NavigationContainer>
      <Netfunnel.WebViewComponent />
    </View>
  );
}

---

Step 3: Choose Integration Method

Basic Control

Best for: Button clicks, API calls, single-step operations

1. Create a segment in the console:

   • Go to Projects → Segment → Create Segment
   • Select Basic Control
   • Set Limited Inflow to 0 (for testing)

2. Add to code:

import Netfunnel from 'netfunnel-rn-agent';

function handleButtonPress() {
  Netfunnel.nfStart(
    "{{PROJECT_KEY}}",  // Project key from console
    "{{SEGMENT_KEY}}",  // Segment key from console
    function(response) {
      nfCallback(response);
    }
  );
}

function nfCallback(response) {
  const { status, statusCode, message } = response;
  switch(status) {
    case 'Success':
      // When entry or bypass response is received
      // Execute existing service logic
      break;
    case 'Error':
      // When system error occurs
      // Generally handled the same as Success
      break;
    case 'NetworkError':
      // When network error occurs
      // Handle retry or notification
      break;
  }
}

// Return key after action completion
function handleActionComplete() {
  Netfunnel.nfStop(
    "{{PROJECT_KEY}}",
    "{{SEGMENT_KEY}}"
  );
}

Section Control

Best for: Payment processes, multi-step processes

1. Create a segment in the console (same as basic control)
2. Add to code:

// Start section
Netfunnel.nfStartSection(
  "{{PROJECT_KEY}}",
  "{{SEGMENT_KEY}}",
  function(response) {
    nfCallback(response);
  }
);

// End section (when entire process is complete)
Netfunnel.nfStopSection(
  "{{PROJECT_KEY}}",
  "{{SEGMENT_KEY}}"
);

---

Step 4: Testing

1. Set Limited Inflow to 0 and verify that the waiting room is displayed correctly
2. Set Limited Inflow to 1 (should enter immediately)
3. Verify key return in Network tab (ts.wseq?opcode=5004 HTTP 200)

---

Need Help?

• Troubleshooting: Common issues and solutions
• Check NetFUNNEL logs in browser console (set printLog: true)
• Verify that project/segment keys from console match exactly