Getting Started with React Native Local Push Notifications in React Native

As an app developer, one of the most important things to consider is how to keep your users engaged. Push notifications are a great way to do that. There are two types of push notifications, local and remote. In this tutorial, we will be learning step-by-step how to set up and use local push notifications in React Native. Task 1: Schedule a notification when the user saves a reminder Tass 2: Handle the notification when the user clicks on it Task 3: Cancel the notification when the user deletes the reminder The full blog post is published in the following…

A step-by-step guide to translation in React Native

Photo by Towfiqu barbhuiya on Unsplash In this short guide, I will try to document the following — Setting up the translation in React NativeUse translation react native components/screens.Change translation 1. Setting up the language Create a new project with expo or RN CLI. Once your app is ready, install the necessary packages to set up the translation in your app. yarn add i18next react-i18next Then create a `translation folder` inside your src or app directory. Within that folder create a `resources` folder with 3 files, namely `en.js` & `bm.js` (Bahasa Malaysia), and `index.js` file. The folder structure should look like the following,…

How to download remote PDF files in React Native

Photo by Rodion Kutsaev on Unsplash In this post, I will document my learning on downloading remote pdf files on iOS and android. Setup the project: Let’s first create a blank project by hitting, npx react-native init DownloadPdf It will just have one button that will try to download this sample pdf file. This is our initial code, Download PDF: Now, let’s write our download functionality. Before that, we will need to download 2 modules. react-native-blob-util: great library for downloading files.react-native-share: for iOS, we would like to save the files on our phone, hence the share library. here is the gist,https://saadbashar.medium.com/media/3e3449377bf362935f1b5d62f371c3ad Output of the functionality: Android…

Getting Started with Testing in React Native with Jest and React Native Testing Library

Testing is an important part of any software development process. It helps you to ensure that your code is working as expected and that you are not introducing any bugs. In this article, we will learn how to test our React Native app with Jest and React Native Testing Library. There are many variations of testing methods. In this article, we will focus on unit testing by providing a simple example of how to test a React Native component. This article is intended for anyone who is very new to testing in React Native. The full blog post is published…

Getting Started with React Native Local Push Notifications in React Native

As an app developer, one of the most important things to consider is how to keep your users engaged. Push notifications are a great way to do that. There are two types of push notifications, local and remote. In this tutorial, we will be learning step-by-step how to set up and use local push notifications in React Native. The full blog post is published in the following link: https://www.notjust.dev/blog/2023-02-02-react-native-local-push-notifications

Getting Started with Redux in React Native

It's very rare to find a react native app without a global state management library. It's also very common to find a react native app with redux. Redux is one of the most used state management libraries in React / React Native and a tool that is being asked as a job requirement. If you wanted an easy explanation of what redux is, you are in luck! In this article, we will dive into the world of redux and learn how to get started with redux in react native The full article is published on the following link: https://www.notjust.dev/blog/2022-12-24-react-native-redux-toolkit

Implementing a dynamic “Terms & Conditions” screen in React Native.

We all know the common user experience of going through a terms & conditions page. User needs to scroll down to the bottom to enable the submit button and only after that, they can proceed. We will try to build a small demo of the same experience in this post. First, let us see the end product to get a clear picture of what we are trying to achieve. Full demo From the demo, we can point out a few key areas that need to be tackled to implement this behavior. First we need to detect if the user has…
React Native Learning Roadmap

React Native Learning Roadmap

Full Roadmap After working with React Native for around 4 years professionally and teaching more than 40 students to make them familiar with react native through my devskill course, I have come up with a basic roadmap to learn React Native. **Obviously there is no fixed/straight roadmap for learning any technology, but I hope my professional and teaching experience on react-native can help someone who is starting with react-native. Roadmap breakdown Topic based learning + Project based learning I have divided the whole road map into 2 main parts. They are the following: Project based learning - With this, you…
Step by step guide to authentication and onboarding flow in React Native.

Step by step guide to authentication and onboarding flow in React Native.

One of the most common requirements for any app is to have an authentication flow that includes onboarding at the same time. The flow looks like the following - authentication-onboarding-flow When user opens the app, we first need to check if the user is a logged-in user in our system, depending on this condition they can go to two different flows;If the user has already been logged in previously, they will come to the app screens. for ex - home screen, profile screen etc.If the user is new or a logged-out user, they will go to the authentications screens, for…
Integrating Redux Toolkit, Redux persist and react-native debugger

Integrating Redux Toolkit, Redux persist and react-native debugger

Background: One of the most common things you might have heard when you are coming to global state management as a new developer is that "Redux is too complex", "It has too many boilerplates", etc. I would request you to check the new Redux documentation and Redux Toolkit (RTK) before you jump to any conclusions. To me personally, I love using redux as my global state management solution. Because of the followings: I already understand the Redux concept.Redux is heavily battle-tested in the industry.It has a high demand skill in the job market.RTK solves all the pain points that we…