fincal-xx

v1.0.33

Published

8 months ago

A typescript package that samples cash flow generation

Downloads

0High
0Medium
0Low

mobilefirstfinance

README

A TypeScript implementation of the ACTUS library is proposed to be developed for the Mobile First Finance project. Hence, a mock cash-flow generator (fincal-xx) is developed in TypeScript. This cash-flow generator fincal-xx npm package is then utilised in web and mobile app development. This document demonstrates each of these functionalities.

Features of fincal-xx package

BondCalculator: That accepts input parameters bondAmount, interestRate, and bondTermMonths, to produce deterministic cashflows throughout the bond's duration.
LoanCalculator: That accepts input parameters loanAmount, interestRate, and loanTermMonths, to produce deterministic cashflows over the course of the loan.

How run fincal-xx npm package ?

Install TypeScript Compiler:
Open your terminal or command prompt and execute the following command to install TypeScript compiler globally:


  npm install -g typescript

Installing TypeScript globally allows you to use the TypeScript compiler (tsc) from anywhere on your system. Adding sudo grants superuser privileges to the installation process.

Install the Module:

Use npm to install the fincal-xx module into your project:


npm install fincal-xx

This command will compile all TypeScript files in the current directory and output the JavaScript files into the dist directory.


npx tsc --outDir dist

Create your TypeScript file yourfile.ts


touch yourfile.ts

This command will create a new file named yourfile.ts in the current directory. You may replace yourfile.ts with the name of your TypeScript file. Note : You first need to navigate to a directory where you want to create the file.

Save this code in a file named yourfile.ts

Use the below code for BondCalculator:

import { BondCalculator } from "fincal-xx";
const bond = new BondCalculator(50000, 10, 1); // Creating a new instance of the bond class
const monthlyPaymentCycle = bond.calculatePaymentBreakdown();
console.log(JSON.stringify(monthlyPaymentCycle));

Use the below code for LoanCalculator:

import { LoanCalculator } from "fincal-xx";
const loan = new loanCalculator(50000, 10, 1); // Creating a new instance of the Loan class
const monthlyPaymentCycle = loan.calculatePaymentBreakdown();
console.log(JSON.stringify(monthlyPaymentCycle));

Compile the TypeScript file:

npx tsc yourfile.ts

This command will generate a JavaScript file (yourfile.js) based on your TypeScript code.

Run the compiled JavaScript file with Node.js:

node yourfile.js

This command will execute the JavaScript file using Node.js, running the logic defined in your TypeScript code Sample response of bondcalculator.js

[
  { "interest": 416.6666666666667 },
  { "interest": 416.6666666666667 },
  { "interest": 416.6666666666667 },
  { "interest": 416.6666666666667 },
  { "interest": 416.6666666666667 },
  { "interest": 416.6666666666667 },
  { "interest": 416.6666666666667 },
  { "interest": 416.6666666666667 },
  { "interest": 416.6666666666667 },
  { "interest": 416.6666666666667 },
  { "interest": 416.6666666666667 },
  { "interest": 416.6666666666667 }
]

Sample response for loancalculator.js

[
  {
    "principal": 3979.127694833827,
    "interest": 416.6666666666667,
    "balance": 46020.87230516617
  },
  {
    "principal": 4012.287092290775,
    "interest": 383.5072692097181,
    "balance": 42008.5852128754
  },
  {
    "principal": 4045.722818059865,
    "interest": 350.0715434406283,
    "balance": 37962.86239481553
  },
  {
    "principal": 4079.4371748770304,
    "interest": 316.3571866234627,
    "balance": 33883.4252199385
  },
  {
    "principal": 4113.432484667673,
    "interest": 282.3618768328208,
    "balance": 29769.99273527083
  },
  {
    "principal": 4147.71108870657,
    "interest": 248.08327279392358,
    "balance": 25622.28164656426
  },
  {
    "principal": 4182.275347779125,
    "interest": 213.51901372136885,
    "balance": 21440.006298785134
  },
  {
    "principal": 4217.12764234395,
    "interest": 178.6667191565428,
    "balance": 17222.878656441186
  },
  {
    "principal": 4252.270372696817,
    "interest": 143.52398880367656,
    "balance": 12970.608283744368
  },
  {
    "principal": 4287.705959135957,
    "interest": 108.0884023645364,
    "balance": 8682.90232460841
  },
  {
    "principal": 4323.436842128756,
    "interest": 72.35751937173676,
    "balance": 4359.465482479654
  },
  {
    "principal": 4359.46548247983,
    "interest": 36.328879020663784,
    "balance": -1.7553247744217515e-10
  }
]

