dappconnect-sdks/apps/mobile/App.tsx

124 lines
4.3 KiB
TypeScript

// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable import/namespace */
import 'expo-dev-client'
import { useMemo, useState } from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { Heading } from '@status-im/components'
import { Avatar } from '@status-im/components/src/avatar'
import { Stack as View, TamaguiProvider } from '@tamagui/core'
import { useFonts } from 'expo-font'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { AnimatePresence } from 'tamagui'
import { NavigationProvider } from './navigation/provider'
import { ChannelScreen } from './screens/channel'
import { HomeScreen } from './screens/home'
import tamaguiConfig from './tamagui.config'
const Stack = createNativeStackNavigator()
export default function App() {
const [position, setPosition] = useState(0)
const [loaded] = useFonts({
Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
// Tamagui does this for you on web, but you need to do it manually on native. Only for the demo. We should seek a better solution.
UbuntuMono: require('./assets/fonts/UbuntuMono.ttf'),
})
const onScroll = event => {
if (event.nativeEvent.contentOffset.y > 90) {
setPosition(event.nativeEvent.contentOffset.y)
} else {
setPosition(0)
}
}
const showMinimizedHeader = useMemo(() => {
return position > 90
}, [position])
if (!loaded) {
return null
}
return (
<TamaguiProvider config={tamaguiConfig} defaultTheme="light">
<NavigationProvider>
<SafeAreaProvider>
<Stack.Navigator>
<Stack.Screen
name="Home"
options={{
headerBlurEffect: 'systemUltraThinMaterialLight',
headerTransparent: true,
headerShadowVisible: true,
header: () => (
<View
height={100}
animation="fast"
backgroundColor={
showMinimizedHeader ? '$background' : 'transparent'
}
padding={16}
paddingTop={48}
flexDirection="row"
justifyContent="space-between"
alignItems="center"
>
<AnimatePresence>
{showMinimizedHeader && (
<View
key="header"
animation={[
'fast',
{
opacity: {
overshootClamping: true,
},
},
]}
enterStyle={{ opacity: 0 }}
exitStyle={{ opacity: 0 }}
opacity={1}
flexDirection="row"
alignItems="center"
justifyContent="space-between"
width="100%"
>
<Heading color="$textPrimary">Rarible</Heading>
<Avatar
withOutline
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.seadn.io%2Fgae%2FFG0QJ00fN3c_FWuPeUr9-T__iQl63j9hn5d6svW8UqOmia5zp3lKHPkJuHcvhZ0f_Pd6P2COo9tt9zVUvdPxG_9BBw%3Fw%3D500%26auto%3Dformat&f=1&nofb=1&ipt=c177cd71d8d0114080cfc6efd3f9e098ddaeb1b347919bd3089bf0aacb003b3e&ipo=images"
size={48}
/>
</View>
)}
</AnimatePresence>
</View>
),
}}
>
{props => (
<HomeScreen
{...props}
onScroll={onScroll}
isMinimized={showMinimizedHeader}
/>
)}
</Stack.Screen>
<Stack.Screen
name="Channel"
component={ChannelScreen}
options={{ title: 'Messages' }}
/>
</Stack.Navigator>
</SafeAreaProvider>
</NavigationProvider>
</TamaguiProvider>
)
}