Installation and Initialization

This guide explains the installation and initialization process for the NetFUNNEL React Native agent.

---

Step 1: Package Installation

Add Dependencies

Add the following dependency to package.json:

{
  "dependencies": {
    "netfunnel-rn-agent": "https://agent-lib.stclab.com/agents/static/rn/netfunnel-rn-agent-latest.tgz"
  }
}

Install Package

Run the following command from the project root directory:

npm install

---

Step 2: 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

Client ID Location

You can find it by clicking the profile icon in the top right of the console screen, then selecting the Integration Credentials menu.

---

Step 3: Agent Initialization

The NetFUNNEL React Native agent must be initialized when the app starts.

Perform initialization at the start of the main() function in App.js or App.tsx:

import Netfunnel from 'netfunnel-rn-agent';

Netfunnel.initialize({
  clientId: '{{CLIENT_ID}}',  // Client ID obtained in Step 2
  serverUrl: '{{SERVER_URL}}',  // Optional
  errorUrl: '{{ERROR_URL}}',  // Optional
  networkTimeout: 3000,
  retryCount: 0,
  printLog: false,
  errorBypass: false,
  useNetfunnelTemplate: true,
  userId: '{{USER_ID}}',  // Optional
  useNetworkRecoveryMode: true
});

Initialization Parameters

Parameter	Type	Description	Conditions
clientId	String	User unique identifier	Cannot be empty string
serverUrl	String	NetFUNNEL server address	None (uses default address)
errorUrl	String	NetFUNNEL error page HTML address	None (uses default address)
networkTimeout	int	Maximum time to wait for network response	Default (ms): 3,000 Max (ms): 10,000 Min (ms): 100
retryCount	int	Number of retries on network request failure	Default (times): 0 Max (times): 10 Min (times): 0
printLog	bool	Whether to output logs for debugging	Default: false
errorBypass	bool	Whether to bypass on error	Default: false
useNetfunnelTemplate	bool	Whether to use custom NetFUNNEL waiting room from console	Default: true
userId	String	End-user unique identifier for blacklist/whitelist verification	Default: null
useNetworkRecoveryMode	bool	Feature to maintain waiting room and continue reconnection attempts based on networkTimeout when network connection is lost while waiting room is displayed	Default: false

Initialization Options Details

For detailed information about all initialization parameters, refer to the Initialization Options document.

---

Step 4: Add WebView Component

<Netfunnel.WebViewComponent /> is a component that renders Netfunnel's waiting room functionality as a webview in React Native applications.

This component operates based on parameters set with Netfunnel.initialize, displaying the waiting room UI to users or handling interactions with the Netfunnel server.

Place it alongside the NavigationContainer in the App component to render the waiting room webview independently of the app's navigation flow:

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 5: Verify Installation

To verify that the agent is installed correctly, check the following:

1. Initialization success: No errors should occur when the app starts
2. WebView component: <Netfunnel.WebViewComponent /> should render correctly
3. Check logs: If printLog: true is set, you can check logs with [NF4] prefix in the console

---

Troubleshooting

Package installation failure:

• Check network connection
• Verify dependency path in package.json

Initialization failure:

• Verify that clientId is set correctly
• Verify that it is not an empty string

WebView component not displayed:

• Verify that <Netfunnel.WebViewComponent /> is added in the correct location
• Verify that it is placed alongside NavigationContainer

---

Next Steps

• Quick Start: Get started with basic examples
• Integration Methods: Compare basic control and section control
• API Reference: Complete function specifications