installation.md 6.38 KB
Newer Older
1 2 3 4 5 6 7 8 9
# Installation

As with any React Native project, the first step is to add the project as an npm dependency.

The 2nd is to do some platform specific setup so as to be able to work with Apple and Google's services for push notifications.

Start by running this:

```
Yogev Ben David's avatar
Yogev Ben David committed
10
$ npm install react-native-notifications@^2.0.6 --save
11 12 13 14 15 16 17 18 19
```

## <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/2000px-Apple_logo_black.svg.png" width=30/> iOS

First, [Manually link](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking) the library to your Xcode project.

Then, to enable notifications support add the following line at the top of your `AppDelegate.m`

```objective-c
20
#import "RNNotifications.h"
21 22
```

yogevbd's avatar
yogevbd committed
23
Start monitor notifications in: `application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions`
24 25

```objective-c
yogevbd's avatar
yogevbd committed
26 27 28 29 30

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
	[RNNotifications startMonitorNotifications]; // -> Add this line

	return YES;
31 32
}

yogevbd's avatar
yogevbd committed
33 34 35 36 37 38 39
```


And add the following methods to support registration:

```objective-c

Yogev Ben David's avatar
Yogev Ben David committed
40
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
41
  [RNNotifications didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
42 43
}

44 45
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {
  [RNNotifications didFailToRegisterForRemoteNotificationsWithError:error];
46 47
}

48 49 50 51 52 53 54 55 56
```

## <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/APK_format_icon.png/768px-APK_format_icon.png" width=30/> Android


Add a reference to the library's native code in your global `settings.gradle`:

```gradle
include ':reactnativenotifications'
Yogev Ben David's avatar
Yogev Ben David committed
57
project(':reactnativenotifications').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-notifications/android/app')
58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
```

Declare the library as a dependency in your **app-project's** `build.gradle`:

```gradle
dependencies {
	// ...
	
	compile project(':reactnativenotifications')
}
```

Add the library to your application class (e.g. `MainApplication.java`):

```java
import com.wix.reactnativenotifications.RNNotificationsPackage;

...

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
	        // ...
	        // Add this line:
	        new RNNotificationsPackage(MainApplication.this)
        );
```

### Receiving push notifications

> Note: This section is only necessary in case you wish to be able to **receive** push notifications in your React-Native app.

Yogev Ben David's avatar
Yogev Ben David committed
91
Push notifications on Android are managed and dispatched using [Google's FCM service](https://firebase.google.com/docs/cloud-messaging). The following installation steps are a TL;DR of [Google's FCM setup guide](https://firebase.google.com/docs/cloud-messaging/android/client). You can follow them to get FCM integrated quickly, but we recommend that you will in the very least have a peek at the guide's overview.
92

Yogev Ben David's avatar
Yogev Ben David committed
93
#### Step #1: Subscribe to Google's FCM
94

Yogev Ben David's avatar
Yogev Ben David committed
95
To set FCM in your app, you must first create a google-services.json file. If you have no existing API project yet, the easiest way to go about in creating one is using [this step-by-step installation process](https://firebase.google.com/docs/android/setup);
96 97


Yogev Ben David's avatar
Yogev Ben David committed
98
#### Step #2: Copy google-services.json
99

Yogev Ben David's avatar
Yogev Ben David committed
100
After creating google-services.json, copy it into your project's android/app folder.
101

Yogev Ben David's avatar
Yogev Ben David committed
102
#### Step #3: Add google-services package to Project/build.gradle
103
```gradle
Yogev Ben David's avatar
Yogev Ben David committed
104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
buildscript {
    ...
    dependencies {
        ...
        classpath 'com.google.gms:google-services:4.0.0'
    }
}
```

#### Step #4: Add firebase-core package and apply google-services plugin in Project/app/build.gradle
```gradle
dependencies {
    ...
    implementation 'com.google.firebase:firebase-core:16.0.0'
}
119

Yogev Ben David's avatar
Yogev Ben David committed
120
apply plugin: 'com.google.gms.google-services'
121
```
122 123

#### Step #5: RNNotifications and React Native version
yogevbd's avatar
yogevbd committed
124
<B>This step is required only for `react-native-notifications` version `2.1.0` and above.</B> <Br>
125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186

react-native-notifications supports multiple React Native versions. Target the React Native version required by your project by specifying the RNN build flavor in `android/app/build.gradle`.

```diff
android {
    ...
    defaultConfig {
        applicationId "com.yourproject"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
+        missingDimensionStrategy "RNNotifications.reactNativeVersion", "reactNative60" // See note below!
        versionCode 1
        versionName "1.0"
        ...
    }
    ...
}
```

!>Important note about `missingDimensionStrategy`<Br>
>`reactNative59` - RN 0.59.x and below<Br>
>`reactNative60` - RN 0.60.0 and above

Now we need to instruct gradle how to build that flavor. To do so here two solutions:

#### 5.1 Build app with gradle command

**prefered solution** The RNNotification flavor you would like to build is specified in `app/build.gradle`. Therefore in order to compile only that flavor, instead of building your entire project using `./gradlew assembleDebug`, you should instruct gradle to build the app module: `./gradlew app:assembleDebug`. The easiest way is to add a package.json command to build and install your debug Android APK .

```
"scripts": {
  ...
  "android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug"
}
```

Now run `npm run android` to build your application

#### 5.2 Ignore other RNN flavors

If you don't want to run `npm run android` and want to keep the default `react-native run-android` command, you need to specify to graddle to ignore the other flavors RNNotifications provides.

To do so edit `android/build.gradle` and add:

```diff
+subprojects { subproject ->
+    afterEvaluate {
+        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
+            android {
+                variantFilter { variant ->
+                    def names = variant.flavors*.name
+                    if (names.contains("reactNative59")) {
+                        setIgnore(true)
+                    }
+                }
+            }
+        }
+    }
+}
```

**Note**: As more build variants come available in the future, you will need to adjust the list (`names.contains("reactNative59")`). This is why we recommend the first solution.