DEV Community: Rushit Jivani

React Context: The Ultimate Handbook

Rushit Jivani — Wed, 03 Jan 2024 12:12:11 +0000

Years ago, the Context API was introduced as an experimental feature with a warning “in the future this API can break”. As the Context API was experimental, most React developers were not confident enough to use it.

But after the release of React v16.3, we get the new Context API, which brings enhanced efficiency and is fully prepared for production. and now it’s one of the Important React Concepts.

In this comprehensive guide, we will explore the concept of React context, its implementation, and guidelines for its proper usage in various scenarios. Additionally, we will discuss the dos and don’ts of utilizing context effectively to maximize its benefits.

Let’s get started!

What is React context?

React context is a way to easily share and access data across different components in our React application, without the need for prop drilling.

Think of context as a global object accessible within a specific subtree of React components.

Why this Context API is so important?
In React, components are organized in a hierarchical structure resembling a tree. The topmost component is the root node, and all other components are connected to it. Data in this structure flows in a single direction, from the top down.

For instance, let’s consider this app where both ShopDisplay and Cart need access to the items a user has put into their shopping cart. We can pass props down into the Shop Display component and Cart component so that they have access to cartItems and setCartItems.

export default function App() {
  const [cartItems, setCartItems] = useState([]);

  return (
    <div className="App">
      <ShopDisplay handleCartItems={setCartItems} />
      <Cart cartItems={cartItems} />
    </div>
  );
}

Here as you can see what is happening above:

App — Has access to both cartltems and setCartltems
ShopDisplay — Has access to setCartltems via props
Cart — Has access to cartltems via props

Prop drilling can be somewhat like a Russian nesting doll with several layers of props going further and further into child components.

Here the Cart component can also pass down cartItems to any child components it has.

In React, data only flows in one direction. So, if you need data at a deep level in your component tree, you have to pass it down as a prop through all the child components. This can be a lot of work, so people use state management libraries like Redux or MobX to make it easier. If you’ve used either of these libraries, you’ve already used the Context API indirectly. That’s because Redux uses the Context API internally.

This is a picture that shows how context can be used to share data with all the components in a React app.

When should you use React context?

You want to share data with many components at different nesting levels. Like Theming (like dark or light mode), User data (the currently authenticated user), Multilingual Support (like user language or locale), and application configuration (like base URL).
When the same prop (data) is passed through several components.

How do I use React context?

Using the context in React requires 3 simple steps: creating the context, providing the context, and consuming the context.

A. Creating the context

The built-in factory function createContext(default) creates a context instance:

// context.js
import { createContext } from 'react';

export const Context = createContext('Default Value');

The factory function accepts one optional argument: the default value.

B. Providing the context

Context.Provider component available on the context instance is used to provide the context to its child components, no matter how deep they are.

To set the value of context use the value prop available on the <Context.Provider value={value} />:

import { Context } from './context';

function Main() {
  const value = 'My Context Value';
  return (
    <Context.Provider value={value}>
      <MyComponent />
    </Context.Provider>
  );
}

Again, what’s important here is that all the components that’d like later to consume the context have to be wrapped inside the provider component.

If you want to change the context value, simply update the value prop.

C. Consuming the context

Consuming the context can be performed by the useContext(Context) React hook:

import { useContext } from 'react';
import { Context } from './context';

function MyComponent() {
  const value = useContext(Context);

  return <span>{value}</span>;
}

You can check out the demo here.

Does React context replace Redux?

Absolutely! And well, not quite.

For React beginners, Redux simplifies data sharing. Redux is bundled with React context, which enables easier passing of data.

However, if you’re not modifying the state and just passing it down your component tree, you don’t require Redux, a global state management library.

How to update the context value?

The React Context API doesn’t have a built-in way to update the context value from consumer components since it’s primarily designed to be stateless.

However, you can easily achieve this by incorporating a state management approach, such as using the useState() or useReducer() hooks. By doing so, you can provide an update function alongside the value in the context.

Although, it’s generally not recommended to update the context value due to performance concerns. and this leads us to the limitations of React context.

Read this awesome blog about how to use and update the context.

React context limitations

Let’s understand it by example. Suppose you’re passing down an object through your React context provider, and one of its properties gets updated. What happens next? Well, any component that consumes that context will re-render.

Now, this might not pose a performance problem in smaller applications with only a few state values that don’t change frequently (like theme data). However, it becomes problematic when you have numerous components in your component tree and need to perform multiple state updates.

A workaround for this is by creating a separate Context/Provider for each functional section that needs to share data among its components. This approach helps minimize the number of components that need to be rendered, as updates will only occur within specific sub-trees of your application.

Conclusion

Great job! By learning Context API, you’ve added a valuable skill to your toolkit. Now you can pass the value of the first component to the last component without disturbing the other components.

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of claps! 👏

Please leave a comment with your feedback.

If you’d like to support me as a writer, consider Following me on Dev.to, and Connecting with me on LinkedIn.

Unlocking the Impossible: Search Keywords Within WebView in React Native

Rushit Jivani — Tue, 12 Dec 2023 09:31:12 +0000

When you’re looking for a specific phrase or word on a web page, the last thing you want to do is go through the entire page for that word. Searching for a word on a web page is a great way to save time.

In this article, you’ll find instructions on how to search for words on a WebView in React Native.

How to Search for a Word Using a Web Browser

If you want to search for a specific word in a web browser, you can perform this task using your keyboard shortcuts. To access your search shortcuts, here’s what you need to do:

Go to the web page you want to search through.
Use the Control + F keywords on your PC, or Command + F on Mac.
The find bar will show up in the top-right corner or at the bottom of your screen.

Enter the word you want to search for, and the word will be highlighted across the web page.

Searching for a Word in React Native’s WebView

First, you must know that web view is not a component inside the react-native core, so we need to install the package.

npm install react-native-webview

After that, we can use the web-view

if you ever work with native Android web view then you will find it is very easy to integrate Search Functionality. The native Android WebView offers built-in functions like findall() and findnext() that make integrating search features a breeze.

But if you look into the react-native-webview API documentation then you’ll find there are no props, no API, or no built-in functions that help you to integrate such functionality.

So, How can we achieve this? 🤔

Are there any other properties or functions we can use to achieve this?

The answer is Yes, we can use injectJavaScript Method to implement this functionality.

Ok, now we have a way to achieve this, but what about the bridge or support that carries out the search and highlights the keyword functionality in the webView?

In this case, we’re using mark.js script, which helps us search for specific words and highlight them.

Okay, now that our roadmap is prepared, let’s explore the essential functions and their functionality.

There are 3 major functions that are used to implement the functionality

searchKeyword — triggered by the onChangeText event on React Native TextInput.

2.focusNext and focusPrevious — activated when the next and previous buttons are pressed.

3.jumpTo — triggered when the next and previous buttons are pressed to highlight the major next and previous keywords.

Well, that’s it. 🎉 Run the code to see it in action.🥳

Output

Please check out this sample project on GitHub for more information

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of claps! 👏

Please leave a comment with your feedback.

If you’d like to support me as a writer, consider Following me on Dev.to, and Connecting with me on LinkedIn.

Boost Your Developer Productivity with These 5 Must-Know Tips!

