Sample react native app using mobile center

index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React from 'react';
import {
  AppRegistry,  
  Text,
  View,
  StyleSheet,  
  TouchableOpacity
} from 'react-native';

import Analytics from 'mobile-center-analytics';
import Crashes from 'mobile-center-crashes';

export default class newapp extends React.Component {
  constructor() {
    super();
    this.state = {
      analyticsEnabled: false,
      crashesEnabled: false
    };
    this.toggleAnalyticsEnabled = this.toggleAnalyticsEnabled.bind(this);
    this.toggleCrashesEnabled = this.toggleCrashesEnabled.bind(this);
  }

  async componentDidMount() {
    const component = this;
    const analyticsEnabled = await Analytics.isEnabled();
    component.setState({ analyticsEnabled });
    const crashesEnabled = await Crashes.isEnabled();
    component.setState({ crashesEnabled });
  }

  async toggleAnalyticsEnabled() {
    await Analytics.setEnabled(!this.state.analyticsEnabled);
    const analyticsEnabled = await Analytics.isEnabled();
    this.setState({ analyticsEnabled });
  }

  async toggleCrashesEnabled() {
    await Crashes.setEnabled(!this.state.crashesEnabled);
    const crashesEnabled = await Crashes.isEnabled();
    this.setState({ crashesEnabled });
  }

  render() {
    return (
      <View style={SharedStyles.container}>
          <Text style={SharedStyles.heading}>
            Sampler of Mobile Center 
          </Text>
          <Text style={SharedStyles.enabledText}>
            Crashes enabled: {this.state.crashesEnabled ? 'yes' : 'no'}
          </Text>
          <TouchableOpacity onPress={this.toggleCrashesEnabled}>
            <Text style={SharedStyles.toggleEnabled}>
              toggle
            </Text>
          </TouchableOpacity>
          
          <Text style={SharedStyles.enabledText}>
            Analytics enabled: {this.state.analyticsEnabled ? 'yes' : 'no'}
          </Text>
          <TouchableOpacity onPress={this.toggleAnalyticsEnabled}>
            <Text style={SharedStyles.toggleEnabled}>
              toggle
            </Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => Analytics.trackEvent('newapp event', { message: 'MC analytics works' })}>
            <Text style={SharedStyles.button}>
              Track Event
            </Text>
          </TouchableOpacity>
      </View>
    );
  }
}

const SharedStyles = StyleSheet.create({
  heading: {
    fontSize: 24,
    textAlign: 'center',
    marginBottom: 20,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  button: {
    color: '#4444FF',
    fontSize: 18,
    textAlign: 'center',
    margin: 10,
  },
  enabledText: {
    fontSize: 14,
    textAlign: 'center',
  },
  toggleEnabled: {
    color: '#4444FF',
    fontSize: 14,
    textAlign: 'center',
    marginBottom: 10,
  },
});

AppRegistry.registerComponent('newapp', () => newapp);

index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React from 'react';
import {
  AppRegistry,  
  Text,
  View,
  StyleSheet,  
  TouchableOpacity
} from 'react-native';

import Analytics from 'mobile-center-analytics';
import Crashes from 'mobile-center-crashes';
import Push from 'mobile-center-push';

export default class newapp extends React.Component {
  constructor() {
    super();
    this.state = {
      analyticsEnabled: false,
      crashesEnabled: false,
      pushEnabled: false
    };
    this.toggleAnalyticsEnabled = this.toggleAnalyticsEnabled.bind(this);
    this.toggleCrashesEnabled = this.toggleCrashesEnabled.bind(this);
    this.togglePushEnabled = this.togglePushEnabled.bind(this);
  }

  async componentDidMount() {
    const component = this;
    const analyticsEnabled = await Analytics.isEnabled();
    component.setState({ analyticsEnabled });
    const crashesEnabled = await Crashes.isEnabled();
    component.setState({ crashesEnabled });
    const pushEnabled = await Push.isEnabled();
    component.setState({ pushEnabled });
  }

  async toggleAnalyticsEnabled() {
    await Analytics.setEnabled(!this.state.analyticsEnabled);
    const analyticsEnabled = await Analytics.isEnabled();
    this.setState({ analyticsEnabled });
  }

  async toggleCrashesEnabled() {
    await Crashes.setEnabled(!this.state.crashesEnabled);
    const crashesEnabled = await Crashes.isEnabled();
    this.setState({ crashesEnabled });
  }

  async togglePushEnabled() {
    await Push.setEnabled(!this.state.pushEnabled);
    const pushEnabled = await Push.isEnabled();
    this.setState({ pushEnabled });
  }

  render() {
    return (
      <View style={SharedStyles.container}>
          <Text style={SharedStyles.heading}>
            Sampler of Mobile Center 
          </Text>
          <Text style={SharedStyles.enabledText}>
            Crashes enabled: {this.state.crashesEnabled ? 'yes' : 'no'}
          </Text>
          <TouchableOpacity onPress={this.toggleCrashesEnabled}>
            <Text style={SharedStyles.toggleEnabled}>
              toggle
            </Text>
          </TouchableOpacity>
          <Text style={SharedStyles.enabledText}>
            Push enabled: {this.state.pushEnabled ? 'yes' : 'no'}
          </Text>
          <TouchableOpacity onPress={this.togglePushEnabled}>
            <Text style={SharedStyles.toggleEnabled}>
              toggle
            </Text>
          </TouchableOpacity>
          <Text style={SharedStyles.enabledText}>
            Analytics enabled: {this.state.analyticsEnabled ? 'yes' : 'no'}
          </Text>
          <TouchableOpacity onPress={this.toggleAnalyticsEnabled}>
            <Text style={SharedStyles.toggleEnabled}>
              toggle
            </Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => Analytics.trackEvent('newapp event', { message: 'MC analytics works' })}>
            <Text style={SharedStyles.button}>
              Track Event
            </Text>
          </TouchableOpacity>
      </View>
    );
  }
}

