Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/akunna1/faithify-react-native-app

Faithify React Native Mobile App
https://github.com/akunna1/faithify-react-native-app

expo json mobile-app react-native-app typescript

Last synced: 6 days ago
JSON representation

Faithify React Native Mobile App

Awesome Lists containing this project

README 

        
#### Setup

- https://docs.expo.dev/

- npx create-expo-app@latest (main terminal, cd to folder)

- npx expo start --ios



#### Firebase Setup

- npm install firebase



#### Useful video for setup

- https://www.youtube.com/watch?v=y6DwGxe2E_k



#### Design Features

- Accent color: white 

- Color for buttons: #132235



#### Web Equivalents

- Expo ~ Vite.js and React.js

- Native Wind ~ Tailwind CSS



#### Structure

- app Folder: Contains the main app structure. The index.tsx file here serves as the entry point, similar to index.js in a JavaScript setup. This file typically sets up the app's root component and navigation

-  app --> (tabs) --> index.tsx: entry point/ home screen

-  app --> (tabs) --> _layout.tsx: Configures tab navigation and screen options

  

- assets Folder: Stores static resources like images, fonts, and other media files

- components Folder: Contains reusable React components used throughout the app e.g buttons, etc

- constants Folder: Holds constant values and configuration settings used in the app

- hooks Folder: Contains custom hooks for reusable logic

- node_modules Folder: Contains all the installed npm packages

- scripts Folder: May include custom scripts for tasks like building or deploying the app

- app.json: Configuration file for your app, including settings for Expo or React Native CLI

- babel.config.js: Configuration file for Babel, used to transpile your code

- tsconfig.json: TypeScript configuration file that defines how TypeScript should compile your code



#### Where to get icons

- https://fontawesome.com/icons

- https://evil-icons.io/

- https://ionic.io/ionicons

- https://www.textsymbols.ne



#### Font Weight Values

- 100: Thin (Hairline)

- 200: Extra Light (Ultra Light)

- 300: Light

- 400: Normal (Regular)

- 500: Medium

- 600: Semi Bold (Semi Bold)

- 700: Bold

- 800: Extra Bold (Heavy)

- 900: Black (Ultra Bold)



#### Firebase Setup

- configure firebase first (set up project in firebase)

- npm install firebase

- register app as web app

- copy code for config file, create config.tsx file and paste it there

- firestore setup- addDoc, getFirestore, collection, getDocs, deleteDoc,  Timestamp, query, orderBy, onSnapshot

- each collection has number (unique), location, theme, verse



#### Firestore Functions

- collection: retrieves a reference to a specific collection in Firestore, where documents are stored



- addDoc: adds a new document to a specified collection, allowing one to store data in Firestore



- Timestamp: a utility that represents a point in time, often used to record when a document was created or updated



- query: creates a query object that can be used to filter documents from a collection based on specific criteria



- where: adds a condition to a query, allowing one to filter documents based on specific field values



- getDocs: retrieves the documents that match a given query, returning the results for further processing



- deleteDoc: removes the current verse from a collection



##### Verses

- Total: 328 verses

- Grace- 58 verses, Love- 64 verses, Hope- 59 verses, Résilience- 68 verses, Faith-  80 verses