React Native Financial Calculator

Källkoden för applikationen är presenterad nedan. Första sektionen med flikar är konfigureringsfilen för appliktionen och den andra sektionen flikar utgör komponenterna applikationen bygger på. Komponenterna är de sektioner som renderar innehåller för användaren i applikationen.

Konfigurationsfiler

 import React, { Component } from ‘react’;
import { createAppContainer} from ‘react-navigation’;
import { createStackNavigator } from ‘react-navigation-stack’;
import SafeAreaView from ‘react-native-safe-area-view’;
import { View } from ‘react-native’;
import styles from ‘./styles’;
import Content from ‘./Components/content’;
import LanKalkylElement from ‘./Components/lankalkyl’;
import InvesteringsKalkylElement from ‘./Components/investeringskalkyl’;
import Header from ‘./Components/header’;
import Footer from ‘./Components/footer’;

// Klass for startsidan av appen,
// Renderar klasserna Header, Content och Footer inom View
class StartPage extends Component {
render(){
return (

        <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
        <Header />
        <Content />
        <Footer />
        </View>
        </SafeAreaView>

        )  

    }
}

// Klass for investeringskalkylen i appen,
// Renderar klasserna Content och Footer inom View
class InvesteringsKalkyl extends Component {
render(){
return (

        <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
        <LanKalkylElement />
        <Footer />
        </View>
        </SafeAreaView>

        )

    }
}

// Klass for Lanekalkylen i appen,
// Renderar klasserna Content och Footer inom View
class LanKalkyl extends Component {
render(){
return (

        <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
        <LanKalkylElement />
        <Footer />
        </View>
        </SafeAreaView>

        )

    }
}

// Navigationsinstallningar
// Huvudsida for appen ar: startsida(Start)
// De tva andra sidorna ar investeringskalkyl(Investering), lanekalkylen(Lan).
const RootStack = createStackNavigator(
    {
        Start: StartPage,
        Investering: InvesteringsKalkyl,
        Lan: LanKalkyl
    },
    {
        initialRouteName: ‘Start’,
    }
)

// Konstant variabel som skapar appen samt navigeringen (RootStack)
const AppContainer = createAppContainer(RootStack);

// Renderar AppContainer i enheten.
export default class App extends React.Component {
    render() {
        return <AppContainer />;
}
}

 

 

 

import { StyleSheet } from ‘react-native’;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ‘#fff’,
        flexDirection: ‘column’,
        flexGrow: 1,
    },

    homeText: {
        margin: 10,
    },

    text: {
        marginTop: 0,
        marginBottom: 0,
    },

    headerTextStyle: {
        textAlign: ‘center’,
        marginTop: 30,
        marginLeft: 24,
        marginRight: 24,
        fontSize: 24,
        fontWeight: ‘bold’,
        color: ‘grey’
    },

    contentStyle: {
        flex: 1,
        marginTop: 6,
        marginLeft: 24,
        marginRight: 24
    },

    footerTextStyle: {
        textAlign: ‘center’,
        marginTop: 20,
        marginLeft: 20,
        marginRight: 20,
        marginBottom: 4,
        fontSize: 18,
        justifyContent: ‘flex-end’,
        color: ‘grey’
    },

    footerCopyrightTextStyle: {
        textAlign: ‘center’,
        marginBottom: 4,
        fontSize: 10,
        justifyContent: ‘flex-end’,
        color:grey
    },

    textResult: {
        margin: 10,
    },

    numericInput: {
        marginTop: 0,
        height: 40,
        borderColor: ‘gray’,
        borderWidth: 1,
        textAlign: ‘center’
    },

});

    Slider
        margin-top: 20px;
        margin-bottom: 20px

}

export default styles;

 

module.exports = function(api) {
    api.cache(true);
    return {
        presets: [‘babel-preset-expo’],
    };
};

{
    “main”: “node_modules/expo/AppEntry.js”,
    “scripts”: {
        “start”: “expo start”,
        “android”: “expo start –android”,
        “ios”: “expo start –ios”,
        “web”: “expo start –web”,
        “eject”: “expo eject”
    },
    “dependencies”: {
        “@react-native-community/masked-view”: “^0.1.5”,
        “@react-native-community/slider”: “^2.0.8”,
        “expo”: “~36.0.0”,
        “pod”: “^0.9.0”,
        “react”: “~16.9.0”,
        “react-dom”: “~16.9.0”,
        “react-native”: “https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz”,
        “react-native-gesture-handler”: “~1.5.0”,
        “react-native-safe-area-context”: “^0.6.2”,
        “react-native-safe-area-view”: “^1.0.0”,
        “react-native-web”: “~0.11.7”,
        “react-navigation”: “^4.0.10”,
        “react-navigation-stack”: “^2.0.8”,
        “rn-range-slider”: “^1.3.0”
    },
    “devDependencies”: {
        “babel-preset-expo”: “~8.0.0”,
        “@babel/core”: “^7.0.0”
    },
    “private”: true
}

