Suman Sourabh's Blog, page 3

How to Actually Upgrade Expo and React Native Versions to Latest?

I saw some extremely frustrating Reddit threads discussing about why it is so difficult to upgrade to the latest React Native version. I was at this sorry state because I was upgrading it incorrectly!

Recently, I was given a task to upgrade an Expo managed React Native mobile application to the latest version, i.e., Expo version 50.0.0.

Table of Contents1. Always upgrade one version at a time2. If you use a development build, create a new development build after each version upgradeUpgrade to Latest Expo Version1. Open the documentation on Upgrade Expo SDK and read it first!2. Upgrade Expo version3. Upgrade all dependencies to match the installed SDK version.4. Create a new development build (new apk file)5. Run development server6. Build the application7. Submit the application to Play StoreImportant Note

If you also use an Expo managed project, here are the two most important things that you need to keep in mind:

1. Always upgrade one version at a time

Upgrading one version at a time is extremely important as even Expo has recommended the developers to do so in their upgrade documentation.

I was trying to upgrade from Expo v47 to v50 in one go!

That caused a lot of issues and much of my effort got wasted. It is easier to less errors by upgrading to v48 instead of resolving huge number of errors by upgrading to v50 directly.

2. If you use a development build, create a new development build after each version upgrade

When I was first trying to upgrade, I didn’t follow this step. That resulted errors getting logged in on big red screens on my Android Studio virtual device.

Expo changelog documentation of v50 has mentioned this.

Now, here are the steps that you need to follow to upgrade to latest Expo/React Native versions.

Upgrade to Latest Expo Version1. Open the documentation on Upgrade Expo SDK and read it first!

You will surely find some important information there.

2. Upgrade Expo version

Here, I am upgrading to v50

yarn add expo@50.0.03. Upgrade all dependencies to match the installed SDK version.

This will help upgrade all the dependencies of the project and make them compatible with the current Expo SDK version.

npx expo install –fix4. Create a new development build (new apk file)

I used a development build in my project, so I had to create new development build to test my application.

eas build --platform android --profile development5. Run development server

Check and see if the app is running correctly and has no errors.

npx expo start --dev-client6. Build the application

If the application runs correctly, create a new production build.

eas build --platform android7. Submit the application to Play Store

If the build is successful, initiate a new submission of your app to Google Play Store.

eas submit --platform android

There you go! You have successfully upgraded the Expo and React Native versions of your project.

Important Note

Even if the steps are written here, it might not be a smooth sail to upgrade the Expo version of your application. You will encounter errors and warnings. The key is to research those on the internet by checking GitHub issues of those packages and checking going through discussions on StackOverflow.

Read more: How to Create Toggle Password Visibility with Material UI

The post How to Actually Upgrade Expo and React Native Versions to Latest? appeared first on Suman Sourabh | Web/Mobile Development Blog.

How to Create Toggle Password Visibility with Material UI

Have you ever entered your password in a password input field and forget what you just typed? And then you wanted to see it but wait! There was no option available to view your password.

To solve this problem, it is good to have a visibility icon in the password field which when once clicked, will allow the user to view their password and vice-versa.

Annoying, right?

This is how I created the same in Libertas, my Next.js full stack application with Material UI.

1. Create a component called PasswordInput

For reusing the same component in other pages, I created a separate component which will only have a TextField component of type “password”. You can name it whatever you want.

const PasswordInput = () => {

return (
);

};

export default PasswordInput;

This component has its own state which I used for the toggle visibility function.

Create a TextField of type “password”

I have used Material UI as the CSS library in Libertas, so I simply imported a TextField component (equivalent to input element of HTML) and pasted it into the PasswordInput component.

I installed Material UI with this command:

yarn add @mui/material @emotion/react @emotion/styled

If you have Material UI installed in your project, you can follow the same code given below.

import { TextField } from "@mui/material";

const PasswordInput = ({ password, handlePassword }) => {

return (

);
};

export default PasswordInput;

Notice how the value and onChange attribute values are coming through props.

2. Add toggle visibility functionality

I wanted to show the password when I click on the visibility icon (the eye icon) and when I click it again, password should get hidden.

To achieve this I added a state variable called showPassword which will take a Boolean value (true/false). I created it using useState hook.

const [showPassword, setShowPassword] = useState(false);

Initially, the value of showPassword should be false, meaning the password will remain hidden at the start.

When the user clicks on the eye icon, showPassword will change to true and password will be visible to the user.

So, I added a function responsible for clicking on the icon.

const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};

The above function toggles the value of showPassword state variable.

But wait, something’s still missing right now.

Where’s the eye icon that I have been mentioning?

3. Add the toggle visibility icon on the TextField

