Finished recording 6th app

Author: hiteshchoudhary

Project-Six-contribution.md

@@ -4,7 +4,7 @@
 
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import App from '../src/App';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';

currencyConverter06/App.tsx

@@ -3,7 +3,7 @@
  */
 
 import {AppRegistry} from 'react-native';
-import App from './App';
+import App from './src/App';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

currencyConverter06/__tests__/App-test.tsx

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "18.2.0",
-    "react-native": "0.71.4"
+    "react-native": "0.71.4",
+    "react-native-snackbar": "^2.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

currencyConverter06/index.js

@@ -0,0 +1,162 @@
+
+import React, { useState } from 'react';
+
+import {
+  FlatList,
+  Pressable,
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TextInput,
+  useColorScheme,
+  View,
+} from 'react-native';
+
+
+//Constants
+import { currencyByRupee } from './constants';
+//Component
+import CurrencyButton from './components/CurrencyButton';
+
+import Snackbar from 'react-native-snackbar';
+
+
+
+
+const App = (): JSX.Element => {
+  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' //only for iOS
+            onChangeText={setInputValue}
+            keyboardType='number-pad'
+            placeholder='Enter amount in Rupees'
+            />
+          </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)}
+            >
+              <CurrencyButton {...item} />
+            </Pressable>
+          )}
+          />
+        </View>
+      </View>
+      
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#515151',
+  },
+  topContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+  },
+  resultTxt: {
+    fontSize: 32,
+    color: '#000000',
+    fontWeight: '800',
+  },
+  rupee: {
+    marginRight: 8,
+
+    fontSize: 22,
+    color: '#000000',
+    fontWeight: '800',
+  },
+  rupeesContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  inputAmountField: {
+    height: 40,
+    width: 200,
+    padding: 8,
+    borderWidth: 1,
+    borderRadius: 4,
+    backgroundColor: '#FFFFFF',
+  },
+  bottomContainer: {
+    flex: 3,
+  },
+  button: {
+    flex: 1,
+
+    margin: 12,
+    height: 60,
+
+    borderRadius: 12,
+    backgroundColor: '#fff',
+    elevation: 2,
+    shadowOffset: {
+      width: 1,
+      height: 1,
+    },
+    shadowColor: '#333',
+    shadowOpacity: 0.1,
+    shadowRadius: 1,
+  },
+  selected: {
+    backgroundColor: '#ffeaa7',
+  },
+});
+
+export default App;

currencyConverter06/package-lock.json

@@ -0,0 +1,36 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+
+import { View, Text, StyleSheet} from 'react-native'
+
+type CurrencyButtonProps = PropsWithChildren<{
+    name: string;
+    flag: string;
+}>
+
+const CurrencyButton = (props: CurrencyButtonProps): JSX.Element => {
+    return(
+        <View style={styles.buttonContainer}>
+            <Text style={styles.flag}>{props.flag}</Text>
+            <Text style={styles.country}>{props.name}</Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    buttonContainer : {
+        alignItems: 'center'
+    },
+    flag: {
+        fontSize: 28,
+        color: "#FFFFFF",
+        marginBottom: 4
+    },
+    country: {
+        fontSize: 14,
+        color: "#2d3436",
+    
+    }
+})
+
+export default CurrencyButton