{
    “expo”: {
        “name”: “Personal Finance”,
        “slug”: “PersonalFinanceApp”,
        “privacy”: “public”,
        “sdkVersion”: “36.0.0”,
        “platforms”: [
            “ios”,
            “android”,
            “web”
        ],
        “version”: “1.0.0”,
        “orientation”: “portrait”,
        “icon”: “./assets/splash.png”,
        “splash”: {
            “image”: “./assets/splash.png”,
            “resizeMode”: “contain”,
            “backgroundColor”: “#ffffff”
        },
        “updates”: {
            “fallbackToCacheTimeout”: 0
        },
        “assetBundlePatterns”: [
            “**/*”
        ],
        “ios”: {
            “supportsTablet”: true
        }
    }
}

Komponenter placerade i /Components mappen i applikationen

import React from ‘react’;
import { View, Text } from ‘react-native’;
import styles from ‘../styles’;

// Klassen Header bestar av ett text element dar det star “Finanskalkylen”
export default class Header extends React.Component {
    render() {
        return(
            <View>
                <Text style={styles.headerTextStyle}>Finanskalkylen.</Text>
            </View>
        )
    }
}

import React from ‘react;
import { View, Text, Button, Image } from ‘react-native’;
import styles from ‘../styles’;
import { withNavigation } from ‘react-navigation’;

// Klassen Content som renderas i appen som <Content />
class Content extends React.Component {

// Funktion för knappen for investeringskakalkylen
// Navigerar till sidan ‘Investering’ som ar konfigurerat i RootStack
    buttonInvesteringFunc() {
        this.props.navigation.navigate(‘Investering’);
    }

// Funktion för knappen för lanekalkylen
// Navigerar till sidan ‘Lan’ som ar konfigurerat i RootStack
    buttonLanFunc() {
        this.props.navigation.navigate(‘Lan’);
    }

// Renderar ut text element samt knappar för att navigera till de olika kalkylatorerna
// Bilden som är länkar är under lisens “free to use and share commercially” via www.bing.com
    render() {
        return(
            <View style={styles.contentStyle}>

                <Image source={{ uri: ‘https://live.staticflickr.com/8697/17309001591_b63c386161_b.jpg’ }}
                style={{ width: ‘100%’, height: 200 }} />

                <Text style={styles.homeText}>Gå till vår Investeringskalkyl</Text>
                <Button title=’Investeringskalkylen’ onPress={() => this.buttonInvesteringFunc()}/>
                <Text style={styles.homeText}>Gå till vår lånekalkyl</Text>
                <Button title=’Lånekalkylen’ onPress={() => this.buttonLanFunc()}/>
            </View>
        )
    }
}

// Exporterar Content tillsammans med navigationsfunktionen
export default withNavigation(Content);

import React from ‘react’;
import { View, Button, Text, TextInput, Slider, Keyboard } from ‘react-native’;
import styles from ‘../styles’;
import { withNavigation } from ‘react-navigation’;

// Klass för investeringskalkylen som renderas i appen som <InvesteringsKalkylElement />.
class InvesteringsKalkylElement extends React.Component {

// Constructor som skapar variabler i state som används vid input och beräkning av investeringen.
    constructor(props) {
        super(props);
        this.state = {
        InitialAmount: 2000,
        MonthlyAmount: 500,
        investYear: 10,
        investInterest: 8.00,
        totalSumInvest: 0,
        totalReturn: 0,
        totalSumInvestReturn: 0,

    };
}
// Ändrar värdet för startkapitalet (InitialAmount) från input av användaren.
onChangedInitialAmount(Input) {
    this.setState({InitialAmount: Input})
}

// Ändrar värdet för månadssparandet (MonthlyAmount) från input av användaren.
onChangedMonthlyAmount(Input) {
    this.setState({MonthlyAmount: Input})
}

// Ändrar värdet för antalet år (investYear) från input av användaren.
onChangedValueInvestYear(Input) {
    this.setState({investYear: Input})
}

// Ändrar värdet för avkastningen (investInterest) från input av användaren.
onChangedValueInvestInterest(Input) {
    this.setState({investInterest: Input})
}

// Funktion som raknar ut avkastningen pa investeringen.
calcButton() {
// Hamtar värden fran anvandarens input for att rakna ut investering fran state.
    const initialAmount = parseFloat(this.state.InitialAmount);
    const monthlySave = parseFloat(this.state.MonthlyAmount);
    const yearsOfInvest = parseFloat(this.state.investYear);
    const returnRate = parseFloat(this.state.investInterest);

// Formel som raknar ut avkastningen.
    var A = initialAmount*Math.pow(1+((returnRate/100)/12),12*yearsOfInvest)
    var S = monthlySave*((Math.pow((1+((returnRate/100)/12)),(12*yearsOfInvest))-1)/((returnRate/100)/12))

    var amountGeneratedInitialAmount = (A-initialAmount);
    var amountGeneratedMonthly = (S-(monthlySave*yearsOfInvest*12));
    var totalGenerated = amountGeneratedInitialAmount + amountGeneratedMonthly;

    const amountWithoutReturn = (initialAmount + ((monthlySave * 12) * yearsOfInvest)).toFixed(2);
    const amountGenerated = (totalGenerated).toFixed(2);
    const TotalCapitalResult = (A+S).toFixed(2);

// Uppdaterar varden i state och skriver ut dessa, som ar resultatet av utrakningen.
// Kalla for formel: https://structx.com/annual_compound_interest_with_contributions.html
    this.setState({totalSumInvest: amountWithoutReturn});
    this.setState({totalReturn: amountGenerated});
    this.setState({totalSumInvestReturn: TotalCapitalResult});

}

// Funktion som navigerar användaren till startsidan (Start)
buttonHomeFunc() {
    this.props.navigation.navigate(‘Start’);
}

// Renderar ut text, input och knappar for anvandaren.
// Startkapital, Manadssparande, Avkastning, Investeringstid (ar), Kalkylera, Resultat, Hemknapp
render() {
    return(
    <View style={styles.contentStyle}>

        <Text style={styles.text}> Startkapital </Text>
        <TextInput style={styles.numericInput}
        onBlur={Keyboard.dismiss}
        keyboardType={‘numeric’}
        onChangeText = {(InitialAmount)=> this.onChangedInitialAmount(InitialAmount)}
        value = {String(this.state.InitialAmount)}
        placeholder = ‘2000’ />

        <Text style={styles.text}> Månadssparande </Text>
        <TextInput style={styles.numericInput}
        onBlur={Keyboard.dismiss}
        keyboardType={‘numeric’}
        onChangeText = {(MonthlyAmount)=> this.onChangedMonthlyAmount(MonthlyAmount)}
        value = {String(this.state.MonthlyAmount)}
        placeholder = ‘500’ />

        <Text style={styles.text}> Avkastning: {this.state.investInterest}%</Text>
        <Slider step={0}
        maximumValue={40}
        onValueChange = {(investInterest)=> this.onChangedValueInvestInterest(investInterest)}
        value = {this.state.investInterest} />

        <Text style={styles.text}> Antal år: {this.state.investYear}</Text>
        <Slider step={1}
        maximumValue={80}
        onValueChange = {(investYear)=> this.onChangedValueInvestYear(investYear)}
        value = {this.state.investYear} />

        <Button title=’Kalkylera’ onPress={() => this.calcButton()} />

        <Text style={styles.textResult}>Total summa: {this.state.totalSumInvest} kr</Text>
        <Text style={styles.textResult}>varav avkastning: {this.state.totalReturn} kr</Text>
        <Text style={styles.textResult}>Resulterande kapital: {this.state.totalSumInvestReturn} kr</Text>

        <Button title=’Tillbaka’ onPress={() => this.buttonHomeFunc()}/>

    </View>
        )
    }
}
// Exporterar InvesteringsKalkylElement tillsammans med navigationsfunktionen
export default withNavigation(InvesteringsKalkylElement);

import React from ‘react’;
import { View, Text, Button, TextInput, Keyboard, Slider } from ‘react-native’;
import styles from ‘../styles’;
import { withNavigation } from ‘react-navigation’;

// Klass för lanekalkylen som renderas i appen som <LanekalkylElement />.
class LanKalkylElement extends React.Component {

// Constructor som skapar variabler i state som används vid input och beräkning av lånet.
    constructor(props) {
        super(props);
        this.state = {
            loanAmount: 20000,
            loanInterest: 2.5,
            loanYear: 10,
            totalPayment: 0,
            totalInterestPayment: 0,

            };
    }

// Ändrar värde för lånesumman (loanAmount) från input av användaren.
onTextChangedAmount(input) {
    this.setState({loanAmount: input})
}

// Ändrar värde för räntan (loanInterest) från input av användaren.
onTextChangedInterest(input) {
    this.setState({loanInterest: input})
}

// Ändrar värde för återbetalningstiden (loanYear) från input av användaren.
onTextChangedYear(input) {
    this.setState({loanYear: input})
}

// Funktion som räknar ut räntekostnaden på lånet.
calcButton() {

// Hämtar värden från state (Input av användaren eller initiala värden satt från start).
    const loanAmount = parseFloat(this.state.loanAmount);
    const loanRate = parseFloat(this.state.loanInterest);
    const loanYear = parseFloat(this.state.loanYear);

    var Months = loanYear * 12;
    var actualInterestRate = (loanRate / 100) / 12;

// Enkel formel som räknar ut lånekostnaden för ett annuitetslån.
// Källa för formel: https://sv.wikipedia.org/wiki/Annuitetsl%C3%A5n
    var monthlyCost = loanAmount * ((actualInterestRate * Math.pow(1 + actualInterestRate, Months)) /
(Math.pow((actualInterestRate + 1), Months) – 1))
    var totalCost = Math.round(((monthlyCost * Months) * 100) / 100);
    var InterestPayed = Math.round(((totalCost – loanAmount) * 100) / 100);

// Skriver över resultatet av uträkningen till variabler inom state, dessa skrivs då ut.
    this.setState({totalPayment: totalCost});
    this.setState({totalInterestPayment: InterestPayed});
}

// Funktion som navigerar användaren till startsidan (Start)
buttonHomeFunc() {
    this.props.navigation.navigate(‘Start’);
}

// Renderar ut text, input och knappar för användaren.
// Lånebelopp, Ränta, Antal år, Kalkylera, Resultat, Hemknapp
render() {
    return(
    <View style={styles.contentStyle}>

        <Text style={styles.text}> Lånebelopp </Text>
        <TextInput style={styles.numericInput}
        onBlur={Keyboard.dismiss}
        keyboardType={‘numeric’}
        onChangeText = {(loanAmount)=> this.onTextChangedAmount(loanAmount)}
        value = {String(this.state.loanAmount)}
        placeholder = ‘20000’ />

        <Text style={styles.text}> Ränta </Text>
        <TextInput style={styles.numericInput}
        onBlur={Keyboard.dismiss}
        keyboardType={‘numeric’}
        onChangeText = {(loanInterest)=> this.onTextChangedInterest(loanInterest)}
        value = {String(this.state.loanInterest)}
        placeholder = ‘2.5’ />

        <Text style={styles.text}> Antal år: {this.state.loanYear}</Text>
        <Slider step={1}
        maximumValue={15}
        onValueChange = {(loanYear)=> this.onTextChangedYear(loanYear)}
        value = {this.state.loanYear} />

        <Button title=’Kalkylera’ onPress={() => this.calcButton()}/>
        <Text style={styles.textResult}>Total summa att återbetala: {this.state.totalPayment} kr</Text>
        <Text style={styles.textResult}>varav räntekostnad: {this.state.totalInterestPayment} kr</Text>
        <Button title=’Tillbaka’ onPress={() => this.buttonHomeFunc()}/>

    </View>
    )
}

}
// Exporterar LanKalkylElement tillsammans med navigationsfunktionen
export default withNavigation(LanKalkylElement);

import React from ‘react’;
import { View, Text } from ‘react-native’;
import styles from ‘../styles’;

// kod är skriven i engelska då jag alltid kodat i engelska, för att slippa blanda språk i kodningen
// Klassen footer skriver ut ett text element med beskrivning av applikationen
export default class Footer extends React.Component {
    render() {
        return(
            <View>
                <Text style={styles.footerCopyrightTextStyle}>Denna applikation är mitt skolprojekt skapat med hjälp av React Native</Text>
                <Text style={styles.footerCopyrightTextStyle}>Bilder är hämtade från www.pexels.com</Text>
            </View>
        )
    }
}