xref: /expo/home/menu/DevMenuTaskInfo.tsx (revision dfd15ebd) 
1import { Row, View, Text, Divider, Spacer } from 'expo-dev-client-components';
2import React from 'react';
3import { Image, StyleSheet } from 'react-native';
4
5import DevIndicator from '../components/DevIndicator';
6import FriendlyUrls from '../legacy/FriendlyUrls';
7
8type Props = {
9  task: { [key: string]: any };
10};
11
12export function DevMenuTaskInfo({ task }: Props) {
13  const taskUrl = task.manifestUrl ? FriendlyUrls.toFriendlyString(task.manifestUrl) : '';
14  const manifest = task.manifestString && JSON.parse(task.manifestString);
15  const iconUrl = manifest && (manifest.iconUrl ?? manifest.extra?.expoClient?.iconUrl);
16  const taskName = manifest && (manifest.name ?? manifest.extra?.expoClient?.name);
17  const sdkVersion = manifest && (manifest.sdkVersion ?? manifest.extra?.expoClient?.sdkVersion);
18  const runtimeVersion = manifest && manifest.runtimeVersion;
19
20  const devServerName =
21    manifest && manifest.extra?.expoGo?.developer ? manifest.extra.expoGo.developer.tool : null;
22
23  return (
24    <View>
25      <Row bg="default" padding="medium">
26        {!manifest?.metadata?.branchName && iconUrl ? (
27          // EAS Updates don't have icons
28          <Image source={{ uri: iconUrl }} style={styles.taskIcon} />
29        ) : null}
30        <View flex="1" style={{ justifyContent: 'center' }}>
31          <Text type="InterBold" color="default" size="medium" numberOfLines={1}>
32            {taskName ? taskName : 'Untitled Experience'}
33          </Text>
34          {sdkVersion && (
35            <Text size="small" type="InterRegular" color="secondary">
36              SDK version:{' '}
37              <Text type="InterSemiBold" color="secondary" size="small">
38                {sdkVersion}
39              </Text>
40            </Text>
41          )}
42          {runtimeVersion && (
43            <Text size="small" type="InterRegular" color="secondary">
44              Runtime version:{' '}
45              <Text type="InterSemiBold" color="secondary" size="small">
46                {runtimeVersion}
47              </Text>
48            </Text>
49          )}
50        </View>
51      </Row>
52      <Divider />
53      <View bg="default" padding="medium">
54        <Text size="small" type="InterRegular">
55          {devServerName ? `Connected to ${devServerName}` : `Running from URL`}
56        </Text>
57        <Spacer.Vertical size="tiny" />
58        <Row align="center">
59          {devServerName ? (
60            <DevIndicator style={styles.taskDevServerIndicator} isActive isNetworkAvailable />
61          ) : null}
62          <Text type="InterRegular" size="medium" numberOfLines={1}>
63            {taskUrl}
64          </Text>
65        </Row>
66      </View>
67    </View>
68  );
69}
70
71const styles = StyleSheet.create({
72  taskIcon: {
73    width: 40,
74    height: 40,
75    marginRight: 8,
76    borderRadius: 8,
77    alignSelf: 'center',
78    backgroundColor: 'transparent',
79  },
80  taskDevServerIndicator: {
81    marginRight: 8,
82  },
83});
84