Rushit Jivani — Mon, 28 Aug 2023 13:21:07 +0000

Being productive is an essential skill for your success as a developer.

A developer who possesses a strong work ethic not only demonstrates increased productivity but also contributes positive energy to the workplace — which has a direct impact on the team’s overall performance. This serves as a valuable indicator of the ultimate outcome of the product.

Being a productive developer has its perks — higher pays for getting quality work done in less time, better work-life balance, and, of course, an internal satisfaction.

To maintain productivity over a long period, it’s important to embrace specific work ethics and habits that gradually become ingrained in your daily routine. These practices will help you stay on track and accomplish your goals with ease.

Let’s walk through some effective ways to make your work and life as a developer productive.

Tip 1: Master the Fundamentals

Many beginners tend to quickly browse through the basics and assume that the real excitement lies in advanced topics. However, they often give up prematurely, claiming that these advanced subjects are excessively challenging. It’s important to understand that without a solid foundation in the fundamentals, comprehending advanced topics can appear unattainable.

Therefore, even though the fundamentals may initially seem uninteresting or insignificant, they play a vital role in your learning journey. Embracing the basics is an initial investment that will bring significant rewards in the long term, something your future self will greatly appreciate.

Tip 2: Implement it by reading documents or articles, NOT Watching Videos

Developing practical skills is essential for success in a programming career. I’ve noticed many beginners who watch tutorials and assume they have the required skills.

Theoretical knowledge alone is of no value unless you can effectively apply it to real-world programming. Learning comes from hands-on experience, not just studying and not just watching videos.

It’s important to stay resilient and not let discouragement easily take hold. When you tackle difficult challenges directly, it’s natural for the process to take time before you experience a significant breakthrough.

Tip 3: Divide Large And Complex Tasks Into Smaller Tasks

Divide the large complex task into smaller parts, don’t think much about the complex problem, — Just break it down and try to solve a small portion of it, by the end, you’ll see that it’s all done! Most of the developers waste their time thinking about the bigger task and got demotivated. Take it easy, start executing the small task, you can achieve the goal.

Tip 4: Errors can be valuable allies

No matter how skilled you are as a developer, encountering errors is a regular part of your journey. Sometimes you fix them right away, and oftentimes you do it after reviewing your code and You wish they never happened.

But Rather than becoming frustrated, take a moment to go through the error message. You’ll often find a clear indication of what’s causing the issue, which can help you resolve it swiftly and easily.

Learning to debug an application is simply the most important skill to master to level up your programming skills

Tip 5: Know your development environment

The more aware of the weapons in your arsenal, the easier it will be to kill the enemy. To be clear, the enemy is the distractions that break your workflow. To maintain productivity, it’s important to minimize the time spent on researching libraries or tools for your project and stay focused on the task at hand.

To improve productivity, learn all the code editor shortcuts and use them in your work — it will save you both time and effort in the long run. Take your time to explore different tools, frameworks, and libraries to choose the best option based on your project requirements.

Tip 6: Taking Breaks

Developers often find themselves surrounded with a pile of work and deadlines which lead to longer working hours, without breaks.

There are enough studies to support that taking breaks between work leads to higher productivity. It’s important to realize in order to keep up with focus and concentration levels, the mind needs a break from time to time.

A couple of ways to remind yourself it’s a time for a break are:

The Pomodoro Technique: Setting timers help in dividing your goals and time management. As a result, your problem-solving skills improve drastically.
Drink water: Keeping yourself hydrated at work helps you stay fresh and prevents exhaustion. Moreover, it’s a good incentive to take a walk.

I hope you find the above tips useful in improving your productivity as a developer.

Thanks for reading!

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of claps! 👏

Please leave a comment with your feedback.

If you’d like to support me as a writer, consider Following me on Dev.to, and Connecting with me on LinkedIn.

Boost your SEO: Best Practices and Strategies

Rushit Jivani — Mon, 21 Aug 2023 05:36:20 +0000

Over 80% of searches are conducted using search engines. It’s interesting to note that the typical internet user tends to focus on the first five results displayed on a search engine results page (SERP). A study conducted in 2014 by Advanced Web Rankings revealed that approximately 67% of all clicks on SERPs are directed towards those top five listings. As of 2019, this percentage has risen significantly to 94.53%.

So SEO; Search Engine Optimization, is all about ensuring that your web page achieves a good ranking on search engines, particularly Google. It’s worth noting that according to Net Market Share, Google holds a significant 81.64% share of the Search Engine Market. So, optimizing your website for Google can greatly enhance its visibility and reach.

Here are a few tips that can significantly boost your SEO and help you rank higher on any Search Engine.

1. Metadata

Meta Tags define the metadata for the page and also enable you to add additional details to your website.

Metadata won’t appear on the webpage itself, but it’s formatted for machines to understand. Browsers, search engines (like Google), and other web services can utilize this information.

Here are a few commonly used Meta Tags that you should definitely consider including. Simply fill in the required details and add them to the head section.

<!-- Basic SEO -->
<meta httpEquiv="cache-control" content="max-age=<age in seconds>" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="<theme color hex>" />
<meta name="keywords" content="comma separated keywords" />
<meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="English" />

<meta name="description" content="<description>" />
<meta name="image" content="/image-link.png" />
<meta name="thumbnail" content="/image-link.png" />
<meta name="title" content="<title>" />
<!-- Schema.org for Google+ -->
<meta itemprop="description" content="<description>" />
<meta itemprop="image" content="/image-link.png" />
<meta itemprop="name" content="<title>" />
<!-- Twitter  -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="<description>" />
<meta name="twitter:image" content="/image-link.png" />
<meta name="twitter:title" content="<title>" />
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta property="og:description" content="<description>" />
<meta property="og:image" content="/image-link.png" />
<meta property="og:site_name" content="<site name>" />
<meta property="og:title" content="<title>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<url for the website>" />

2. Load Time and User Experience

Remember people are impatient, The stats are shocking.

25% of users will have left your site after only 4 seconds of loading time.
That’s one-fourth of your prospective leads gone in just four seconds…

Website load time is a crucial factor in your users’ experience. And, Google started tracking page speed in 2018.

Your web page load times are directly related to design.

Websites featuring complex graphics, many photos (think online shopping), or videos take longer to load.

You can reduce the page load time by:

Reduce unused JavaScript.
Eliminate render-blocking resources.
Reduce initial server response time.

3. Use appropriate keywords In The Right Places

Keywords are terms or expressions that describe the content of your website. They allow search engines to understand the subject of your site and to display relevant results for Internet users. It is therefore important to choose your keywords well and to use them strategically in the right place.

Ensure your keyword appears in the page title.

Webpage URL:

And in the first 100 words of your content.

4. Provide useful and fresh content

It’s common for content to come last in the web design process, but that is a mistake. In SEO, content is king! Content is the new SEO these days. Now, you might have some ideas about how important content is.

If your content is static, old, or out of date then most probably your visitors will go away quickly and never come back.

There is big competition in every keyword you search and those websites that have the most useful and fresh content, have more chances of winning the race.

5. Don’t forget the fundamentals

Just like a strong house requires a solid foundation, achieving overall website optimization is impossible without following best practices in application development. Well organised, minimal code is the key.

That’s it and you’re on your way to skyrocketing your website SEO.

