React Native Typescript with a Firebase Real Time Database
React Native with Typescript
- Use Navigation: Useing Stack/Tab for navigation, also used route params to pass user id to view the other users profile page
- Firebase: Using shapshot for real time refreshing and storing the
- Flatlist: Used to render only a few watches at a time, Also used for some filter buttons
Exop as a Development SDK to simulate and compile the code into both IOS and Android I also used X-code to runt eh IOS simulation compiled by Expo.
Building this project was fairly tough as it took a littel time to figure out which packages work with the tech stach. Typescript seems to be a fairly finiky to set up with React native as there are a few non compatibale parts like buttons being passing in as a component.
node_modules/@firebase/auth/dist/rn/index.js lines 155, 164, 173 uncomment lines to add persistance.
const forWatches = async () => {
const finList: { id: number; name: any; color: string; }[] = []
let count = 0
watchNamesList.forEach((item: any) => {
finList.push({
"id": count,
'name': item,
'color': 'orange'
})
count += 1
})
console.log(JSON.stringify(finList))
}
const forYear = async () => {
const finList: { id: number; year: number; }[] = []
let count = 1900
let setyear = 1900
if (count < 2022)
watchNamesList.forEach((item: any) => {
finList.push({
id: count,
name: String(setyear)
})
count += 1
setyear += 1
})
console.log(JSON.stringify(finList))
}
const forYear = async () => {
const finList: { id: number; name: string; }[] = []
let count = 1900
let setyear = 1900
if (count < 2023)
WatchList.forEach((item: any) => {
finList.push({
id: count,
name: String(setyear)
})
count += 1
setyear += 1
})
console.log(JSON.stringify(finList))
}