Create a Beautiful Tabbed Carousel in React Native

To understand what I am trying to build, first, let’s see the demo: As you can see from the gifs, we have two parts to build out this component: The tabs (which you can see at the top)Carousel We need to make sure the tabs and the carousel items are in sync. This means if we swipe through the items and find items that are different category we also need to activate the tab which matches the item’s category. So let us start building this component. For the tabs at the top, I am just using horizontal FlatList and for…

Full-Stack React Native for Freelance

আমরা ডেভেলপাররা যখন android and iOS উভয় প্লাটফর্মে অ্যাপ বানাতে পারি এবং নিজস্ব কিছু কাজের একটা পোর্টফলিও থাকে তখন স্বাভাবিক ভাবেই কিন্তু অনেক ফ্রিলেন্সিং/পার্টটাইম  সুযোগ চলে আসে। এই পোস্টে আমরা যারা এরকম কাজ করতে চাই তাদের জন্যে কিছুটা দিকনির্দেশনা। Photo by Fotis Fotopoulos on Unsplash ফ্রিলেন্সিং প্রজেক্টগুলোর একটি বড় সমস্যা হল বেশিরভাগ ক্লায়েন্ট আসলে পুরো সফটওয়্যারটি কেমনে বানানো হবে তার আইডিয়া নেই। তারা ভাবে যে, একজন ডেভেলপার যে অ্যাপ বানায় সেই সব কাজ করবে। কিন্তু এরমধ্যে যে Backend, UI/UX, Database, Front-End, Hosting, Publishing আরও কত যে কি আছে তার শেষ নেই। যখন একটি কোম্পানিতে কিংবা টিমে কাজ করবেন তখন এগুলো…

Expo নাকি React Native CLI?

React Native vs Expo আমরা যখন React Native প্রথম প্রথম শুরু করতে যাই, তখন সবাই এটা নিয়ে কনফিউসনে পরে যাই। আমরা কি Expo দিয়ে আমাদের অ্যাপ বানাবো নাকি React Native CLI দিয়ে। ২ টারি কিছু সুবিধা এবং অসুবিধা আছে। আজ আমার এই পোস্টে এটি নিয়ে একটু আইডিয়া দেয়ার ট্রাই করবো। Expo কি? Expo কে বলা যায় একটি থার্ড পার্টি রেপার (wrapper), যেটার মাধ্যমে আমরা খুব সহজেই React Native দিয়ে আমাদের অ্যাপ বানানো শুরু করতে পারি।  এটার সুবিধা কি? ১। Expo আমাদেরকে আউটঅফডাবক্স অনেক সেটআপ দিয়ে থাকে যার জন্যে আমরা খুব সহজেই অ্যাপ বানানো শুরু করে দিতে পারি কোন রকম ঝক্কিঝামেলা…

বিগিনারস গাইড টু React Native

React Native কিভাবে শুরু করা যায়, এটা সবার একটি কমন প্রশ্ন, যারা এটি নিয়ে কাজ করতে ইচ্ছুক। তাই এই পোস্টে আমি ট্রাই করব কিছুটা আইডিয়া দেয়ার। আমি React Native নিয়ে কাজ করছি প্রায় ৪ বছর ধরে, একটুক বলা যায় যে React Native এখন অনেক বেশি রবাস্ট অ্যান্ড পরিপক্ব। তাহলে শুরু করা যাক, কিভাবে আমরা আমদের এই পথে আগাতে পারি। প্রথম ধাপ - জাভাস্ক্রিপ্ট অ্যান্ড ইস৬ ওয়েট, আমাদের আগে React Native এ যাওয়ার পূর্বে এটা যে ল্যাঙ্গুয়েজ দিয়ে লিখা লাগবে, সেটাকে মোটামুটি আয়ত্ত করতে হবে। এখানে একটা ইম্পরট্যান্ট প্রশ্ন হচ্ছে, আমাদের কতদিন জাভাস্ক্রিপ্ট নিয়ে পরে থাকা লাগবে, কতটুক শিখতে হবে? কঠিন…

Remove Item with animation in a Horizontal FlatList with LayoutAnimation in React Native

I have been working on a horizontal FlatList in React Native. The idea is, a user can remove the item by clicking on the item. So once the item is removed, I need to : Remove the item from the list with a nice opacity animationAt the same time, I need to fill up space with the next items sliding in to fill it up properly. At first, I was trying it out with react native Animated library but it was getting messier and I could not achieve the effects that I wanted. However, with LayoutAnimation from react-native, this can…

Dynamic Height, Width, and Aspect Ratio in React Native

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

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.

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…

How am I categorizing my blog posts?

The main purpose of creating blog posts is to learn and document. To keep it standard and focused, I am categorizing my posts into 4 different categories. The four categories are below Code ReadToday I learnedTutorialPersonal Code Read As a programmer, it is very important that we read others code. We programmers are like writers and writers always keep on reading in order to improve their own writing. Similarly this is my personal growth plan. I am planning to read a small block of code every day, whatever I find interesting. I try to understand the code and then try…
Creating a reusable “Token Manager” class in react-native.

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

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…