Summing Up by an interesting quote from Wendy Piersall

“Google only loves you when everyone else loves you first.” – Wendy Piersall

Thanks for reading!

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of claps! 👏

Please leave a comment with your feedback.

If you’d like to support me as a writer, consider Following me on Dev.to, and Connecting with me on LinkedIn.

Master the Art of Clean Code: A practical approach

Rushit Jivani — Mon, 14 Aug 2023 05:44:21 +0000

We often discuss various architectures, but there are other important and simple things that can be done to keep code clean and manageable in the long run. In this article, we’re going to examine what good code is, and what qualities of good code are. That’s because those qualities come before programming principles. Programming principles are just guidelines to help us apply those qualities to code.

Developers not only write code but also dedicate a considerable amount of time to reading it. In fact, reading code often surpasses the time spent on actual coding.

Have you ever considered how frequently you review the code you’ve just written? Obviously, the ratio is in favor of reading than actual coding.

If we spend a significant amount of time understanding and reading code, it is important to ensure that our own code is clear and easily understood by our colleagues.

So here are 5 tips that can help keep you from being that programmer.

Use Meaningful variable Names

Everywhere we code, we have the control to choose meaningful names: variables, functions, classes, packages, files…Taking it seriously is the first step to having Clean Code.

// BAD
let days;// elapsed time in days

// CLEAN 
let daysSinceCreation;
let daysSinceUpdate;
let ageInDays;
let elapsedDays;

In the case of booleans, the variable name should be a question that can be answered with yes or no, such as

const isValid = false;
const hasAuthorization = true;

Write code that expresses intent

Having clear and distinct names for variables and functions is crucial to avoid confusion and ensure their intended context and meaning. So when you are writing a function you should remember two things to make your function clean and easy to understand…

They should be small.
They should do only one thing and they should do it well.

Let’s look at an example of good naming:

function getActiveAccount(studentId){                  
     // ...
}
function getActiveAccountInfo(studentId){ 
     // ...
}

Select a naming style and stick with it consistently. Whether it’s camelCase or under_scores, choose one that suits you best and use it throughout your code.

Give your functions, methods, and variables names based on their purpose or characteristics. If a method retrieves something, include “get” in its name. Similarly, if a variable holds the gender of a user, name it userGender for example.

Important: If you find it challenging to name your function, it may be a sign that it’s trying to do too many things at once. In such cases, it’s a good idea to break it down into smaller, more focused functions. In such case, you can use these 2 principles.

The function body should not contain more than 2 levels of nesting
A function should take a maximum of 3 arguments

Group Similar Functions Together

As your projects grow in size, it’s common to have numerous functions. To maintain a well-organized codebase, it’s recommended to keep all your function declarations at the top of the page or grouped together in one place. This practice not only helps improve code readability but also enhances search efficiency. By doing so, you can easily locate and access the function you need, making your coding experience smoother and more efficient.

export function read_data(file_name) {
  // ..
}

export function write_data(file_name) {
  // ..
}

and

import { read_data, write_data } from './utils.js';

You can now call the utility functions within the component.

Express yourself in code rather than in comments

There is a saying, “Code should be self-documenting”, which basically means, instead of using comments, your code should read well enough to reduce the need for comments.

POV: Comments are often lies waiting to happen. eg: You added new features and forgot to change previous comments.

Use consistent formatting & indentation

Think of code as an article, where consistency is key. Just like an article with inconsistent line spacing, varying font sizes, and scattered line breaks can be hard to read, the same holds true for your code.

To ensure clarity and readability, it’s important to maintain a consistent and organized structure in your code. By using formatter like black or prettier you can automate the formatting.

There is a famous quote from Bill Gates, it goes like

“If you can’t make it good, at least make it look good” — Bill Gates

Here’s a good and bad example:

The Good

function testNum(number) {
  if (number > 0) {
    result = 'positive';
  } else {
    result = 'NOT positive';
  }
  return result;
}

The Bad

function testNum(number) {
if (number > 0) {
  result = 'positive';
  } 
  else {
    result = 'NOT positive';
  }
  return result;
}

One last argument

There is a final argument to clean your code if you are not completely convinced, There is an interesting quote from Martin Fowler

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” — Martin Fowler

Thanks for reading!

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of claps! 👏

Please leave a comment with your feedback.

If you’d like to support me as a writer, consider Following me on Dev.to, and Connecting with me on LinkedIn.

5 Simple UX Rules that make great front-end

Rushit Jivani — Mon, 07 Aug 2023 05:07:20 +0000

You might agree that user experience (UX) is crucial for a website. But, did you know that web developers should also engage in UX design?

This article will explain why web developers should include UX while developing the website and what it means for your end product.

What is a UX Designer?

User experience designers create straightforward, understandable user interfaces that address customer problems in engaging and aesthetically beautiful ways.

Designers need to be aware of users’ needs, attitudes, motivations, expectations, and pain points to produce a great experience.

A UX designer does not always need prior design experience but should be able to think critically about how people interact with products.

Now, let’s focus on how we can deliver an amazing user experience (UX)

Build better Interfaces

Front-end development best practices focus on creating interfaces that pay close attention to every small detail of the provided designs. This includes incorporating the layouts, colors, typography, and spacing with precision and care.

You can read this article to enhance your UI skills.

Make Easy User Interaction

Another great tip for creating a user-friendly UI is to make sure that user interaction is easy. The ultimate goal of UI design is to make it incredibly easy and efficient for users to accomplish their tasks and find what they’re looking for.

For example, Use simple language that is easy to understand and avoid using industry and system-oriented language.

Design for Short Attention Span

Attention span is about how long a user concentrates on a given task without being distracted.

A study conducted by Microsoft revealed that the average human attention span has decreased from 15 seconds to 8 seconds.

The solution is Simplify the interface by removing unnecessary elements or content that is not necessary to accomplish the user task.

Commonly performed actions should be presented as large buttons, conveniently located within easy reach. Another approach to reducing unnecessary steps is to streamline the process and provide clear guidance, especially in places such as navigation, forms, and drop-downs.

Cut out the clutter

A simple and clean UI is super important for apps!

It’s quite common to end up with a lot of elements on a small mobile screen. Sadly, this can create a cluttered experience that overwhelms the user, reduce their retention, and leads to disengagement.

To prevent this, it helps to focus on only one thing on every app screen as much as possible.

One helpful approach is to divide your UI into multiple screens, each focusing on a specific topic or feature. This way, users can give their undivided attention to each screen and fully engage with the content.

Here’s an example from Duolingo.

If you’ve used Duolingo before, you know they have a pretty extensive onboarding sequence. But you hardly get overwhelmed because they space everything nicely into multiple screens.

Intuitive design

According to Google, intuitive design refers to making products easy to use. When something resembles a button, for instance, we know that clicking on it will cause a certain action to occur. In the same way, if there is a link, we know that clicking it will either open a new web page or lead us to a different website.

For instance, the majority of users are already aware that the hamburger icon, a three-line graphic, denotes a hidden menu.

Users will find it easier to use that in your software than to develop a unique way of displaying a collapsible menu.

Conclusion

I hope it's clear by now how UX is the heart of any website’s front end. But everything needs practice and patience. With these five steps, you can better plan your transition.

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of reaction! 🦄

