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

December 14, 2021Posted incode-read, today-i-learned, tutorialNo Comments
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 Local Push Notifications

React Native Local Push Notifications

August 27, 2021Posted incode-read, today-i-learned, tutorialNo Comments
Background A lot of times in our app, we need to set up local push notifications. What do we mean by local notifications? Basically, the push notification does not trigger from cloud service, for example, a firebase push notification is a remote push notification service. Similarly, we have other push notification services for remote notifications. However, sometimes we just want to set notifications from our app side. Let's say we have a reminder system in our app and when the user sets a time we will need to set up a notification at that particular time. We will see how…

Timesliders in React Native

April 5, 2021Posted incode-read, tutorialNo Comments
From my recent code-read, recently I have learned how to create custom time sliders. All credit goes to my colleague. I am just sharing my learning! Let us first see what do we want to make. We want to convert a slider into time sliders where users can pick a single time or a time range. single time slider time range slider Single time slider: First, let us set our component for this. With this snippet, we can get our init done for the slider. For our slider component, I am using the react-native-multi-slider package. With this package, you get…

Dynamic Height, Width, and Aspect Ratio in React Native

February 4, 2021Posted incode-read, today-i-learnedNo Comments
Let's say you are given this design to build a simple horizontal FlatList. How can you dynamically find the width and height of the items in the flat list? We can do it in different ways but recently in my code read journey I have learned a cool trick from my colleague. First of all, let's find the width of the item, shall we? As we can see from the above image, the whole screen width is 376 and if we inspect our item width in Figma (which is not shown in the above image), the item width is 240.…

User Attributes Custom Hook in React Native

January 28, 2021Posted incode-read, today-i-learnedNo Comments
In today's code-read, I learned a smart way to use a custom hook and generate objects from that. A brief background first about what we are trying to achieve. Let's say we have an user object and inside that object we have a property called attributions This is an interesting property, it's of type array and all the attributes of a user are coming as key-value pair. The user object looks like below Now let's assume this user object is globally set (as it should be) and we want to show these attributes in different screens and components inside our…
Creating a reusable “Token Manager” class in react-native.

Creating a reusable “Token Manager” class in react-native.

December 15, 2020Posted incode-readNo Comments
In any app, especially an app that has user accounts, it is a very common task to check for existing user token and redirects the user either to AuthStack or AppStack according to the token found. So for this common task, we can create our own token manager class which handles the common functionalities related to user token. In today's code read I will try to document that. Usually, we store tokens locally in our AsyncStorage, so we have 2 functions in our class. One is to set and the other one is to clear the token. Now the next…
MultiSelected List in React Native

MultiSelected List in React Native

December 10, 2020Posted incode-readNo Comments
In today's code-read, I read through how to implement multi-selected inputs. All we need to do is to control an array with selected items.  let's say in our demo user can select his favorite brands from a list of options. First, we need to show all the inputs to the user. We can use FlatList to render the items. Like so - const BRANDS = [ { name: 'Toyota', slug: 'toyota', }, { name: 'Mazda', slug: 'mazda', }, { name: 'Honda', slug: 'honda', }, { name: 'Tesla', slug: 'tesla', }, .....] export default function App() { const [brands, setBrands] =…