const SharedStyles = StyleSheet.create({
  heading: {
    fontSize: 24,
    textAlign: 'center',
    marginBottom: 20,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  button: {
    color: '#4444FF',
    fontSize: 18,
    textAlign: 'center',
    margin: 10,
  },
  enabledText: {
    fontSize: 14,
    textAlign: 'center',
  },
  toggleEnabled: {
    color: '#4444FF',
    fontSize: 14,
    textAlign: 'center',
    marginBottom: 10,
  },
});

AppRegistry.registerComponent('newapp', () => newapp);

test-react-native-link.sh

#!/bin/bash
echo "Creating a brand new react native app..."
react-native init newapp && cd newapp

echo "Installing mobile center packages..."
npm i --save mobile-center mobile-center-analytics mobile-center-crashes mobile-center-push

echo "Git init commit"
git init && git add . && git commit -m "init commit"

echo "Update index.ios.js"
curl -o ./index.ios.js https://gist.githubusercontent.com/dhei/fca76754c9c7c6510636b9eb0ddd0c02/raw/1a64ea176e0e3ac9e7e9b326df2729966381c61a/index.ios.js
echo "Update index.android.js"
curl -o ./index.android.js https://gist.githubusercontent.com/dhei/fca76754c9c7c6510636b9eb0ddd0c02/raw/a58e599a417e44fa877d2f1e5cd52d51eeaa10d1/index.android.js
git add . && git commit -m "update index.ios.js and index.android.js"

echo "Running react-native link"
printf 'android-appsecret' | react-native link mobile-center
printf 'ios-appsecret' | react-native link mobile-center
printf '\n' | react-native link mobile-center-analytics
printf '\n' | react-native link mobile-center-analytics
printf '\n' | react-native link mobile-center-crashes
printf '\n' | react-native link mobile-center-crashes
react-native link mobile-center-push

echo "Commit changes of react-native link"
git add . && git commit -m "react-native link mobile center modules"

echo "Launching iOS app..."
react-native run-ios

The purpose of test-react-native-link.sh script is to automate linking mobile center modules to a brand new react native app.

Basic usage:

1. download the test-react-native-link.sh script
2. [optional] replace android-appsecret and ios-appsecret with real app secrets if you want to test against a real mobile center app
3. run bash .\test-react-native-link.sh. Because Xcode 9 requires iOS apps to be signed before you can build, you might need to open Xcode and configure automatic signing before running react-native run-ios.