Please leave a comment with your feedback.

If you’d like to support me as a writer, consider Following me on Dev, and Connecting with me on LinkedIn.

5 Simple UI rules that make great front-end

Rushit Jivani — Wed, 02 Aug 2023 05:35:31 +0000

UI development is an interesting topic that can sometimes be a bit unclear. We all know that UI stands for User Interface, so a UI Developer is someone who focuses on designing and developing the user interface. It may sound straightforward, but, the responsibilities of a UI Developer encompass much more than meets the eye.

In this article, we’ll explore 5 wonderful tips that are widely recognized as excellent design practices.

Consistency & Alignment

Consistency means keeping a consistent appearance across your interface. This includes using the same colors, fonts, and design elements. For instance, when you use the same button style and color throughout your application, it ensures a seamless and predictable user experience.

Alignment refers to the placement of elements relative to each other or a common baseline, creating a sense of order and visual harmony. For example, vertically aligning form labels and input fields makes the form appear organized and easy to read.

Constraining Whitespace Content

This is an incredibly easy method for anyone, Just ensure that your elements are perfectly aligned, down to the smallest detail, and that the spacing around each element is consistent and balanced.

Have in mind that white space works as an invisible border. If you feel like you need a limit to separate two sections, maybe all you need is white space!

Color palettes and theory

Color theory is the study of how colors interact and influence one another and the emotions and perceptions they evoke. In UI design, color helps guide users’ attention, convey information, and create a cohesive visual experience.

In UI design, it’s important to pay attention to Color & Contrast because, without them, even websites with the best UI can end up looking unappealing.

Maintain a healthy text/color relationship by following these simple guidelines:

Always avoid low contrast between text and background.
Don’t use complementary colors for text and background, especially when the colors are of similar brightness and saturation (e.g., yellow text on a purple background).
Even on white backgrounds, don’t set body text in bright colors. Black and dark gray are the easiest to read.

Typography

Typography is an important part of UI design. It’s all about choosing and arranging fonts, sizes, and spacing to make the interface look good and be easy to read.

For frontend developers, knowing about typography means thinking about things like which font to use, how to organize the text, and making sure it’s easy to read. This way, the text will look nice, convey the information well, and help create a good user experience.

Visual hierarchy

Hierarchy refers to the arrangement of design elements in order of importance, guiding the user’s attention through the interface. For example, using larger fonts for headings and smaller fonts for body text helps users easily distinguish between different sections.

For example, Contrast helps establish a visual hierarchy, making it easy for users to understand the relative importance of different elements on the screen. For example, Your Call To Action button stand out by picking a color, style, and text that make it look different from the other things on the page. Where you put that button is also really important. Check out this post to find out the best ways to position your CTA.

Conclusion

In this article, we discussed some UI ideas that can assist you in creating a more appealing UI. and as I mentioned before, UI is more than what meets the eye.

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of reaction! 🦄

Please leave a comment with your feedback.

If you’d like to support me as a writer, consider Following me on Dev, and Connecting with me on LinkedIn.

React Native: Ultimate Guide to Create a Home Screen Widget for iOS and Android

Rushit Jivani — Thu, 27 Jul 2023 07:01:56 +0000

Widgets are awesome tools that make your home screen look more attractive and also provide you with quick and useful information. In this post, we’ll show you how to create widgets for both Android and iOS and how to incorporate them into your React Native app.

How does the widget work?

Widget works as an extension of your app. It cannot work as a standalone app itself. Widgets are available in three sizes (Small, Medium, and Large) and could be static or configurable. A widget is limited in terms of interaction. It cannot be scrollable, only tappable. A small widget can only have one type of interaction area whereas a medium and large widget can have multiple tappable areas of interaction.

Why should you develop a widget?

Widgets are commonly created not only to keep users informed with important information and provide access to their applications from their home screen but also to differentiate those applications from competitors and maintain user engagement.

Widgets with React Native

⚠️ Unfortunately, it is not possible to create a home screen widget using React Native. But don’t worry, we have a solution for you! In this guide, we’ll explore how to use a native widget to communicate with your React Native application. Let’s get started!

TL;DR

If you prefer 🍖 rather than 📖, you can play with samples in this repository. Pull requests, and other types of contributions are welcome!

🛠️ Setup

1. Create a new app

react-native init RNWidget

2. Add a dependency that will be creating the bridge between the widget and the app

yarn add react-native-shared-group-preferences

3. For communication with the native module add this code to your App.js

import React, {useState} from 'react';
import {
  View,
  TextInput,
  StyleSheet,
  NativeModules,
  SafeAreaView,
  Text,
  Image,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
  ToastAndroid,
} from 'react-native';
import SharedGroupPreferences from 'react-native-shared-group-preferences';
import AwesomeButton from 'react-native-really-awesome-button';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';

const group = 'group.streak';

const SharedStorage = NativeModules.SharedStorage;

const App = () => {
  const [text, setText] = useState('');
  const widgetData = {
    text,
  };

  const handleSubmit = async () => {
    try {
      // iOS
      await SharedGroupPreferences.setItem('widgetKey', widgetData, group);
    } catch (error) {
      console.log({error});
    }
    const value = `${text} days`;
    // Android
    SharedStorage.set(JSON.stringify({text: value}));
    ToastAndroid.show('Change value successfully!', ToastAndroid.SHORT);
  };

  return (
    <SafeAreaView style={styles.safeAreaContainer}>
      <KeyboardAwareScrollView
        enableOnAndroid
        extraScrollHeight={100}
        keyboardShouldPersistTaps="handled">
        <View style={styles.container}>
          <Text style={styles.heading}>Change Widget Value</Text>
          <View style={styles.bodyContainer}>
            <View style={styles.instructionContainer}>
              <View style={styles.thoughtContainer}>
                <Text style={styles.thoughtTitle}>
                  Enter the value that you want to display on your home widget
                </Text>
              </View>
              <View style={styles.thoughtPointer}></View>
              <Image
                source={require('./assets/bea.png')}
                style={styles.avatarImg}
              />
            </View>

            <TextInput
              style={styles.input}
              onChangeText={newText => setText(newText)}
              value={text}
              keyboardType="decimal-pad"
              placeholder="Enter the text to display..."
            />

            <AwesomeButton
              backgroundColor={'#33b8f6'}
              height={50}
              width={'100%'}
              backgroundDarker={'#eeefef'}
              backgroundShadow={'#f1f1f0'}
              style={styles.actionButton}
              onPress={handleSubmit}>
              Submit
            </AwesomeButton>
          </View>
        </View>
      </KeyboardAwareScrollView>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  safeAreaContainer: {
    flex: 1,
    width: '100%',
    backgroundColor: '#fafaf3',
  },
  container: {
    flex: 1,
    width: '100%',
    padding: 12,
  },
  heading: {
    fontSize: 24,
    color: '#979995',
    textAlign: 'center',
  },
  input: {
    width: '100%',
    // fontSize: 20,
    minHeight: 50,
    borderWidth: 1,
    borderColor: '#c6c6c6',
    borderRadius: 8,
    padding: 12,
  },
  bodyContainer: {
    flex: 1,
    margin: 18,
  },
  instructionContainer: {
    margin: 25,
    paddingHorizontal: 20,
    paddingTop: 30,
    borderWidth: 1,
    borderRadius: 12,
    backgroundColor: '#ecedeb',
    borderColor: '#bebfbd',
    marginBottom: 35,
  },
  avatarImg: {
    height: 180,
    width: 180,
    resizeMode: 'contain',
    alignSelf: 'flex-end',
  },
  thoughtContainer: {
    minHeight: 50,
    borderRadius: 12,
    borderWidth: 1,
    padding: 12,
    backgroundColor: '#ffffff',
    borderColor: '#c6c6c6',
  },
  thoughtPointer: {
    width: 0,
    height: 0,
    borderStyle: 'solid',
    overflow: 'hidden',
    borderTopWidth: 12,
    borderRightWidth: 10,
    borderBottomWidth: 0,
    borderLeftWidth: 10,
    borderTopColor: 'blue',
    borderRightColor: 'transparent',
    borderBottomColor: 'transparent',
    borderLeftColor: 'transparent',
    marginTop: -1,
    marginLeft: '50%',
  },
  thoughtTitle: {
    fontSize: 14,
  },
  actionButton: {
    marginTop: 40,
  },
});

