{"library":"react-native-branch","title":"Branch Metrics React Native SDK","description":"react-native-branch is the official React Native SDK for Branch Metrics, a comprehensive mobile linking and attribution platform. It enables developers to integrate deep linking, deferred deep linking, mobile attribution, and analytics into their React Native applications, supporting both iOS and Android platforms. The current stable version is 6.9.0, with frequent updates (typically monthly or bi-monthly) to align with native Branch SDK releases and to expose new methods for compliance and functionality. Key differentiators include its robust deep linking capabilities across platforms, detailed attribution analytics for marketing campaigns, and features like Universal Links and App Links for seamless user experiences. It abstracts much of the underlying native SDK complexity, providing a unified JavaScript interface.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-branch"],"cli":null},"imports":["import branch from 'react-native-branch';","import { BranchUniversalObject } from 'react-native-branch';","import { BranchEvent } from 'react-native-branch';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useEffect, useState } from 'react';\nimport { Text, View, StyleSheet, Alert, Linking } from 'react-native';\nimport branch, { BranchUniversalObject, BranchEvent } from 'react-native-branch';\n\nconst HomeScreen = () => {\n  const [latestParams, setLatestParams] = useState(null);\n\n  useEffect(() => {\n    // Branch initialization and deep link subscription\n    const unsubscribe = branch.subscribe(({ error, params, uri }) => {\n      if (error) {\n        console.error('Error from Branch: ' + error);\n        return;\n      }\n      console.log('Branch Params:', params);\n      console.log('Branch URI:', uri);\n      setLatestParams(params);\n\n      if (params['+non_branch_link']) {\n        const nonBranchUrl = params['+non_branch_link'];\n        Alert.alert('Non-Branch Link', `Opened non-Branch URL: ${nonBranchUrl}`);\n        Linking.openURL(nonBranchUrl);\n        return;\n      }\n\n      if (params['+clicked_branch_link']) {\n        Alert.alert('Branch Link Opened', `Data: ${JSON.stringify(params, null, 2)}`);\n        // Handle routing based on params (e.g., params.screen, params.productId)\n      } else {\n        Alert.alert('App Opened', 'No Branch link clicked or initial session.');\n      }\n    });\n\n    // Example: Create a Branch Universal Object and generate a short URL\n    const createAndShareLink = async () => {\n      try {\n        let buo = await branch.createBranchUniversalObject('content/12345', {\n          locallyIndex: true,\n          title: 'My Awesome Product',\n          contentDescription: 'Check out this amazing product!',\n          contentMetadata: {\n            productId: '12345',\n            itemCategory: 'electronics',\n            customData: 'important_info',\n          },\n        });\n\n        let linkProperties = {\n          feature: 'share',\n          channel: 'app_share',\n          campaign: 'product_promo',\n        };\n\n        let controlParams = {\n          $desktop_url: 'https://example.com/product/12345',\n          $ios_url: 'https://apps.apple.com/app/id123456789',\n          $android_url: 'https://play.google.com/store/apps/details?id=com.yourapp',\n        };\n\n        let { url } = await buo.generateShortUrl(linkProperties, controlParams);\n        console.log('Generated Branch URL:', url);\n\n        // Example: Log a custom event\n        let event = new BranchEvent(BranchEvent.ViewItem, buo, {\n          transaction_id: 'trans_abc123',\n          currency: 'USD',\n          revenue: 10.00,\n        });\n        event.logEvent();\n        console.log('Logged custom event: ViewItem');\n\n      } catch (err) {\n        console.error('Error creating/logging Branch event or link:', err);\n      }\n    };\n\n    createAndShareLink();\n\n    return () => {\n      unsubscribe();\n    };\n  }, []);\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>Branch SDK Example</Text>\n      {latestParams ? (\n        <View>\n          <Text style={styles.subtitle}>Latest Deep Link Params:</Text>\n          <Text style={styles.params}>{JSON.stringify(latestParams, null, 2)}</Text>\n        </View>\n      ) : (\n        <Text>Waiting for deep link or initial app open...</Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20,\n    backgroundColor: '#F5FCFF',\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    marginBottom: 20,\n  },\n  subtitle: {\n    fontSize: 18,\n    fontWeight: '600',\n    marginTop: 10,\n    marginBottom: 5,\n  },\n  params: {\n    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',\n    fontSize: 12,\n    backgroundColor: '#e0e0e0',\n    padding: 10,\n    borderRadius: 5,\n  },\n});\n\nexport default HomeScreen;\n","lang":"typescript","description":"This quickstart demonstrates how to initialize the Branch SDK, subscribe to deep link events, and create/log a Branch Universal Object and custom event.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}