To add the icons, I installed Material UI Icons package.

I used the following command to install it.

yarn add @mui/icons-material

I took a couple of icons from the Material icons page:

VisibilityOff



Visibility.




InputProps={{
endAdornment: (

aria-label="toggle password visibility"
onClick={handleClickShowPassword}
edge="end"
>
{showPassword ? : }


),
}}

If we want to add an icon inside the TextField component in Material UI, we have to use something called InputAdornment. It is one of the ways to add an icon to the TextField.

I added both the icons using a conditional operator to toggle the visibility based on the showPassword state.

Now, the PasswordInput component looks like this:

import { Visibility, VisibilityOff } from "@mui/icons-material";
import { IconButton, InputAdornment, TextField } from "@mui/material";
import { useState } from "react";

const PasswordInput = ({ password, handlePassword }) => {
const [showPassword, setShowPassword] = useState(false);

const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};

return (
size="small"
type="password"
label="Password"
value={password}
onChange={handlePassword}
required={true}
InputProps={{
endAdornment: (

aria-label="toggle password visibility"
onClick={handleClickShowPassword}
edge="end"
>
{showPassword ? : }


),
}}
fullWidth
/>
);
};



4. Display the PasswordInput component on the page

Now, we can use the component in any page by importing it and passing the props to it.

"use client";
import PasswordInput from "@/components/formComponents/PasswordInput";

const DisplayPasswordInput = () => {
const [password, setPassword] = useState("");

return (
style={{ display: "flex", justifyContent: "center", padding: "4rem 0" }}
>
password={password}
handlePassword={(e) => setPassword(e.target.value)}
/>

);
};

export default DisplayPasswordInput;

This is what we see on the page:

We are still not done though.

If you look carefully at the code, we wouldn’t we able to see what we have typed on the password field.

Why?

Because in the type attribute, we have specified the value as “password”. No matter how many times we click on the visibility icon, Material UI will only show the dots in the password field.

5. Add “text” to the type attribute based on condition

To actually see what we type, we have to set the type attribute’s value to “text” when showPassword is true.

type={showPassword ? "text" : "password"}



Final code for toggle password visibility



import { Visibility, VisibilityOff } from "@mui/icons-material";
import { IconButton, InputAdornment, TextField } from "@mui/material";
import { useState } from "react";

const PasswordInput = ({ password, handlePassword }) => {
const [showPassword, setShowPassword] = useState(false);

const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};

return (
size="small"
type={showPassword ? "text" : "password"}
label="Password"
value={password}
onChange={handlePassword}
required={true}
InputProps={{
endAdornment: (

aria-label="toggle password visibility"
onClick={handleClickShowPassword}
edge="end"
>
{showPassword ? : }


),
}}
fullWidth
/>
);
};

export default PasswordInput;

This is how I created the toggle password visibility functionality in Libertas.

You can import that component in your login page, sign up page or any other page!

Hello world!

Welcome to Astra Starter Templates. This is your first post. Edit or delete it, then start blogging!

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

I wrote my 40,000 word novel in 4 months. You can do it too!

In just 4 months, I wrote a 40,000 fiction novel from scratch and published it on amazon through KDP. Here's how you can do it too!

The post I wrote my 40,000 word novel in 4 months. You can do it too! appeared first on Suman Sourabh.

Upper Moon 1, Kokushibo Explained – Demon Slayer

Why did Kokushibo become a demon? How did the Upper Moon 1 die? What was his relationship with Yoriichi? Learn everything about Kokushibo in this blog!

The post Upper Moon 1, Kokushibo Explained – Demon Slayer appeared first on Suman Sourabh.

Top 20 Anime And Manga YouTube Channels

There's so much anime content out there, so here's a list of top 20 anime and manga YouTube channels in the world that you will ever need.

The post Top 20 Anime And Manga YouTube Channels appeared first on Suman Sourabh.

Why Are Attack on Titan Characters so Impactful?

Do you know that why the Attack on Titan characters will keep on making a big impact on your mind and heart even when the show is long over? Well, read this 5 min blog to find out!

The post Why Are Attack on Titan Characters so Impactful? appeared first on Suman Sourabh.

Why Jujutsu Kaisen Season 2 can be A Major Hit

Mappa's Jujutsu Kaisen Season 2 anime is here and we are all thrilled!! But do you know what is special this time? Read this 3 minute blog!

The post Why Jujutsu Kaisen Season 2 can be A Major Hit appeared first on Suman Sourabh.

Tokyo Revengers Arcs Tier List

Want to know which arc is better? Tokyo Revengers Arcs tier list is here to be ranked on the basis of storyline and development.

The post Tokyo Revengers Arcs Tier List appeared first on Suman Sourabh.