let me explain how to use SharedGroupPreferences and SharedStorage in your app. SharedGroupPreferences is imported from the library and you can use it by storing an item with the setItem method, using a key, value, and group. For this example, the key will be widgetKey, the value will be widgetData, a JavaScript object that contains user input, and the group will be the name of the group that will share the information between the app and the widget. We will talk more about this when we get to the Swift code.

Now, for Android, we’ll use SharedStorage. You don’t need to install any additional libraries for this, since it’s included in the React Native package. The value will be a serialized JavaScript object, which will be converted to a string and saved using the set SharedStorage method. Easy peasy, right?

For native code. Let’s start with iOS.

🍏 Implementation for iOS

1. Open your app project in Xcode and choose File > New > Target.

2. From the Application Extension group, select Widget Extension, and then click Next.

3. Enter the name of your extension.

4. If the widget provides user-configurable properties, check the Include Configuration Intent checkbox.

5. Click Finish.

6. If it asks to activate the scheme, click Activate.

7. Your widget is ready to go! You now have a new folder that contains all the essential files for your widget.

8. Before we move on to the next step, let’s test out your basic widget. To do this, simply open up your terminal and run the app using the following command

react-native run-ios

9. To add a widget you have to tap and hold the home screen until a ➕ appears in the upper left corner. When you click on the icon, a list of apps will appear. Our newly created app should be included.

10. To communicate with React Native widget we have to add “App Group”

11. Now for our Streak widget edit StreakWidget.swift with the below code

import WidgetKit
import SwiftUI
import Intents

struct WidgetData: Decodable {
   var text: String
}

struct Provider: IntentTimelineProvider {
   func placeholder(in context: Context) -> SimpleEntry {
      SimpleEntry(date: Date(), configuration: ConfigurationIntent(), text: "Placeholder")
  }

  func getSnapshot(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (SimpleEntry) -> ()) {
      let entry = SimpleEntry(date: Date(), configuration: configuration, text: "Data goes here")
      completion(entry)
  }

   func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline<SimpleEntry>) -> Void) {
      let userDefaults = UserDefaults.init(suiteName: "group.streak")
      if userDefaults != nil {
        let entryDate = Date()
        if let savedData = userDefaults!.value(forKey: "widgetKey") as? String {
            let decoder = JSONDecoder()
            let data = savedData.data(using: .utf8)
            if let parsedData = try? decoder.decode(WidgetData.self, from: data!) {
                let nextRefresh = Calendar.current.date(byAdding: .minute, value: 5, to: entryDate)!
                let entry = SimpleEntry(date: nextRefresh, configuration: configuration, text: parsedData.text)
                let timeline = Timeline(entries: [entry], policy: .atEnd)
                completion(timeline)
            } else {
                print("Could not parse data")
            }
        } else {
            let nextRefresh = Calendar.current.date(byAdding: .minute, value: 5, to: entryDate)!
            let entry = SimpleEntry(date: nextRefresh, configuration: configuration, text: "No data set")
            let timeline = Timeline(entries: [entry], policy: .atEnd)
            completion(timeline)
        }
      }
  }
}

struct SimpleEntry: TimelineEntry {
   let date: Date
      let configuration: ConfigurationIntent
      let text: String
}

struct StreakWidgetEntryView : View {
  var entry: Provider.Entry

  var body: some View {
    HStack {
      VStack(alignment: .leading, spacing: 0) {
        HStack(alignment: .center) {
          Image("streak")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 37, height: 37)
          Text(entry.text)
            .foregroundColor(Color(red: 1.00, green: 0.59, blue: 0.00))
            .font(Font.system(size: 21, weight: .bold, design: .rounded))
            .padding(.leading, -8.0)
        }
        .padding(.top, 10.0)
        .frame(maxWidth: .infinity)
        Text("Way to go!")
          .foregroundColor(Color(red: 0.69, green: 0.69, blue: 0.69))
          .font(Font.system(size: 14))
          .frame(maxWidth: .infinity)
        Image("duo")
          .renderingMode(.original)
          .resizable()
          .aspectRatio(contentMode: .fit)
          .frame(maxWidth: .infinity)

      }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
  }
}

@main
struct StreakWidget: Widget {
  let kind: String = "StreakWidget"

  var body: some WidgetConfiguration {
    IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider()) { entry in
      StreakWidgetEntryView(entry: entry)
    }
    .configurationDisplayName("My Widget")
    .description("This is an example widget.")
  }
}

struct StreakWidget_Previews: PreviewProvider {
  static var previews: some View {
    StreakWidgetEntryView(entry: SimpleEntry(date: Date(), configuration: ConfigurationIntent(), text: "Widget preview"))
      .previewContext(WidgetPreviewContext(family: .systemSmall))
  }
}

Basically:

Read the UserDefaults object from the shared group we created before

let userDefaults = UserDefaults.init(suiteName: "group.streak")

Get the data (which has been encoded in string form)

let savedData = userDefaults!.value(forKey: "widgetKey")

Decode into an object

let parsedData = try? decoder.decode(WidgetData.self, from: data!)

Create a timeline of said objects

let nextRefresh = Calendar.current.date(byAdding: .minute, value: 5, to: entryDate)!

Note that the objects added to the Timeline struct must comply with the TimelineEntry protocol, which means they need to have a Date field and nothing else. This is important information to keep in mind.

That’s all there is to it for iOS. Simply run npm start and test your app on either a virtual or real device.

After you’ve installed the app, all you need to do is select the widget from the widget list and put it on your home screen.

Next, open the app and type something in the input field, press enter, and go back to the home screen.

And that’s it for iOS, Now, let’s explore how we can accomplish the same thing on Android.

🤖 Implementation for Android

1. Open the Android folder on Android Studio. Then, inside Android Studio, right-click on res > New > Widget > App Widget:

2. Name and configure your widget, and click Finish:

3. Now run the app and you can see the widget available.

4. To communicate between the widget and the React Native app we’ll be using the SharedPreferences Android native module, which is just like UserDefaults for iOS.

This involves adding new SharedStorage.java and SharedStoragePackager.java files to the same directory as your MainApplication.java.

