Year: 2021

In this post, I will try to describe how can we easily create an animated scaling button in react native. First, let's see how does the button work in action. Animated-Scaled Button We can use Animated.sequence in order to scale up and down sequentially. So onPress button, the code looks like the following - onPress={() => { Animated.sequence([ Animated.timing(selectedAnim, { toValue: 2, duration: 300, useNativeDriver: true, }), Animated.timing(selectedAnim, { toValue: 1, duration: 300, useNativeDriver: true, }) ]).start(() => setSelected(prev=>!prev)); }} Finally we just need to use this selectedAnim value in our Animated.View. <Animated.View style={[{transform: [{ scale: selectedAnim }]}]}> The source…

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…

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

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

React Native কিভাবে শুরু করা যায়, এটা সবার একটি কমন প্রশ্ন, যারা এটি নিয়ে কাজ করতে ইচ্ছুক। তাই এই পোস্টে আমি ট্রাই করব কিছুটা আইডিয়া দেয়ার। আমি React Native নিয়ে কাজ করছি প্রায় ৪ বছর ধরে, একটুক বলা যায় যে React Native এখন অনেক বেশি রবাস্ট অ্যান্ড পরিপক্ব। তাহলে শুরু করা যাক, কিভাবে আমরা আমদের এই পথে আগাতে পারি। প্রথম ধাপ - জাভাস্ক্রিপ্ট অ্যান্ড ইস৬ ওয়েট, আমাদের আগে 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…