Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Develop a React Native application for currency conversion. The application will have two parts: Part 1 : Convert values from USD and GBP to EUR

Develop a React Native application for currency conversion. The application will have two parts: Part 1: Convert values from USD and GBP to EUR using fixed exchange rates. Part 2: Convert values from USD and GBP to EUR using data from the ExchangeRate-API. Create the React Native App Install Node.js Make sure you have Node.js installed on your machine. npm install -g create-react-native-app npx create-react-native-app CurrencyConverter cd CurrencyConverter start the emulator (with the batch file or from android studio) run the app npm start (npm run android) Change the app npm install react-native-simple-radio-button axios axios is only need for the second part Replace the Code in App.js:
Open the App.js file in your project directory and replace its contents with the code provided in the instructions. -Add an input field (TextInput), two radio buttons (RadioButton), a button (Button), and a label (Text).-Implement the logic to convert the entered value from USD to EUR and from GBP to EUR. -Display the conversion result in the label.
Code: import React, { useState } from 'react'; import { View, Text, TextInput, Button, StyleSheet } from 'react-native'; import RadioForm from 'react-native-simple-radio-button'; export default function App(){ const [amount, setAmount]= useState(''); const [currency, setCurrency]= useState('USD'); const [result, setResult]= useState(null); const conversionRates ={ USD: 0.92, GBP: 1.12,}; const handleConversion =()=>{ const rate = conversionRates[currency]; const convertedAmount =(parseFloat(amount)* rate).toFixed(2); setResult(`${convertedAmount} EUR`); }; const radio_props =[{ label: 'USD', value: 'USD' },{ label: 'GBP', value: 'GBP'},]; return ( Currency Converter setCurrency(value)} formHorizontal={true}
labelHorizontal={false} buttonSize={10}/>{result && {result}}); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20,}, header: { fontSize: 24, marginBottom: 20,}, input: { height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 20, paddingHorizontal: 10, width: '80%',}, result: { marginTop: 20, fontSize: 18,},});

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image_2

Step: 3

blur-text-image_3

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

More Books

Students also viewed these Databases questions