SharedStorage.java

package com.rnwidget;

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import android.app.Activity;
import android.appwidget.AppWidgetManager;
import android.content.ComponentName;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.util.Log;

public class SharedStorage extends ReactContextBaseJavaModule {
 ReactApplicationContext context;

 public SharedStorage(ReactApplicationContext reactContext) {
  super(reactContext);
  context = reactContext;
 }

 @Override
 public String getName() {
  return "SharedStorage";
 }

 @ReactMethod
 public void set(String message) {
  SharedPreferences.Editor editor = context.getSharedPreferences("DATA", Context.MODE_PRIVATE).edit();
  editor.putString("appData", message);
  editor.commit();

  Intent intent = new Intent(getCurrentActivity().getApplicationContext(), StreakWidget.class);
  intent.setAction(AppWidgetManager.ACTION_APPWIDGET_UPDATE);
  int[] ids = AppWidgetManager.getInstance(getCurrentActivity().getApplicationContext()).getAppWidgetIds(new ComponentName(getCurrentActivity().getApplicationContext(), StreakWidget.class));
  intent.putExtra(AppWidgetManager.EXTRA_APPWIDGET_IDS, ids);
  getCurrentActivity().getApplicationContext().sendBroadcast(intent);

 }
}

SharedStoragePackager.java

package com.rnwidget;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class SharedStoragePackager implements ReactPackage {

 @Override
 public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
  return Collections.emptyList();
 }

 @Override
 public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
  List<NativeModule> modules = new ArrayList<>();

  modules.add(new SharedStorage(reactContext));

  return modules;
 }

}

5. Change the package name for your app as shown in AndroidManifest.xml file inside android > app > src > main.

6. After placing those necessary adjustments, go ahead and add this code to your MainApplication.java file within the getPackages method.

packages.add(new SharedStoragePackager());

7. With the bridge set up, let’s move on to receiving data in StreakWidget.java. To update the widget’s content, we’ll need to use SharedPreferences and manage it with the updateAppWidget method. Here’s the code to replace your existing one with:

package com.rnwidget;

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;
import android.widget.RemoteViews;
import android.content.SharedPreferences;

import org.json.JSONException;
import org.json.JSONObject;

/**
 * Implementation of App Widget functionality.
 */
public class StreakWidget extends AppWidgetProvider {

    static void updateAppWidget(Context context, AppWidgetManager appWidgetManager,
                                int appWidgetId) {

        try {
            SharedPreferences sharedPref = context.getSharedPreferences("DATA", Context.MODE_PRIVATE);
            String appString = sharedPref.getString("appData", "{\"text\":'no data'}");
            JSONObject appData = new JSONObject(appString);
            RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.streak_widget);
            views.setTextViewText(R.id.appwidget_text, appData.getString("text"));
            appWidgetManager.updateAppWidget(appWidgetId, views);
        }catch (JSONException e) {
            e.printStackTrace();
        }
    }

    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        // There may be multiple widgets active, so update all of them
        for (int appWidgetId : appWidgetIds) {
            updateAppWidget(context, appWidgetManager, appWidgetId);
        }
    }

    @Override
    public void onEnabled(Context context) {
        // Enter relevant functionality for when the first widget is created
    }

    @Override
    public void onDisabled(Context context) {
        // Enter relevant functionality for when the last widget is disabled
    }
}

8. Now, let’s talk about the widget’s appearance. This step is optional, but we’ll use the same design as in the iOS example. In Android Studio, navigate to your app > res > layout > streak_widget.xml file. And you can check out the design preview like this

9. That’s all there is to it! Give it a test run on an Android device

Conclusion

Great job! By learning how to create the AppWidget with React Native, you’ve added a valuable skill to your toolkit. Even if this topic is new to you, don’t worry — it’s straightforward and easy to use in your applications. Keep up the good work!

Kindly give it a clap 👏🏻 and share it with your friends!

Please leave a comment with your feedback.

If you’d like to support me as a writer, consider Following me on Dev, and Connecting with me on LinkedIn.

Dynamically change app launcher icon in React Native

Rushit Jivani — Mon, 17 Jul 2023 05:01:32 +0000

Have you ever used Tinder? if yes then can notice their app icon has a pink base color, but when a user upgrades to the gold membership, the icon changes to reflect that subscription level without requiring a new app download.

Today we’ll be exploring a cool npm package called react-native-change-icon that allows us to effortlessly switch up our app icon. Exciting, right? Let’s dive in and see how we can use it!

🛠️ Installation

To get started, let’s open up your CLI and head over to your project directory. Once you’re there, go ahead and run this command:

npm i react-native-change-icon

yarn add react-native-change-icon

🤖 Implementation for Android

Now that you have your app icons, let’s head to the “android” directory of your project, followed by android ->app -> src -> main -> res -> mipmap-* directories, and add all the icons you require.

When you’re finished adding the icons, take a look at your folder; it should appear something like this.

To update your AndroidManifest.xml file, simply add an activity-alias for each of your app icons like this!

<activity-alias
     android:name="com.rndynamicicon.MainActivitylogo_1"
     android:enabled="false"
     android:exported="true"
     android:icon="@mipmap/logo_1"
     android:targetActivity=".MainActivity">
     <intent-filter>
       <action android:name="android.intent.action.MAIN" />
       <category android:name="android.intent.category.LAUNCHER" />
     </intent-filter>
</activity-alias>

Your package name and MainActivity name will be followed by the app icon name in this section. When you’re finished, your AndroidManifest.xml file will have a similar appearance to this.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

 <uses-permission android:name="android.permission.INTERNET" />

 <application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/logored"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity" />
     <activity-alias
         android:name="com.rndynamicicon.MainActivitylogo_1"
         android:enabled="false"
         android:exported="true"
         android:icon="@mipmap/logo_1"
         android:targetActivity=".MainActivity">
         <intent-filter>
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
    </activity-alias>
    <activity-alias
       android:name="com.rndynamicicon.MainActivitylogo_2"
       android:enabled="false"
       android:exported="true"
       android:icon="@mipmap/logo_2"
       android:targetActivity=".MainActivity">
       <intent-filter>
         <action android:name="android.intent.action.MAIN" />
         <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
    </activity-alias>
 </application>
</manifest>

You have the flexibility to create even more alternate icons by simply adding more tags.

Note:

If you are using any deep links inside the app, then please put them in all the activity alias.
Only one activity alias should be enabled initially, otherwise, it will create multiple launcher icon at the time time of app launching.
Should enable the default activity alias which we want to show on the first time of app launching.
If you want a different name with each launcher icon then you can also change the label name in each activity alias.

🍏 Implementation for iOS

First, go to the ios/ folder and do pod install.
Open your app in Xcode and add an AppIcons group to your app.

Add all your images as image@2x.png and image@3x.png.

Open the Info.plist file.
Add Icon files (iOS 5) to the Information Property List.

Add CFBundleAlternateIcons as a dictionary to the Icon files (iOS 5) as it is used for the alternative icons.

Add dictionaries under CFBundleAlternateIcons named as your icon names in the AppIcons group.

For each dictionary, these two properties UIPrerenderedIcon and CFBundleIconFiles need to be configured.

