সহজ বাংলায় React Hooks সিরিজ: পর্ব ১ – useState

সহজ বাংলায় React Hooks সিরিজ: পর্ব ১ – useState

July 24, 2021Posted intutorial6 Comments
Hooks এর সাথে পরিচিতি React এর ডকুমেন্টেশন থেকে আমরা জানতে পারি hooks হচ্ছে react এর নতুন এডিশন যেটার মাধ্যমে আমরা React এর স্টেট এবং অন্যান্য ফিচার ব্যাবহার করতে পারব class component না লিখেই, অর্থাৎ ফাংশনাল কম্পোনেন্টের মাধ্যমেই। যেকোনো ইন্টারেক্টিভ অ্যাপ্লিকেশনে আমাদের অ্যাপের স্টেট ধরে রাখা লাগে (store) কোথাও না কোথাও এবং এই স্টেট এর ডিপেন্ড করেই কিন্তু আমরা আমাদের আপ্লিকেশনকে ইন্টারেক্টিভ করে থাকি। এখন আসা যাক তাহলে React এ। আমরা React এ কিছু স্পেশাল ফাংশন ব্যাবহার করে থাকি আমাদের অ্যাপকে ইন্টারেক্টিভ করার জন্যে। এই ফাংশন গুলোকেই আমরা "Hooks" বলি। React আমাদের এরকম কিছু কমন বিল্ট-ইন hooks দিয়ে দিয়েছে। React.useStateReact.useEffectReact.useContextReact.useRefReact.useReducer এখানে…
Dynamic Input Fields in React Native

Dynamic Input Fields in React Native

July 20, 2021Posted intutorial2 Comments
This might be a common requirement that sometimes in our forms we need to add or remove input fields dynamically and each input field needs to be attached with its corresponding value. Recently I have implemented this. We can do it in different ways. So here goes my implementation. In order to achieve this first, I declare 2 states and 1 ref. // this will be attached with each input onChangeText const [textValue, setTextValue] = useState(''); // our number of inputs, we can add the length or decrease the length const [numInputs, setNumInputs] = useState(1); // all our input fields…
Horizontal Calendar Component in React Native

Horizontal Calendar Component in React Native

July 12, 2021Posted intutorial1 Comment
I have recently built a simple horizontal calendar in React Native. Today in this post, I will share how I implemented it. We can use a horizontal flat list to render my horizontal scrollable calendar. First I populate the data of my flat list with dates. I generate 14 days (we can generate any number of dates we want) and fill it in the flat list. It looks like the following: With that, we get our flat list ready with 14 days. The data array is of type Date[] where the first value is the day before 14 days from…
Expo পরিচিতি

Expo পরিচিতি

July 5, 2021Posted intutorialNo Comments
expo tools Expo কি? Expo হচ্ছে এমন একটি প্লাটফর্ম যেটা আপনাকে Universal React অ্যাপ তৈরি, বিল্ড, ডিপ্লয় এবং খুব দ্রুত পুনরাবৃত্তি করতে সহায়তা করে। এটা আপনাকে একটা স্ট্যান্ডার্ড টুলসেট প্রভাইড করে যার জন্যে আপনার React Native অ্যাপ বানানো আরও সহজ হয়ে যায়। যেহেতু React Native অ্যাপ বানাতে Expo লাগে না কিন্তু এটি ডেভলপারদের অনেক ভাবে হেল্প করে। কয়েকটি Expo টুলিং এর সাথে পরিচিতি হই। ১। Expo Go - এটি হচ্ছে একটি Expo ক্লাইন্ট অ্যাপ যেটি আপনি আপনার ফোনে ডাউনলড করে আপনার অ্যাপ ডেভেলপ করতে পারবেন। মানে আপনি যা কোড করছেন সেটি আপনি এই ক্লাইন্ট অ্যাপে রান করে দেখতে পারবেন ইনস্ট্যান্ট।…

My theme folder in React Native

June 21, 2021Posted innotesNo Comments
React Native এ একটি নতুন প্রোজেক্ট খুলার পর সবসময় আমি কয়েকটা ফাইল বানিয়ে থাকি। যাতে পুরো অ্যাপে আমার স্টাইলিং এবং ডিজাইন গাইডলাইন প্যাটার্ন কন্সিস্টেন্ট এবং স্কেলেবেল থাকে লং টার্মের জন্যে। এই ফাইলগুলোকে আমি সাধারণত থিম নামক একটি ফোল্ডারে রেখে দেই। ফাইলগুলো হচ্ছে - ColorSpacingTypography color.ts - আমাদের পুরো অ্যাপ জুড়ে আমরা ম্যাক্সিমাম ৬-৮টি কালার ব্যাবহার করে থাকি। সুতরাং এই ফাইলে আমরা আমাদের কমন কালারগুলো একসাথে রেখে দেই। এবং অ্যাপের যেকোনো জাইগায় কালার রেফার করতে হকে আমরা এই ফাইলটি ব্যাবহার করে থাকি। color.ts spacing.ts - আমাদের পুরো অ্যাপের অবশ্যই আমাদের spacing কেমন হবে সেটা ফিক্স রাখা লাগে। নাহলে পুরো অ্যাপের ডিজাইনই…

When to use useMemo?

May 24, 2021Posted innotesNo Comments
Basically the decision for whether to use useMemo is: Do I want this to run every single time the state changes? => Leave it plainIs it bad if this runs multiple times? => Yes useMemoIs this slow so it should only run when absolutely necessary => Yes useMemo

React Native Resources

May 19, 2021Posted innotesNo Comments
I am compiling a list of great and updated resources that any react native dev should follow. I have tried to keep the list short because many of the great resources are outdated now. Also trying to keep it concise so it is more useful. I will try to update this list from time to time. If you are a beginner and want to learn by doing This code-academy course is great for that. 1. https://www.codecademy.com/learn/learn-react-native 2. https://www.reactnative.express/ Blogs to follow - notJustDev BlogMy Blog If you want to read - Infinite Red's NewsletterFollow Aman Mittal's BlogCallstack engineer's blogReact native…

Animated Scaling Button in React Native

April 21, 2021Posted intutorialNo Comments
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…

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…