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:

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…

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

প্রথম ধাপ - জাভাস্ক্রিপ্ট অ্যান্ড ইস৬

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

With LayoutAnimation

Our horizontal FlatList

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 animation
  • At 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…

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?

Horizontal Flat list

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…

Photo by Maxim Zhgulev on Unsplash

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…

Photo by William Iven on Unsplash

আমরা যারা কিছু বানাতে পছন্দ করি তাদের উচিত অনেক কিছু বানানো। অনেক ক্ষেত্রে একটা মাইন্ডসেট কাজ করে আমাদের মধ্যে যে আমরা যদি X অ্যামাউন্ট ভিডিও/ টিউটোরিয়াল/কোর্স না করি তাহলে মনে হয় আমরা কোন রিয়েল প্রোজেক্টে কাজই শুরু করতে পারব না। ব্যাপারটি আসলে মোটেও তেমন না। এরকম ভাবনা আমারও ছিল। পরে দেখা যেত আমি একটার পর একটা কোর্স/টিউটোরিয়াল নিয়েই পরে আছি, নিজের থেকে কিছু ধরছি না এবং কোর্স শেষ হতে হতে দেখা যাচ্ছে যা আগে শিখেছি তা প্রয়োগ না করার কারনে অলরেডি ভুলে বসে আছি। কাজেই আমাদের উচিত বানাতে থাকা, সেটা যতটা ছোটই আর বেসিকই হোক না কেন। আমরা ভাবি যে…

Photo by Nick Morrison on Unsplash

আজকের এই হাজারো ভিডিও টিউটরিয়াল যুগে আমাদের শিখার পদ্ধতিতে একটি বড় ধরনের ভুল আছে। আপনি অনলাইনে গিয়ে যেকোনো বিষয়ের উপর সার্চ দিলেই প্রচুর ভিডিও রিসোর্স পেয়ে যাবেন। কিন্তু আপনি যদি একের পর এক ভিডিও দেখে যান এবং ধরেন সেগুলো আপনি হুবুহু ফলো করে নিজে হাতে কলমে করেন তাহলেও শিখাটা তেমন ইফেকটিভ হবে না। এক টাইম এ গিয়ে দেখবেন আপনি প্রচুর টিউটরিয়াল খালি কঞ্জিউম করে গিয়েছেন। কিন্তু যখন আপনি নিজে থেকে কিছু একটা করতে যাবেন তখন ব্লাঙ্ক হয়ে আছেন। কিছুই শুরু করতে পারছেন না।

আপনি যতই ভিডিও দেখেন না কেন , যদি আপনি নিজের ব্রেইন খাটিয়ে যা শিখেছেন তা ইউজ করে…

You can easily create your own radio button components in react native very easily. First you need to create an array of options for your radio buttons and pass it to your radio button component like so:

after this in your radio button component you can map all these options in your render method and create radio button views

this will create default radio buttons which looks like this -

Default Button

Right now it is time to set the state when clicked on the radio button. First we declare our state state = { value: null }, then inside our <TouchableOpacity> tag we define our checked button when clicked on any particular button.

So right now when clicked it looks like this -

This is a very straight forward exploration of how I did animated inputs in my react native form. The demo is given below:

So I have basically three text inputs which I need to animate one after another. I used react native animated modules to do this kind of animation.

In animated modules there is a method called **stagger** which helps to animate components one after another with **successive delays**. I just needed to pass my array inputs to this method to implement this animation. The whole code is given below:

Saad Khan

React-Native | JS | Native Android | Node | A Learner

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store