Set the type of UIPrerenderedIcon to String and its value to NO.
Set the type of CFBundleIconFiles to Array and set its first key ,Item 0 to String with the value of the icon name.

set the default icon name in Primary Icon and Newsstand Icon -> Icon files -> Item 0.

👨‍💻 JS side

After these steps, we have the ability to change the icon in the JS code of our application. Let’s import the library:

import { changeIcon, getIcon } from 'react-native-change-icon';

changeIcon('iconname');        // pass the icon name to change the icon 

getIcon();                     // to get the currently active icon

Well, that’s it. 🎉 Run the code to see it in action.🥳

Output

Please check out the demo project on GitHub for more information

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of reaction! 🦄

Happy Coding :)

An Ultimate all-in-one Auth Module in React Native: Enable One-line Sign-Up and Sign in with Eartho on your device.

Rushit Jivani — Tue, 11 Jul 2023 07:22:37 +0000

One of the first features you must develop when building an app is a simple and seamless login and sign up flow in which users don’t need to remember complicated passwords.

A very interesting option for this is Eartho One. It’s one of the most famous platforms which provides the facilities of passwordless authentication and many more.

In this article, we’re going to dive into building a super cool React Native application using Eartho for passwordless authentication.

TL;DR

If you prefer 🍖 rather than 📖, you can play with samples in this repository.

Why passwordless authentication?

Implementing passwordless authentication can be very helpful for both Developer and your customers! The best part about it is how easy it is to use. With passwordless authentication, your customers can quickly and easily log in without needing to remember a complicated code or go through the hassle of resetting their password if they forget it. Not only does this save your customers time and frustration, but it also saves you time and resources by eliminating the process of resetting passwords for customers who forget their email address, phone number, or login credentials.

Why Eartho one?

Ready high converting UI/UX
Login from Google, Twitter, Github, Facebook, Apple, Microsoft, VK, Snapchat, Yandex, Reddit, SMS, Metamask at once with no extra steps or extra effort.
Users will be protected under the third layer, which prevents companies to track after users.
Set boundaries and rules to stop users you don’t want from connecting.
Advanced analytics and info about your app from all sources. ready for use. no extra steps
No-Code / Your own server. you decide.

Going Passwordless with React Native and Eartho one

Click on “Add Project” on the creators’ home screen to create your first project.

Once you have created the project, you can access the “Add Access” option on the project page. From there, you can create the access points for your Eartho project.

Install the SDK and initialize Eartho One with the below command

npm install @eartho/one-client-react-native

For iOS, add URL type

Identifier: eartho

URL Schemes: $(PRODUCT_BUNDLE_IDENTIFIER).one.eartho.world

Integrating Eartho into your app

import { init as earthoInit, connectWithRedirect, getIdToken, getUser } from '@eartho/one-client-react-native';

//1. Init the sdk
React.useEffect(() => {

earthoInit(
  "YOUR_EARTHO_CLIENT_ID", 
  "YOUR_EARTHO_CLIENT_SECRET");

}, []);


//2. open the access dialog
connectWithRedirect("access id: e.g. YOUR_EARTHO_ACCESS_ID")


//3. Get id token or user 

console.log(await getIdToken());
console.log(await getUser());

Copy your Eartho values from the “setup tab” And replace them with YOUR_EARTHO_CLIENT_ID , YOUR_EARTHO_CLIENT_SECRET, YOUR_EARTHO_ACCESS_ID

Well, that’s it. 🎉 Run the code to see it in action.🥳

Want to add Firebase as a back-end? then follow the below steps

Go to https://console.cloud.google.com/iam-admin/serviceaccounts?authuser=0
Watch this helpful video for more guidance: https://youtu.be/wpbHI-4W33g
Save the JSON file
Visit https://creator.eartho.world/
Select your entity and go to the security tab

Change the environment to Firebase Auth

Finally, copy the content from the JSON file and paste it onto the website.

That’s it! You done

Wrapping Up

Passwordless authentication can make the login process easier and more secure compared to traditional username and password authentication. However, setting up a passwordless authentication system from scratch can be difficult. Fortunately, Eartho simplifies the process by allowing us to easily create an app with passwordless authentication.

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of reaction! 🦄

Please leave a comment with your feedback.

Connect with me on LinkedIn

Introducing FlashList: The New and Improved Alternative to FlatList for React Native!

Rushit Jivani — Wed, 05 Jul 2023 04:35:29 +0000

When it comes to rendering large lists in React Native, performance can become a bottleneck. Rendering a long list of items can cause delays and slow down the user interface, making the application feel sluggish and unresponsive.

But look no further because here comes the rescue!

Before we look into the solution, let’s discuss the problem!

The Problem?

When you render large lists which have 500+ items, then I'm pretty sure you ran into this warning

VirtualizedList: You have a large list that is slow to update — make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.

This usually happens when we add lots of items to a FlatList, and those items contain dynamic components with animations or other interactions, it can slow things down.

The FlatList here simply says it can’t handle the list to render smoothly. Then you research on the internet and try to optimize the FlatList by using props like removedClippedSubviews, initialNumToRender, maxToRenderPerBatch, windowSize, getItemLayout and many more.

But it’s still not enough to make the list render smoothly.

What about The existing solution RecyclerListView?

RecyclerListView is a third-party package optimized for rendering large amounts of data with very good real-world performance.

RecyclerListView is JS only with no native dependencies, inspired by both RecyclerView on Android and UICollectionView on iOS. It is highly performant and is as feature-rich as the built-in FlatList component.

The flaws of FlatList were taken into consideration when developing the RecyclerListView package. RecyclerListView cleverly recycles previously produced views rather than creating new views for onscreen components and destroying views for offscreen elements. This technique is known as “cell recycling“. And it allows views that are no longer visible to be used to render items.

But as developers you must spend a lot of time understanding how it works, playing with it, and requiring significant amounts of code to manage. For example, RecyclerListView needs predicted size estimates for each item and if they aren’t accurate, the UI performance suffers. It also renders the entire layout in JavaScript, which can lead to visible glitches.

RecyclerListView works very well! But it’s just too difficult to use most of the time. It’s even harder if you have items with dynamic heights that can’t be measured in advance.

The Solution

Meet FlashList! A speedy alternative to FlatList that works on the UI thread and according to their website, it runs 10 times faster on JS thread and 5 times faster on the UI thread.

To get started with FlashList, simply install it by running this command:

yarn add @shopify/flash-list

After you’ve installed FlashList, simply navigate to the ios directory and run pod install. That’s it! Your setup is complete.

FlatList and FlashList seem similar and have similar syntax. That means you can use all the FlatList props like data, renderItem, ListEmptyScrollComponent, and so on. If you are familiar with the FlatList properties, there won't be many changes. The only difference is that it uses RecyclerView instead of VirtualizedList as the underlying component.

How FlashList is the best solution for FlatList and RecyclerListView?

FlatList was not performant enough, but was easy to implement, and RecyclerListView was performant, but its API was difficult to understand. So, the idea was simple: can we combine the best of both, using the FlatList API, but gain RecyclerListView performance? and That’s how FlashList⚡️ was born.

FlashList

<FlashList
  data={DATA}
  renderItem={({ item }) => <Text>{item.title}</Text>}
  estimatedItemSize={200}
