Love Percentage Calculator App Using React Native, Expo, And Rapid API

React Native and Expo Projects For Beginners

React Native And Rapid API apps

Hey! My name is Rohit. I’m not a professional content writer, but I will do my best to ensure that by the end of this article, you will be able to build the love percentage calculator using applications using React Native and Expo.

I recommend that you watch the step-by-step tutorial here:

About Love Percentage Calculator Application

A love percentage calculator is a type of application or online tool that is designed to determine the level of compatibility between two people based on their names. The idea behind these calculators is that the compatibility between two people can be determined by comparing the letters in their names and using a special algorithm to calculate a percentage. This percentage is supposed to represent the likelihood that the two people are compatible with each other.

However, it’s important to keep in mind that these types of love percentage calculators are not scientific and should not be taken too seriously. The results they provide are meant to be light-hearted and entertaining, not a reliable indicator of compatibility. In other words, don’t rely on a love percentage calculator to decide whether or not to pursue a relationship with someone. Instead, use your own judgment and take the time to get to know the person before making any decisions.

I am using Rapid API to calculate the love percentage. Make your free account on Rapid API for API keys.

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

Project setup, Package Requirements, and Code

• Start your expo project
• I am not going to install any third-party package for UI. But you are free to use any library package for UI parts. It depends on your app requirement.
• Using the useState hook. Define some hooks.

const [maleName, setMaleName] = useState('')
    const [femaleName, setFemaleName] = useState('')
    const [loading, setLoading] = useState(false)
    const [lovePercentage, setLovePercentage] = useState([])

• The male and female field is set to empty. The love percentage array is also set to empty, initially.
• Now to calculate the love percentage:

const calculateLove = () => {
        const API_URL = `https://love-calculator.p.rapidapi.com/getPercentage?fname=${maleName}&sname=${femaleName}`
        setLoading(true)
        fetch(API_URL, {
            method: 'GET',
            headers: {
                'x-rapidapi-host': 'love-calculator.p.rapidapi.com',
                'x-rapidapi-key': '###############',
            }
        })
            .then(response => response.json())
            .then(data => {
                setLoading(false)
                console.log(data)
                setLovePercentage(data)
            })
            .catch(err => {
                console.log(err)
            })
}

• Make your account on Rapid API. Then fill in your Rapid API key. Using the above function, first, we fetch the data from Rapid API and convert those data into JSON format. Later we, replace the empty state of the love percentage with the data we fetch.
• The rest is the UI part. It’s on you and your project requirements. You can take help from here.
• That’s it. Now, you can test the application in the Expo Go Mobile Application.
• If you are confused or lost, I would recommend watching a step-by-step video tutorial. Few minutes of setup and code, you will be ready to test the application.

Why do I suggest watching more videos?

I am from India and I love writing code and sharing it with the community. We all know that money is the ultimate motivation for work, and the Medium payment system uses Stripe, which has been in preview mode in India for the past 4–5 years. I waited a year on the Medium platform, but in the end, nothing worked out.

So, I started making YouTube videos to make a living. I have posted the important code in the code snippet, but for a step-by-step guide, please follow the video. And if you go there, don’t forget to subscribe to my channel for React Native, Django, Python, and Data Science-related videos.

Thank you.