59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import React, {useEffect, useLayoutEffect} from 'react'
|
|
import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
|
|
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
|
|
import {Shell} from '../../shell'
|
|
import {Feed} from '../../com/feed/Feed'
|
|
import type {RootTabsScreenProps} from '../../routes/types'
|
|
import {useStores} from '../../../state'
|
|
import {AVIS} from '../../lib/assets'
|
|
|
|
export function Home({navigation}: RootTabsScreenProps<'HomeTab'>) {
|
|
const store = useStores()
|
|
useEffect(() => {
|
|
console.log('Fetching home feed')
|
|
store.homeFeed.setup()
|
|
}, [store.homeFeed])
|
|
|
|
const onNavigateContent = (screen: string, props: Record<string, string>) => {
|
|
// @ts-ignore it's up to the callers to supply correct params -prf
|
|
navigation.navigate(screen, props)
|
|
}
|
|
|
|
useLayoutEffect(() => {
|
|
navigation.setOptions({
|
|
headerShown: true,
|
|
headerTitle: 'V I B E',
|
|
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 (
|
|
<Shell>
|
|
<View>
|
|
<Feed feed={store.homeFeed} onNavigateContent={onNavigateContent} />
|
|
</View>
|
|
</Shell>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
avi: {
|
|
width: 20,
|
|
height: 20,
|
|
borderRadius: 10,
|
|
resizeMode: 'cover',
|
|
},
|
|
})
|