/>

Do you see how simple that is?

FlashList uses estimatedItemSize to determine the number of items that should be displayed on the screen during the initial load and while scrolling.

How does it achieve this? Rather than destroying the component when an item goes out of the viewport, FlashList renders the same component with different item properties. When using FlashList, it’s important to avoid adding key properties to the item component as recommended by React. This will prevent views from being recycled, which would negate all the benefits of FlatList.

Conclusion

And that’s that! Feel free to take a look at the library for yourself at https://shopify.github.io/flash-list/ and give it a try! You’ll see how easy it is to swap out your current FlatLists for FlashList, and you may notice some improved performance.

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of reaction! 🦄

Happy Coding :)

Learn how to perform unit testing in React Native with Jest.

Rushit Jivani — Mon, 26 Jun 2023 11:51:23 +0000

Hey there! Have you ever found yourself in a situation where you solved one problem, but then ended up introducing a new bug weeks later without realizing it? Well, it happens to the best of us! But, the good news is that you can easily avoid this by writing tests for your app.

When working on a project with a lot on your plate and tight deadlines, writing tests can often be overlooked and underestimated. However, once you learn how to write tests, you’ll see that it’s not as difficult as it may seem, and the benefits are well worth it! By writing tests, you can avoid future problems and make your life a lot easier in the long run.

So, I was recently tasked with writing Unit test cases for one of my client projects, and I gotta say, I was feeling a bit lost. It seems like there aren’t a lot of great resources out there to help you understand the concepts properly. The information is scattered all over the place, and it’s tough to figure out the best way to get started with Unit testing in React Native.

After a long search on the internet, I came across this quote

“It’s hard enough to find an error in your code when you’re looking for it; it’s even harder when you’ve assumed your code is error-free.” — Steve McConnell

In this article, we will focus on unit testing by providing a simple example of how to test a React Native app. This article is intended for anyone who is very new to testing in React Native.

What is Jest?

Jest is a JavaScript testing library created by the same company behind React: Facebook. But while Jest was created by the same developers who created React, it is not limited to only React — it can also be used with other frameworks like Node, Angular, Vue.js, and Babel.

Jest is a great tool for testing, with many advantages that make it an ideal choice for both front-end and back-end testing. Its ease of use, time-saving features, and lack of dependence on third-party tools make it an attractive option.

Getting started with Jest

Jest is included by default when initializing a React native app using npx react-native init Projectname. However, when manually installing Jest with npm, use the provided command to install it as a developer dependency.

npm install --save-dev jest

For TypeScript

npm install --save-dev ts-jest

Example App
For this tutorial, we are going to use this simple app, but of course, you can apply everything learned in any app you want.

Math function Testing!

For our first test, let’s test some math functions. Classic.

To understand the scenario let’s create maths.js which includes the math functions, and Math-test.js which includes the test case to test the math function of the maths.js file.

// maths.ts
export const add = (a: number, b: number) => {
  const result = a + b;
  return result;
};

Let’s move on to creating our test cases! To start, simply import the math functions into the Math-test.js file.

// Math-test.js
import {add} from '../src/utils/maths';

it('addition should return 4', () => {
  const a = 2;
  const b = 2;

  expect(add(a, b)).toBe(4);
});

This is your standard it call (you can also use test). If we analyze this, it is a function that receives two arguments: a string for the test description, and a callback function that will be called when the test runs. on expect we are checking whether the math function gives the correct result.

Now let’s run this command in the terminal to run test cases.

npm test

Here, we can see all test cases passing. :)

Login functionality Testing!

For our second test, let’s test the real-world scenario of the login screen.

To understand the scenario let’s create login.js which includes the login validation functions, and Login-test.js which includes the test case to test the login function of the login.js file.

// login.js
export const LoginValidations = () => {
  const isEmailValid = (text: string) => /@/.test(text);
  const isPasswordValid = (password: string) => password.length >= 8;
  const areFormFieldsValid = (email: string, password: string) =>
    isEmailValid(email) && isPasswordValid(password);

  return {
    isEmailValid,
    isPasswordValid,
    areFormFieldsValid,
  };
};

Let’s move on to creating our test cases! To start, simply import the login functions into the Login-test.js file.

// Login-test.js
import {LoginValidations} from '../src/utils/login';

const {areFormFieldsValid, isEmailValid, isPasswordValid} = LoginValidations();

it('should be a valid email', () => {
  expect(isEmailValid('jhondoe@gmail.com')).toBeTruthy();
});

/**
 * We want to be sure to handle failure as well
 */
it('should not be a valid email', () => {
  expect(isEmailValid('jhondoe.gmail.com')).toBeFalsy();
});

///

it('should be a valid password', () => {
  expect(isPasswordValid('12345678')).toBeTruthy();
});
it('should not be a valid password', () => {
  expect(isPasswordValid('1234')).toBeFalsy();
});

////

it('should be valid fields', () => {
  expect(areFormFieldsValid('jhondoe@gmail.com', '12345678')).toBeTruthy();
});
it('should not be valid fields', () => {
  expect(areFormFieldsValid('jhondoe.gmail.com', '12378')).toBeFalsy();
});

Using .toBeTruthy is a great way to ensure a value is true in a Boolean context when you’re not concerned with the specific value. The same goes for .toBeFalsy used to ensure a value is false in a Boolean context when you’re not concerned with the specific value.

We can see how our tests run successfully:

Network call Testing!

For our third test, let’s test the real-world scenario of the network call.

To understand the scenario let’s create ApiHelper.js which includes the simple API call, and Dashboard-test.js which includes the test case to test the API function of the ApiHelper.js file.

// ApiHelper.js
import Http from '../utils/http';

export default {
  getStoriesOfSection: (page: number) => {
    return Http.request({
      url: `https://randomuser.me/api?lego&randomapi?results=${page}&results=10&seed=abc`, //api token here should store at BE
    });
  },
};

Let’s move on to creating our test cases! To start, simply import the network call functions into the Dashboard-test.js file.

// Dashboard-test.js
import ApiHelper from '../src/service/ApiHelper';

// API test
describe('Test API', () => {
  const TEST_CASE = [1, 2, 3, 4];
  TEST_CASE.forEach((item, index) => {
    test(`Test case ${index}: ${item}`, () => {
      return ApiHelper.getStoriesOfSection(item).then(res => {
        expect(res).toBeTruthy();
      });
    });
  });
});

When writing test cases, you might want to break your test suite into components using describe. For instance, you could use a describe block for each function in your user-facing class to better organize your tests based on your specific test strategy.

If you run the test now, you will see the following output:

Conclusion

And that’s that! In this post, we covered the basics of the Jest framework and how it could be used for testing simple JavaScript files. Keep in mind that well-structured code is easier to test. If testing is difficult, consider breaking the code into smaller, more manageable components. Remember, tests should enhance your app, not burden it.

This article offers an overview of React Native testing, but there’s so much more to learn! I encourage you to explore other testing techniques and tools, like Snapshot Testing, Detox, and React Native Testing Library. Choose the ones that work best for your project, and keep learning!

I hope this article has brought some new knowledge your way today. If you found it enjoyable and helpful, please don’t hesitate to give me a couple of reaction! 🦄

Happy Coding :)