Using One Signal api for remote notifications is very painless and comfortable for React Native. There are very simple steps for installation and configuration. Let’s begin;

  • Create a react native project
$ react-native init projeOnesignal
  • Install One Signal package and link to the project
$ npm install --save react-native-onesignal 
$ react-native link react-native-onesignal

XCode Setup

Sign up for a One Signal account if you don’t have one.

Open your project in XCode and go to Capabilities Tab, then set Push Notifications “ON”

Image for post
Image for post

Again in Capabilities Tab, find Background Modes and set it “ON” and check Remote Notifications


If your react native android app shows a blank screen on simulator or device, probably you do not have a react.gradle file under android/app. You have to bundle the javascript package and drawable resources. Run this code to solve the problem;

mkdir android/app/src/main/assets

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

react-native run-android

Originally published at hsplabs.com on December 12, 2018.


React Native ile hazırladığım uygulamalarda Uzaktan Bildirimler için OneSignal kullanıyorum. Rahat ve kullanışlı bir API sunuyor. Adım adım başlayalım;

  1. React Native projemizi oluşturalım;
$ react-native init projeOnesignal

2. OneSignal paketini projeye ekliyoruz.

$ npm install --save react-native-onesignal
$ react-native link react-native-onesignal

iOS Kurulumu

  1. Bir OneSignal hesabı açıyoruz. https://onesignal.com/ ve yeni bir uygulama oluşturuyoruz.
  2. Xcode ile projeyi açıp projeOnesignal → Capabilities sekmesinde “Push Notifications” → ON
Image for post
Image for post

3. Yine Capabilities sekmesinde “Background Modes” → ON ve altındaki “Remote Notifications” seçeneğini işaretliyoruz.


React Native ile hazırladığınız Android APK’sı simulatör veya cihazlarda boş ekran / beyaz ekran olarak görünüyorsa çözümü aşağıda. İlk defa React Native ile Android uygulaması yapanlar için kısa bir şok etkisi oluyor. :)

  1. Proje klasörüne gidin

$ mkdir android/app/src/main/assets

2. Aşağıdaki kodu çalıştırın.

react-native bundle — platform android — dev false — entry-file index.js — bundle-output android/app/src/main/assets/index.android.bundle — assets-dest android/app/src/main/res


React Native javascripte aşina olanlar için nispeten daha kolay. İlk zamanlar Ionic ve React Native arasında gidip gelirken sonunda React Native’de karar kıldım.

React Native kullanma sebeplerim;

  • Platform bağımsız olması (iOS / Android aynı anda)
  • Zengin paket kütüphanesi
  • Node.js / Javascript aşinalığı
  • Codepush ile ufak düzeltmeleri anında tüm cihazlarda güncelleyebilme.

TRDriver, şirket için geliştirdiğim lokasyon bazlı noktadan noktaya özel sürücülü araç kiralama uygulaması.. Bir nevi Uber, myDriver gibi..

Image for post
Image for post

Gökhan Oğuz

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store