1import {
2  Button,
3  Image,
4  Heading,
5  Text,
6  Divider,
7  Row,
8  Spacer,
9  View,
10  UserIcon,
11} from 'expo-dev-client-components';
12import * as React from 'react';
13
14import { SafeAreaTop } from '../components/SafeAreaTop';
15import { useBuildInfo } from '../providers/BuildInfoProvider';
16import { useUser } from '../providers/UserContextProvider';
17
18export function AppHeader({ navigation }) {
19  const buildInfo = useBuildInfo();
20  const { appName, appIcon } = buildInfo;
21
22  const { userData, selectedAccount } = useUser();
23
24  const onUserProfilePress = () => {
25    navigation.navigate('User Profile');
26  };
27
28  const isAuthenticated = userData != null;
29  const selectedUserImage = selectedAccount?.owner?.profilePhoto;
30
31  return (
32    <View bg="default">
33      <SafeAreaTop />
34      <Row align="center" pb="small">
35        <Spacer.Horizontal size="medium" />
36        <View flex="1" shrink="1">
37          <Row align="center">
38            {Boolean(appIcon) && (
39              <>
40                <Image size="xl" rounded="large" source={{ uri: appIcon }} />
41                <Spacer.Horizontal size="small" />
42              </>
43            )}
44
45            <View flex="1">
46              <Heading weight="semibold" numberOfLines={1}>
47                {appName}
48              </Heading>
49              <Text size="small" color="secondary">
50                Development Build
51              </Text>
52            </View>
53          </Row>
54        </View>
55
56        <View>
57          <Button.ScaleOnPressContainer
58            onPress={onUserProfilePress}
59            minScale={0.85}
60            accessibilityLabel="Navigate to User Profile"
61            bg="ghost"
62            rounded="full">
63            <View>
64              {isAuthenticated ? (
65                <View rounded="full" padding="small">
66                  <Image size="xl" rounded="full" source={{ uri: selectedUserImage }} />
67                </View>
68              ) : (
69                <View mx="small">
70                  <View bg="default" rounded="full" padding="tiny">
71                    <UserIcon />
72                  </View>
73                </View>
74              )}
75            </View>
76          </Button.ScaleOnPressContainer>
77        </View>
78      </Row>
79
80      <Divider weight="thin" />
81    </View>
82  );
83}
84