https://github.com/arojunior/sample-react-native-expo

Sample React Native expo application
https://github.com/arojunior/sample-react-native-expo

expo react react-native

Last synced: 29 days ago
JSON representation

Sample React Native expo application

• Host: GitHub
• URL: https://github.com/arojunior/sample-react-native-expo
• Owner: arojunior
• Created: 2019-04-29T23:34:48.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T09:44:42.000Z (almost 2 years ago)
• Last Synced: 2024-10-28T16:51:59.741Z (3 months ago)
• Topics: expo, react, react-native
• Language: JavaScript
• Homepage:
• Size: 1.46 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Sample React Native expo application

## Goals

You were assigned to implement

the following flows:

1. Display the list of transactions

1. Display details of a specific transaction

1. Change the category of a transaction

The application should use the operating system default font. The icon assets

are on `src/icons` directory. If you're using this repo, you can directly

import the SVG file.

Your coworkers created a mock data client to allow for the development of

suchs screens while they implement the real server communications. You need

to use the mock client for fetching data so migrating in the future is easy.

Import it from `src/data` if you are using this repo, or copy `lib/` directory

(and import it) if you are going with your own setup.

The mock client exposes the following interface:

```tsx

export default class Client {

  fetchTransactions(): Promise;

  

  fetchUserCategories(): Promise;

  

  fetchTransaction(id: string): Promise;

  fetchUserCategory(id: string): Promise;

  updateTransactionUserCategory(transactionId: string, userCategoryId: string): Promise;

}

export interface Transaction {

  id: string;

  amount: number;

  purchaseTime: string;

  card: Card;

  merchant: Merchant;

  integration: Integration;

  __typename: "Transaction";

}

export interface Card {

  id: string;

  user: string;

  __typename: "Card";

}

export interface Merchant {

  id: string;

  name: "Docusign";

  merchantCategory: MerchantCategory;

  __typename: "Merchant";

  website: string;

}

export interface MerchantCategory {

  id: string;

  name: string;

  __typename: "MerchantCategory";

}

export interface Integration {

  id: string;

  name: string;

  category: UserCategory | null;

}

export interface UserCategory {

  id: string;

  name: string;

  __typename: "UserCategory";

}

```

### Milestone One

- Bootstrap the React Native project in a new Git repo.

- Fetch the list of transactions and categories from the mock data client.

- Print the results of the data fetching using `console.log`.

### Milestone Two

- Create the components needed for the transactions list screen.

- Populate the transactions list on the screen.

### Milestone Three

- Create the components needed for the transaction details screen.

- Populate the transaction data on the screen.

### Milestone Four

- Create the components needed for the category selection screen.

- Populate the categories data on the screen.

### Milestone Five

- Link the touch on a transaction to the details screen.

### Milestone Six

- Link the touch on the "QuickBooks Category" to category selection screen.

### Milestone Seven

- Link the touch on the category to update a transaction category.