How to use fincal-xx npm package in an AngularJS project for web application development?

Install Angular CLI

Run the following command to install a specific version of Angular CLI if you haven't already installed it globally on your local machine and ensure you have Node.js installed on your machine:

Note: Starting from Angular 17, Node.js versions ^18.13.0 || ^20.9.0 are compatible.


npm install -g @angular/cli@<version>

For Linux and macOS users, you might need to use sudo:


sudo npm install -g @angular/cli@<version>

Note: Install the Latest Angular CLI

If you prefer to install the latest version of Angular CLI, use the following command:


npm install -g @angular/cli@latest

For Linux and macOS users, you might need to use sudo:


sudo npm install -g @angular/cli@latest

Creating a new angular project

Once you've successfully installed Angular CLI, open the terminal in your Visual Studio IDE. Next, navigate to the directory where you intend to create your new Angular project. Then, execute the following command:


ng new my-angular-app

Note: If you have installed the Angular 17 CLI , please run the following command:


ng new my-angular-app --no-standalone

Replace my-angular-app with the name of your Angular project.

After the project is created, navigate into the project directory using the IDE terminal:


cd my-angular-app

Enter the following command into the Visual Studio IDE terminal to open the IDE with the project name.


 code .

Once inside the project directory, you can start the development server by running the following command:


ng serve

The application will then be accessible in your browser at http://localhost:4200.

Integrating npm Package in Angular project

To integrate npm packages into your Angular application, follow these steps:

Open Terminal: Open a new terminal within Visual Studio IDE.

Install the Package: Navigate to your project directory in the terminal and run the following command to install the package:


 npm install fincal-xx


yarn add fincal-xx

For Linux and macOS users, you might need to use sudo:


 sudo npm install fincal-xx


sudo yarn add fincal-xx

Minimal Setup Example

To include the FormsModule in your Angular application, follow these steps:

Open your app.module.ts file, typically located in the src/app directory of your Angular project.
Import the FormsModule from @angular/forms at the top of your app.module.ts file:
```
import { FormsModule } from "@angular/forms";
```

Add FormsModule to the imports array in your module file. This step integrates the FormsModule into your Angular application:

