# react-native-backtracks

# Getting started

To set up the example code, clone the Backtracks React Native git repository and run the following commands:

cd example
rm -rf node_modules && yarn install #to rebuild later, you need to delete node_modules directory
cd ios
pod install

To run the app for android run the following commands:

cd ..
yarn react-native run-android

To run the app for iOS open the current directory by typing the following command in the command line:

open .

Double tap on all the certificates and provisioning profiles in the directory: development.cer, distribution.cer, ExampleDevelopmentProfile.mobileprovision and ExampleDistributionProfile.mobileprovision

From the current directory double clik on the example.xcworkspace file to open the project.

Connect your device to the computer and choose your device as the destination device in the upper toolbar.

Tap on the Example project in project navigator on the left, choose the example target and in the tab Signing & Capabilities make sure that Automatically manage signing checkbox is unchecked.

Under Debug tab choose the ExampleDevelopmentProfile for the Provisioning Profile and under Release tab choose the ExampleDistributionProfile and run the project.

# Building your own react native library including backtracks

The sample code is provided as a resource to help you build your own application that wraps the native audio players, and binds with the backtracks podcast analytics library.

Please read the instructions at the link https://facebook.github.io/react-native/docs/native-modules-ios for an understanding of the process of how to create your own native module in react native. More specific instructions are provided below.

# Create project scaffolding

create-react-native-module --generate-example --example-react-native-version react-native@0.61 MyLibrary

# Add iOS dependencies for backtracks

Edit the file 'react-native-my-library.podspec' in the root directory of the created project and add the backtracks dependency:

  s.dependency 'PodcastAnalytics', '~> 1.0'

Also backtracks needs at least iOS 11.2, so in the podspec change this line:

  s.platforms    = { :ios => "11.2" }

And in example/ios/Podfile:

platform :ios, '11.2'

# Add Kotlin support to android project

Edit the file android/build.gradle and add to the following sections:

buildscript {
    ext.kotlin_version = '1.3.61'
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

Edit the file example/android/build.gradle and add to the following sections:

buildscript {
    ext {
        kotlin_version = '1.3.61'
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

# Bump android minSDK to support MediaPlayer2

To support media player 2, make the following changes to your android/build.gradle:

def DEFAULT_COMPILE_SDK_VERSION = 29
def DEFAULT_BUILD_TOOLS_VERSION = '29.0.2'
def DEFAULT_MIN_SDK_VERSION = 19
def DEFAULT_TARGET_SDK_VERSION = 29

and your example/android/build.gradle:

buildscript {
    ext {
        kotlin_version = '1.3.61'
        buildToolsVersion = "29.0.2"
        minSdkVersion = 19
        compileSdkVersion = 29
        targetSdkVersion = 29
    }
}

# Add Android dependencies for backtracks

Edit the file android/build.gradle and add the following dependencies

dependencies {
    implementation 'com.google.android.exoplayer:exoplayer-core:2.10.0'
    implementation "androidx.media2:media2-player:1.0.1"

    implementation group: 'fm.backtracks', name: 'analytics.android', version: '1.0.+', ext: 'aar', transitive: true, changing: true
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}

# Enable multidex support in android

As the number of methods will exceed the max allowed for single dex applications, enable multidex support in your android example/android/app/build.gradle

android {
    defaultConfig {
        multiDexEnabled true
    }
}

dependencies {
    implementation 'androidx.multidex:multidex:2.0.1'
}

# Write native iOS code

Open the xcworkspace file (using xcode) in the ios directory and copy in the .m and .h code from the sample project. (Leave the file names and class name unchanged from your generated project). Note that the code won't compile, you can see the code properly compiled later in the example/ios workspace

# Write native Android code

Open the android studio project in the android directory and copy in the .kt file code from the sample project (Rename them to match the .java file names and delete the .java files. Change package names and class names to match your Library name). IMPORTANT: change the getName() method to match your library name e.g. "MyLibrary". Note that the code won't compile, you can see the code properly compiled later in the example/android workspace

# Write the JavaScript code

Copy the App.js file from the sample project into your project. Search and replace (case-sensitive) String 'Backtracks' with 'MyLibrary' (or the name you gave when creating the project). Change the import to

import MyLibrary from 'react-native-my-library';

# Build and run the application

Now build and run your application using the instructions from the Getting Started section at the beginning of this README.