Firebase Dynamic Links module provides a link which we can share with other apps. The recipient of the link may not have the app. In that case, the dynamic link takes the user to the App Store and prompts the user to install the app. When the app opens after the installation, it receives the link embedded within the Dynamic link.…
Category: React Native
The category contains articles related to React Native – native app development using React components.
Dynamic Links of Firebase allow developers to send a link to other apps. When the user clicks on the link from the other app, our app opens. Our app receives a link on starting up and we can do pretty much anything based on the link. What is more interesting is that when the app is not installed, Dynamic links prompt the user to install the app.…
Push notification is a message that pops up on a mobile device. The message is usually a prompt to start using the app. An app can receive a push notification when it is in foreground state, background state or even when it is killed.
In this article, we will integrate Firebase Cloud Messaging to an Android React native app. Adding FCM to iOS app is similar.…
For most part, React is declarative. But there are times when we have to use imperative methods. This is quite common in React native. In React native, after an API call, we may use imperative methods for notifications or navigation. So, how do we handle this? Below is a code snippet of an action using redux-thunk.
export function callApi() { return dispatch => { dispatch({ type: ActionTypes.CallApiPending…
React navigation is the suggested community package for navigation in React native apps. It has three navigators: Stack navigator, Tab navigator and Drawer navigator. There are quite a few configuration options. Overall, I find it quite useful for my needs. But, there is one area that requires a bit of work. It is about sharing data between the navigation buttons and the main app view.…
CodePush is a service from Microsoft that helps improve the deployment experience of your React Native apps. React Native code has a native part (written in Objective-C or Java) and a JavaScript part (the code we write). Normally, when deploying an app to the App Store, the JavaScript code is bundled together with the compiled native code.
If there is a minor JavaScript code change, the app is recompiled and submitted to Play Store or App Store for rollout.…
This is the third part of the tutorial series on push notifications for an Android react native app. We are building the Retweeter app. And we are all set to give the finishing touches in this post.
In the first part, we covered how to configure react-native-firebase
and get the FCM token. We learnt how to send a push notification manually from the Firebase console.…
This is Part 2 of my tutorial on Push notifications. Please click the link for Part 1 of the tutorial. We are building a Retweeter app. The Retweeter app is a React native app which displays a list of tweets it receives from a push notification. The user has an option to retweet some of the tweets.
In Part 2, we are going to build the server infrastructure for push notifications using AWS Lambda.…
Push notifications was originally an iOS concept. Apple has a push notification service called APNS. App that wants receive notifications should register with the APNS. A server component should send notifications to APNS directed towards one or more devices. The app receives the push notification from APNS and does one of the following actions:
- Display a notification or short text message
- Play a sound
- Update the badge in app icon
- Allow the user to perform an action
As you can see, push notifications are a powerful feature in iOS.…
Animation can be done using the Layout Animation or Animated API. LayoutAnimation happens on the UI thread. It is usually used when a view is created or destroyed. Sometimes, it is also used when the view changes size. LayoutAnimation works only on two properties: opacity and size. Layout Animation is the preferred way to animate as it is high-performant.
Animated API
However, background color cannot be animated using Layout Animation.…