@NgModule({
  declarations: [
    // Components, directives, and pipes
  ],
  imports: [
    FormsModule,
    // Other imported modules
  ],
  providers: [
    // Services and other providers
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Ensure that FormsModule is included in the imports array alongside any other modules your application requires.

By completing these steps, you have successfully integrated the FormsModule into your Angular application, enabling template-driven forms functionality.

After adding FormsModule ,first thing you need to do is to import the LoanCalculator or BondCalculator into your app.component.ts file and use the Loan Calculator logic in your app.component.ts as follows:

/// ...
import { Component, ViewChild } from "@angular/core";

import { BondCalculator, LoanCalculator } from "fincal-xx";

import { NgForm } from "@angular/forms";

/**
 * Interface for defining payment breakdown details.
 */
export interface PaymentBreakDown {
  interest: number;
  principal?: number;
  balance?: number;
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  /** Array to store payment breakdown details. */
  paymentCycle: PaymentBreakDown[] = [];

  /** Reference to the form. */
  @ViewChild("calculatorForm") calculatorForm!: NgForm;

  /** Object to store form data. */
  formData: any = {
    purpose: "", // Set the default value to an empty string
  };

  /** Flag to indicate whether the form is valid. */
  formValid: boolean = false;

  /**
   * Checks the validity of the form and calculates interest if valid.
   * @returns {void}
   */
  checkValidity(): void {
    const formValid = this.calculatorForm.valid;
    if (formValid) {
      this.calculateLoan();
    }
  }

  /**
   * Gets the keys of a PaymentBreakDown object.
   * @param object - The PaymentBreakDown object.
   * @returns An array of keys.
   */
  getPaymentKeys(object: PaymentBreakDown): string[] {
    return object ? Object.keys(object) : [];
  }

  /**
   * Gets the values of a PaymentBreakDown object.
   * @param object - The PaymentBreakDown object.
   * @returns An array of values.
   */
  getPaymentValues(object: PaymentBreakDown): number[] {
    return object ? Object.values(object) : [];
  }

  /**
   * Calculates loan based on form values.
   * @returns {void}
   */
  calculateLoan(): void {
    const { principal, interest, years } = this.calculatorForm.value;

    try {
      this.paymentCycle = new LoanCalculator(
        principal,
        interest,
        years
      ).calculatePaymentBreakdown();
    } catch (error) {
      console.error("Error calculating payment breakdown:", error);
    }
  }
}

/// ...

Finally let's put the table inside of the app.component.html file and pass the data to the table:

Remove Default HTML Tags: Open the app.component.html file in your Angular project and remove any default HTML tags.

Include Table Elements: To add a table element, copy and paste the following code into the app.component.html file:

/// ...

<section>
  <div class="container mt-5 d-flex-column">
    <div class="d-flex justify-content-center p-3">
      <h4 style="letter-spacing: 0.12rem">LOAN CALCULATOR</h4>
    </div>

    <div class="card p-3">
      <div class="calculator-container">
        <div class="form-container">
          <form #calculatorForm="ngForm">
            <div class="row">
              <div class="col-12 mb-3">
                <label for="principal" class="form-label">Amount</label>
                <input
                  type="number"
                  id="principal"
                  name="principal"
                  [(ngModel)]="formData.principal"
                  class="form-control"
                  required
                  (ngModelChange)="checkValidity()"
                />
              </div>
              <div class="col-12 mb-3 position-relative">
                <label for="interest" class="form-label">Interest</label>
                <div class="input-container">
                  <input
                    type="number"
                    id="interest"
                    name="interest"
                    [(ngModel)]="formData.interest"
                    class="form-control"
                    required
                    (ngModelChange)="checkValidity()"
                  />

                  <div class="float-right">%</div>
                </div>
              </div>

              <div class="col-12 mb-3">
                <label for="years" class="form-label">Years</label>
                <input
                  type="number"
                  id="years"
                  name="years"
                  [(ngModel)]="formData.years"
                  class="form-control"
                  required
                  (ngModelChange)="checkValidity()"
                />
              </div>
            </div>
          </form>
        </div>
        <div class="vertical-bar"></div>
        <div class="table-container">
          <table>
            <thead>
              <tr class="text-left">
                <th>#</th>
                <th>Principal</th>
                <th>Interest</th>
                <th>Balance</th>
              </tr>
            </thead>
            <tbody>
              <tr
                *ngFor="let payment of paymentCycle; let i = index"
                class="text-left"
              >
                <td>{{ i + 1 }}</td>
                <td *ngFor="let value of getPaymentValues(payment)">
                  {{ value.toFixed(2) }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

/// ...

Angular Bootstrap Integration

This guide will walk you through the process of integrating Bootstrap into your Angular project and applying custom SCSS styles.

Install the Package

Navigate to your project directory in the terminal and run the following command to install the package:

Install Bootstrap using npm:


  npm install bootstrap --force

This command installs Bootstrap and its dependencies into your project.

Open the angular.json file in your Angular project.

Locate the "styles" section in the angular.json file, typically found within the "architect" section under "build":

"architect": {
  "build": {
    "options": {
      "styles": [
        "src/styles.scss"
      ]
    }
  }
}

Add the path to Bootstrap's SCSS file "node_modules/bootstrap/scss/bootstrap.scss" before the existing path. Modify the "styles" section as follows:


"architect": {
  "build": {
    "options": {
      "styles": [
        "node_modules/bootstrap/scss/bootstrap.scss",
        "src/styles.scss"
      ]
    }
  }
}

Copy the following SCSS code into your app.component.scss file:

.d-flex-column {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.calculator-container {
  display: grid;
  grid-template-columns: 1fr auto 2fr;
  gap: 2rem;

  @media (min-width: 608px) and (max-width: 770px) {
    grid-template-columns: 1fr;
  }
}

label {
  font-size: 1rem;
  letter-spacing: 0.05rem;
}

.vertical-bar {
  border-right: 2px solid #eee; /* or any other color */
}

.table-container {
  max-height: 300px;
  overflow-y: auto;

  table {
    width: 100%;
  }

  &::-webkit-scrollbar {
    width: 0.15rem;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #9d9999; /* Neutral gray color for the scrollbar handle */
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background-color: #f0f0f0; /* Light gray color for the scrollbar track */
  }
}

thead {
  position: sticky;
  top: -2px;
  background: linear-gradient(to right, white, #f1f0f0, white);
  height: 3.25rem;
  border-radius: 1rem;
  z-index: 1;

  th {
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    height: 20px;
    width: 9.375rem;
    text-transform: capitalize;
  }
}

td {
  font-size: 0.8rem;
}

Copy and paste the following CSS code into your style.css file:

/* style.css */

body {
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: linear-gradient(to right, white, #e0d9d9) !important;
}

.card {
  border: none;
}

.float-right {
  float: right;
}

You may consider adding custom styling to the table to improve its appearance and readability.

After saving the file, your angular application will display the payment breakdown in a table format.

How to use fincal-xx npm package in ReactJS project for web application development?

Install react.js

If you haven't already set up a react.js environment, ensure you have Node.js installed on your machine.

Creating a new React.js project

To kickstart a new React project, you can utilize Create React App. Simply open your terminal within Visual Studio IDE, then navigate to your desired project directory, and execute the following command:


npx create-react-app fincal-react-app

After the project is created, navigate into the project directory using the terminal within Visual Studio IDE:


cd fincal-react-app

Enter the following command into the Visual Studio IDE terminal to open the IDE with the project name i.e fincal-react-app.


code .

Once inside the project directory,you can start the development server by running the following command:


npm start

The application will then be accessible in your browser at http://localhost:4300.

Integrate npm Package in React.js

To integrate npm packages into your React.js application, follow these steps:

Open Terminal

Open a new terminal within Visual Studio IDE.

Install the Package

Navigate to your project directory in the terminal and run the following command to install the package:


 npm install fincal-xx


yarn add fincal-xx

For Linux and macOS users, you might need to use sudo:


 sudo npm install fincal-xx


sudo yarn add fincal-xx

Minimal setup example

React.js bootstrap integration

This guide will walk you through the process of integrating Bootstrap into your React project and applying custom SCSS styles.

Install the Package

Navigate to your project directory in the terminal and run the following command to install the package:

Install bootstrap using npm:


  npm install bootstrap

This command installs Bootstrap and its dependencies into your project.

Open the index.js file in your React project and import the Bootstrap path:


 import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS file

After adding bootstrap, first thing you need to do is to import the LoanCalculator or BondCalculator into your App.js file and use the Loan Calculator logic in your App.js as follows:

/// ...

import React, { useState, useRef, useEffect } from "react";
import { LoanCalculator, Payment } from "fincal-xx";

import "./index.css"; // Import your SCSS file here

const AppComponent = () => {
  const [paymentCycle, setPaymentCycle] = useState([]);

  const [formData, setFormData] = useState({
    principal: "",
    interest: "",
    years: "",
  });

  const calculatorForm = useRef(null);

  useEffect(() => {
    checkValidity();
  }, [formData]);

  const checkValidity = () => {
    if (calculatorForm.current && calculatorForm.current.checkValidity()) {
      calculateLoan();
    }
  };

  const getPaymentValues = (object) => {
    return object ? Object.values(object) : [];
  };

  const calculateLoan = () => {
    const { principal, interest, years } = formData;

    try {
      const paymentCycle = new LoanCalculator(
        principal,
        interest,
        years
      ).calculatePaymentBreakdown(); /* Replace this with your calculation logic */
      setPaymentCycle(paymentCycle);
    } catch (error) {
      console.error("Error calculating payment breakdown:", error);
    }
  };

  return (
    <section>
      <div className="container mt-5 d-flex-column">
        <div className="d-flex justify-content-center p-3">
          <h4 style={{ letterSpacing: "0.12rem" }}>LOAN CALCULATOR</h4>
        </div>

        <div className="card p-3">
          <div className="calculator-container">
            <div className="form-container">
              <form ref={calculatorForm}>
                <div className="row">
                  <div className="col-12 mb-3">
                    <label htmlFor="principal" className="form-label">
                      Amount
                    </label>
                    <input
                      type="number"
                      id="principal"
                      name="principal"
                      value={formData.principal}
                      onChange={(e) =>
                        setFormData({ ...formData, principal: e.target.value })
                      }
                      className="form-control"
                      required
                    />
                  </div>
                  <div className="col-12 mb-3 position-relative">
                    <label htmlFor="interest" className="form-label">
                      Interest
                    </label>
                    <div className="input-container">
                      <input
                        type="number"
                        id="interest"
                        name="interest"
                        value={formData.interest}
                        onChange={(e) =>
                          setFormData({ ...formData, interest: e.target.value })
                        }
                        className="form-control"
                        required
                      />
                      <div className="float-right">%</div>
                    </div>
                  </div>

                  <div className="col-12 mb-3">
                    <label htmlFor="years" className="form-label">
                      Years
                    </label>
                    <input
                      type="number"
                      id="years"
                      name="years"
                      value={formData.years}
                      onChange={(e) =>
                        setFormData({ ...formData, years: e.target.value })
                      }
                      className="form-control"
                      required
                    />
                  </div>
                </div>
              </form>
            </div>
            <div className="vertical-bar"></div>
            <div className="table-container">
              <table>
                <thead>
                  <tr className="text-left">
                    <th>#</th>
                    <th>Principal</th>
                    <th>Interest</th>
                    <th>Balance</th>
                  </tr>
                </thead>
                <tbody>
                  {paymentCycle.map((payment, index) => (
                    <tr key={index} className="text-left">
                      <td>{index + 1}</td>
                      {getPaymentValues(payment).map((value, i) => (
                        <td key={i}>{value.toFixed(2)}</td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AppComponent;

/// ...

Apply styles

Copy the following CSS code into your index.css file:

body {
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: linear-gradient(to right, white, #e0d9d9) !important;
}

.card {
  border: none;
}

.float-right {
  float: right;
}

.d-flex-column {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.calculator-container {
  display: grid;
  grid-template-columns: 1fr auto 2fr;
  gap: 2rem;
}

@media (min-width: 608px) and (max-width: 770px) {
  .calculator-container {
    grid-template-columns: 1fr;
  }
}

label {
  font-size: 1rem;
  letter-spacing: 0.05rem;
}

.vertical-bar {
  border-right: 2px solid #eee; /* or any other color */
}

.table-container {
  max-height: 300px;
  overflow-y: auto;
}

.table-container table {
  width: 100%;
}

.table-container::-webkit-scrollbar {
  width: 0.15rem;
}

.table-container::-webkit-scrollbar-thumb {
  background-color: #9d9999; /* Neutral gray color for the scrollbar handle */
  border-radius: 6px;
}

.table-container::-webkit-scrollbar-track {
  background-color: #f0f0f0; /* Light gray color for the scrollbar track */
}

thead {
  position: sticky;
  top: -2px;
  background: linear-gradient(to right, white, #f1f0f0, white);
  height: 3.25rem;
  border-radius: 1rem;
  z-index: 1;
}

thead th {
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  height: 20px;
  width: 9.375rem;
  text-transform: capitalize;
}

td {
  font-size: 0.8rem;
}

You may consider adding custom styling to the table to improve its appearance and readability using CSS or a CSS framework.

After saving the file, your React.js application will display the payment breakdown in a table format.

How to use fincal-xx npm package in React Native for mobile application development?

Minimal setup example

Open the Online Emulator URL

Open a web browser and paste the provided online emulator URL into the address bar. This will load the online emulator environment as an Android device selected.

Online Emulator URL

Add fincal-xx npm package**

To add the npm package "fincal-xx": "1.0.22" to your package.json file in an online emulator environment, you would typically follow these steps:

Open package.json file.
Find the "dependencies" section.
Add the fincal-xx package with its version number "1.0.22" as follow:

"fincal-xx": "1.0.22",

Here's an example of what your package.json might look like after adding the package:


 "dependencies": {
    "fincal-xx": "1.0.22",
    "@expo/vector-icons": "^14.0.0",
    "react-native-paper": "2.16.0"
  }

Copy and save the code

Once the Android device is selected in the online emulator, copy the Loan Calculator logic into the App.js file as follows:


/// ...

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, TextInput, ScrollView, StyleSheet } from 'react-native';
import { LoanCalculator } from 'fincal-xx';

const AppComponent = () => {
  const [formData, setFormData] = useState({
    principal: '',
    interest: '',
    years: '',
  });
  const [paymentCycle, setPaymentCycle] = useState([]);
  const calculatorForm = useRef(null);

  useEffect(() => {
    checkValidity();
  }, [formData]);

  const checkValidity = () => {
    const isValid = Object.values(formData).every(
      (value) => value.trim() !== ''
    );
    if (isValid) {
      calculateLoan();
    }
  };

  const getPaymentValues = (object) => {
    return object ? Object.values(object) : [];
  };

  const calculateLoan = () => {
    const { principal, interest, years } = formData;

    try {
      const paymentCycle = new LoanCalculator(
        principal,
        interest,
        years
      ).calculatePaymentBreakdown();
      setPaymentCycle(paymentCycle);
    } catch (error) {
      console.error('Error calculating payment breakdown:', error);
    }
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <View style={styles.innerContainer}>
        <Text style={styles.heading}>LOAN CALCULATOR</Text>
        <View style={styles.card}>
          <View style={styles.calculatorContainer}>
            <View style={styles.formContainer}>
              <TextInput
                style={styles.input}
                placeholder="Amount"
                value={formData.principal}
                onChangeText={(value) =>
                  setFormData({ ...formData, principal: value })
                }
                keyboardType="numeric"
              />
              <View style={styles.inputContainer}>
                <TextInput
                  style={styles.input}
                  placeholder="Interest"
                  value={formData.interest}
                  onChangeText={(value) =>
                    setFormData({ ...formData, interest: value })
                  }
                  keyboardType="numeric"
                />
                <Text style={styles.unit}>%</Text>
              </View>
              <TextInput
                style={styles.input}
                placeholder="Years"
                value={formData.years}
                onChangeText={(value) =>
                  setFormData({ ...formData, years: value })
                }
                keyboardType="numeric"
              />
            </View>
            <View style={styles.verticalBar}></View>
            <View style={styles.tableContainer}>
              <ScrollView verticalBar>
                <View>
                  <View style={styles.table}>
                    <View style={styles.tableRow}>
                      <Text style={styles.columnHeader}>#</Text>
                      <Text style={styles.columnHeader}>Principal</Text>
                      <Text style={styles.columnHeader}>Interest</Text>
                      <Text style={styles.columnHeader}>Balance</Text>
                    </View>
                    {paymentCycle.map((payment, index) => (
                      <View key={index} style={styles.tableRow}>
                        <Text>{index + 1}</Text>
                        {getPaymentValues(payment).map((value, i) => (
                          <Text key={i}>{value.toFixed(2)}</Text>
                        ))}
                      </View>
                    ))}
                  </View>
                </View>
              </ScrollView>
            </View>
          </View>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    backgroundColor: '#e0d9d9',
    alignItems: 'center',
    justifyContent: 'start',
  },
  innerContainer: {
    width: '90%',
  },
  heading: {
    fontSize: 20,
    fontWeight: 'bold',
    letterSpacing: 0.12,
    textAlign: 'center',
    marginBottom: 10,
  },
  card: {
    borderWidth: 1,
    borderRadius: 10,
    borderColor: '#ddd',
    backgroundColor: '#fff',
    padding: 20,
  },
  calculatorContainer: {
    flexDirection: 'column',
    alignItems: '',
  },
  formContainer: {
    flex: 1,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 5,
    paddingVertical: 8,
    paddingHorizontal: 10,
    marginBottom: 10,
  },
  unit: {
    fontSize: 16,
    marginLeft: 5,
  },
  verticalBar: {
    borderBottomWidth: 2,
    borderBottomColor: '#eee',
    width: '100%',
    marginVertical: 20,
  },

  tableContainer: {
    maxHeight: 300,
    maxWidth: 300,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 5,
    overflow: 'hidden',
    marginTop: 10,
    padding:4,
  },
  table: {
    flexDirection: 'column',
    minWidth: '100%',
  },

  tableRow: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
    paddingVertical: 10,
    justifyContent: 'space-between', // Add this line
  },
  columnHeader: {
    fontSize: 16,
    fontWeight: 'bold',
    // flex: 1,
  },
});

export default AppComponent;


/// ...

View payment breakdown

After saving the data, the React Native application in the online emulator will display the payment breakdown in a table format.

Who do I talk to?

Repo owner or admin - Shirish Kalangi - [email protected]
Other community or team - [email protected]
www.mobilefirstfinance.com

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

README

Features of fincal-xx package

How run fincal-xx npm package ?

How to use fincal-xx npm package in an AngularJS project for web application development?

How to use fincal-xx npm package in ReactJS project for web application development?

How to use fincal-xx npm package in React Native for mobile application development?

Who do I talk to?