xref: /expo/home/menu/DevMenuTaskInfo.tsx (revision bfa66871) 
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              Runtime version:{' '}
37              <Text type="InterSemiBold" color="secondary" size="small">
38                {runtimeVersion}
39              </Text>
40            </Text>
41          )}
42        </View>
43      </Row>
44      <Divider />
45      <View bg="default" padding="medium">
46        <Text size="small" type="InterRegular">
47          {devServerName ? `Connected to ${devServerName}` : `Running from URL`}
48        </Text>
49        <Spacer.Vertical size="tiny" />
50        <Row align="center">
51          {devServerName ? (
52            <DevIndicator style={styles.taskDevServerIndicator} isActive isNetworkAvailable />
53          ) : null}
54          <Text type="InterRegular" size="medium" numberOfLines={1}>
55            {taskUrl}
56          </Text>
57        </Row>
58      </View>
59    </View>
60  );
61}
62
63const styles = StyleSheet.create({
64  taskIcon: {
65    width: 40,
66    height: 40,
67    marginRight: 8,
68    borderRadius: 8,
69    alignSelf: 'center',
70    backgroundColor: 'transparent',
71  },
72  taskDevServerIndicator: {
73    marginRight: 8,
74  },
75});
76