npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rn-analytics

v1.0.0

Published

The hassle-free way to add analytics to your React-Native app.

Downloads

3

Readme

@segment/analytics-react-native

The hassle-free way to add analytics to your React-Native app.

Commitizen friendly CircleCI Codecov npm

Prerequisite

Android

  • Gradle 4+
    • Run ./gradlew wrapper --gradle-version=4.4 in your android folder
  • Build Tools 3+
    • Upgrade com.android.tools.build:gradle to 3.1.4 in your android/build.gradle file

iOS

Installation

$ yarn add @segment/analytics-react-native
$ yarn react-native link

Usage

See the API docs for more details.

import analytics from '@segment/analytics-react-native'
import Mixpanel from '@segment/analytics-react-native-mixpanel'
import GoogleAnalytics from '@segment/analytics-react-native-google-analytics'

analytics
    .setup('writeKey', {
        using: [Mixpanel, GoogleAnalytics],
        recordScreenViews: true,
        trackAppLifecycleEvents: true,
        trackAttributionData: true,

        android: {
            flushInterval: 60,
            collectDeviceId: true
        },
        ios: {
            trackAdvertising: true,
            trackDeepLinks: true
        }
    })
    .then(() =>
        console.log('Analytics is ready')
    )
    .catch(err =>
        console.error('Something went wrong', err)
    )

analytics.track('Pizza Eaten')
analytics.screen('Home')

Sending data to destinations

There are two ways to send data to your analytics services through this library:

  1. Through the Segment servers
  2. Directly from the device using bundled SDK’s

Note: Refer to the specific destination’s docs to see if your tool must be bundled in the app or sent server-side.

Cloud-based Connection Modes

When an destination’s SDK is not packaged, but it is enabled via your dashboard, the request goes through the Segment REST API, and is routed to the service’s server-side API as described here.

Packaging Device-based destination SDKs

By default, our @segment/analytics-react-native packages does not contain any device-based destinations.

We recommend using device-based destinations on a need-to-use basis to reduce the size of your application, and avoid running into the dreaded 65k method limit on Android.

If you would like to package device-based destinations, first search for the dependency you need using the list below. You'll need to run react-native link and add it in the .using() configuration method. Example using Google Analytics :

$ yarn add @segment/analytics-react-native-google-analytics
$ yarn react-native link

In your code :

import analytics from '@segment/analytics-react-native'
import GoogleAnalytics from '@segment/analytics-react-native-google-analytics'

await analytics.setup('writeKey', {
  using: [GoogleAnalytics]
})

Integrations

All integrations have the same version as @segment/analytics-react-native

| Name | iOS | Android | npm package | | ------------------------------------------------------------------------------------------------------------ | ------------------ | ------------------ | --------------------------------------------------------- | | Adjust | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-adjust | | Amplitude | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-amplitude | | Appboy | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-appboy | | AppsFlyer | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-appsflyer | | Branch | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-branch | | Bugsnag | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-bugsnag | | ComScore | :white_check_mark: | :x: | @segment/analytics-react-native-comscore-ios | | Countly | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-countly | | Crittercism | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-crittercism | | Facebook App Events | :white_check_mark: | :x: | @segment/analytics-react-native-facebook-app-events-ios | | Firebase | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-firebase | | Flurry | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-flurry | | Google Analytics | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-google-analytics | | Intercom | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-intercom | | Localytics | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-localytics | | Mixpanel | :white_check_mark: | :white_check_mark: | @segment/analytics-react-native-mixpanel | | Quantcast | :x: | :white_check_mark: | @segment/analytics-react-native-quantcast-android | | Taplytics | :white_check_mark: | :x: | @segment/analytics-react-native-taplytics-ios | | Tapstream | :x: | :white_check_mark: | @segment/analytics-react-native-tapstream-android |

Troubleshooting

iOS support without CocoaPods

We highly recommend using Cocoapods.

However, if you cannot use Cocoapods, you can manually install our dynamic framework allowing you to send data to Segment and on to enabled cloud-mode destinations. We do not support sending data to bundled, device-mode integrations outside of Cocoapods.

Here are the steps for installing manually:

  1. Add analytics-ios as a npm dependency: yarn add @segment/analytics-ios@github:segmentio/analytics-ios#3.6.10
  2. In the General tab for your project, search for Embedded Binaries and add the Analytics.framework Embed Analytics.framework

Please note, if you are choosing to not use a dependency manager, you must keep files up-to-date with regularly scheduled, manual updates.

Setup CocoaPods in an existing project

  1. Check that ios/Podfile doesn't exist

  2. cd ios

  3. pod init

  4. Open Podfile

  5. Edit your app target to have these pod declarations and the Add new pods below this line comment :

    target 'MyReactNativeApp' do
      pod 'React', :path => '../node_modules/react-native'
      pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
    
      # Add new pods below this line
    end
  6. pod install

"Failed to load [...] native module"

If you're getting a Failed to load [...] native module error, it means that some native code hasn't been injected to your native project.

iOS

If you're using Cocoapods, check that your ios/Podfile file contains the right pods :

  • Failed to load Analytics native module, look for the core native module:
    pod 'RNAnalytics', :path => '../node_modules/@segment/analytics-react-native'
  • Failed to load [...] integration native module, look for the integration native module, example with Google Analytics:
    pod 'RNAnalyticsIntegration-Google-Analytics', :path => '../node_modules/@segment/analytics-react-native-google-analytics'

Also check that your Podfile is synchronized with your workspace, run pod install in your ios folder.

If you're not using Cocoapods please check that you followed the iOS support without CocoaPods instructions carefully.

Android

Check that android/app/src/main/.../MainApplication.java contains a reference to the native module:

  • Failed to load Analytics native module, look for the core native module:

    import com.segment.analytics.reactnative.core.RNAnalyticsPackage;
    
    // ...
    
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            // ...
            new RNAnalyticsPackage()
        );
    }
  • Failed to load [...] integration native module, look for the integration native module, example with Google Analytics:

    import com.segment.analytics.reactnative.integration.google.analytics.RNAnalyticsIntegration_Google_AnalyticsPackage;
    
    // ...
    
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            // ...
            new RNAnalyticsIntegration_Google_AnalyticsPackage()
        );
    }