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…

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…

An example of a simple API call to update a user profile data in Flutter.

January 11, 2021Posted intoday-i-learnedNo Comments
Today I learned in flutter how to work with API. In my use-case, I am updating user profile data. So the flow is when the user profile edit screen first mounts - I load current user data from API and put the user details as an initial value in their respective input fields. I just have the user's first name and last name. This is the initial step. Now the main part is to update the user profile with the API call. So on the save function I use dio to update the user profile with a new user first…

Dynamically add height to the ScrollView with Sticky Footer

December 8, 2020Posted intoday-i-learnedNo Comments
In another post, we have seen how to add a sticky footer with ScrollView. One problem occurs if we put a sticky footer in the ScrollView, is that the last part of ScrollView gets hidden/ gets overlapped with the sticky footer. We need to add a proper padding-bottom to the ScrollView so that the last content of the ScrollView is also visible and there is no extra white space when the user scrolls to the bottom. The problem can be seen in the following image. When we scroll down, the sticky footer is overlapping with the red view and the…