Simplifying Currency Conversion: A React Native Application

Photo by Christine Roy on Unsplash

In today’s globalized world, financial transactions often involve dealing with multiple currencies. To aid in this process, a React Native application has been developed, offering a simple yet effective solution to convert Indian Rupees (INR) into a selection of other currencies.

Introducing the Currency Converter App

This mobile application provides users with an intuitive interface, enabling them to effortlessly convert Indian Rupees into different currencies. The app’s user-friendly design ensures a smooth experience, allowing for quick and accurate conversions on-the-go.

How It Works

Upon opening the app, users are greeted with a clean interface. They can input the desired amount in Indian Rupees, specifying the value they wish to convert. The app dynamically updates the conversion in real-time as the user types the amount.

Select Your Currency

The app provides a curated list of currencies to convert the entered Rupee value into. Users can easily browse and select their preferred currency from a flat list of items, representing various global currencies.

The list of currency consist of name, value, flag and country. They are maintained in constant to easily grab into flatlist. Each item of flatlist is in the form of a pressable card which display its details.

import React, {useState} from 'react';
import {FlatList,Pressable,StatusBar,StyleSheet,Text,TextInput,View} from 'react-native';
import Snackbar from 'react-native-snackbar';
import {currencyByRupee} from './src/components/constants';
import CurrencyBtn from './src/components/CurrencyBtn';
const App = () => {
  const [inputValue, setInputValue] = useState('');
  const [resultValue, setResultValue] = useState('');
  const [targetCurrency, setTargetCurrency] = useState('');

  const buttonPressed = (targetValue: Currency) => {
    if (!inputValue) {
      return Snackbar.show({
        text: 'Enter a value to convert',
        backgroundColor: '#EA7773',
        textColor: '#000000',
      });
    }

    const inputAmount = parseFloat(inputValue);
    if (!isNaN(inputAmount)) {
      const convertedValue = inputAmount * targetValue.value;
      const result = `${targetValue.symbol} ${convertedValue.toFixed(2)}`;
      setResultValue(result);
      setTargetCurrency(targetValue.name);
    } else {
      return Snackbar.show({
        text: 'Not a valid number to convert',
        backgroundColor: '#F4BE2C',
        textColor: '#000000',
      });
    }
  };

  return (
    <>
      <StatusBar />
      <View style={styles.container}>
        <View style={styles.topContainer}>
          <View style={styles.rupeesContainer}>
            <Text style={styles.rupee}>₹</Text>
            <TextInput
              maxLength={14}
              value={inputValue}
              clearButtonMode="always"
              onChangeText={setInputValue}
              keyboardType="number-pad"
              placeholder="Enter amount in Rupees"
              style={styles.inputValue}
            />
          </View>
          {resultValue && <Text style={styles.resultTxt}>{resultValue}</Text>}
        </View>
        <View style={styles.bottomContainer}>
          <FlatList
            numColumns={3}
            data={currencyByRupee}
            keyExtractor={item => item.name}
            renderItem={({item}) => (
              <Pressable
                style={[
                  styles.button,
                  targetCurrency === item.name && styles.selected,
                ]}
                onPress={() => buttonPressed(item)}>
                <CurrencyBtn {...item} />
              </Pressable>
            )}
          />
        </View>
      </View>
    </>
  );
};

Seamless Conversion

Once a currency is selected, the app swiftly performs the conversion using real-time exchange rates.

The converted amount is displayed along with the respective unit of currency, providing users with immediate clarity on the converted value.

Noteworthy Features

• Error Handling: The application is equipped to handle input errors, guiding users to enter valid numerical values and ensuring accurate conversions.
• Feedback Mechanism: Interactive feedback is provided through snackbar messages, notifying users of actions or errors during the conversion process.
• Intuitive Design: The app’s design prioritizes simplicity and ease of use, allowing users to navigate and utilize its functionalities effortlessly.

Conclusion

In an era where financial transactions involve diverse currencies, having a reliable currency converter at your fingertips is invaluable. This React Native application fills that need by offering a seamless, efficient, and user-friendly solution for converting Indian Rupees into a variety of global currencies.

This application serves as a testament to the power of technology in simplifying everyday tasks and facilitating international financial interactions.

Git repo :- https://github.com/neha20k/day_04_RNV_currency_converter

#ReactNative #CurrencyConverter #IndianRupees #MobileApp #CurrencyConversion