New navigation model (#1)

* Flatten all routing into a single stack

* Replace router with custom implementation

* Add shell header and titles

* Add tab selector

* Add back/forward history menus on longpress

* Fix: don't modify state during render

* Add refresh() to navigation and reroute navigations to the current location to refresh instead of add to history

* Cache screens during navigation to maintain scroll position and improve load-time for renders
This commit is contained in:
Paul Frazee 2022-08-31 14:36:50 -05:00 committed by GitHub
parent d1470bad66
commit 97f52b6a03
57 changed files with 1382 additions and 1159 deletions

View file

@ -0,0 +1,65 @@
import React, {useState, useEffect, useLayoutEffect} from 'react'
import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Feed} from '../com/notifications/Feed'
import {useStores} from '../../state'
import {AVIS} from '../lib/assets'
import {ScreenParams} from '../routes'
import {useLoadEffect} from '../lib/navigation'
export const Notifications = ({params}: ScreenParams) => {
const [hasSetup, setHasSetup] = useState<boolean>(false)
const store = useStores()
useLoadEffect(() => {
store.nav.setTitle('Notifications')
console.log('Fetching notifications feed')
store.notesFeed.setup().then(() => setHasSetup(true))
}, [store.notesFeed])
// TODO
// useEffect(() => {
// return navigation.addListener('focus', () => {
// if (hasSetup) {
// console.log('Updating notifications feed')
// store.notesFeed.update()
// }
// })
// }, [navigation, store.notesFeed, hasSetup])
// TODO
// useLayoutEffect(() => {
// navigation.setOptions({
// headerShown: true,
// headerTitle: 'Notifications',
// headerLeft: () => (
// <TouchableOpacity
// onPress={() => navigation.push('Profile', {name: 'alice.com'})}>
// <Image source={AVIS['alice.com']} style={styles.avi} />
// </TouchableOpacity>
// ),
// headerRight: () => (
// <TouchableOpacity
// onPress={() => {
// navigation.push('Composer', {})
// }}>
// <FontAwesomeIcon icon="plus" style={{color: '#006bf7'}} />
// </TouchableOpacity>
// ),
// })
// }, [navigation])
return (
<View>
<Feed view={store.notesFeed} />
</View>
)
}
const styles = StyleSheet.create({
avi: {
width: 20,
height: 20,
borderRadius: 10,
resizeMode: 'cover',
},
})