xref: /expo/home/menu/DevMenuTaskInfo.tsx (revision 6f07fc9e)
1import { Row, View, Text } from 'expo-dev-client-components';
2import React from 'react';
3import { Image, StyleSheet } from 'react-native';
4
5type Props = {
6  task: { [key: string]: any };
7};
8
9export function DevMenuTaskInfo({ task }: Props) {
10  const manifest = task.manifestString && JSON.parse(task.manifestString);
11  const iconUrl = manifest && (manifest.iconUrl ?? manifest.extra?.expoClient?.iconUrl);
12  const taskName = manifest && (manifest.name ?? manifest.extra?.expoClient?.name);
13  const sdkVersion = manifest && (manifest.sdkVersion ?? manifest.extra?.expoClient?.sdkVersion);
14  const runtimeVersion = manifest && manifest.runtimeVersion;
15
16  return (
17    <View>
18      <Row bg="default" padding="medium">
19        {!manifest?.metadata?.branchName && iconUrl ? (
20          // EAS Updates don't have icons
21          <Image source={{ uri: iconUrl }} style={styles.taskIcon} />
22        ) : null}
23        <View flex="1" style={{ justifyContent: 'center' }}>
24          <Text type="InterBold" color="default" size="medium" numberOfLines={1}>
25            {taskName ? taskName : 'Untitled Experience'}
26          </Text>
27          {sdkVersion && (
28            <Text size="small" type="InterRegular" color="secondary">
29              SDK version:{' '}
30              <Text type="InterSemiBold" color="secondary" size="small">
31                {sdkVersion}
32              </Text>
33            </Text>
34          )}
35          {runtimeVersion && (
36            <Text size="small" type="InterRegular" color="secondary">
37              Runtime version:{' '}
38              <Text type="InterSemiBold" color="secondary" size="small">
39                {runtimeVersion}
40              </Text>
41            </Text>
42          )}
43        </View>
44      </Row>
45    </View>
46  );
47}
48
49const styles = StyleSheet.create({
50  taskIcon: {
51    width: 40,
52    height: 40,
53    marginRight: 8,
54    borderRadius: 8,
55    alignSelf: 'center',
56    backgroundColor: 'transparent',
57  },
58});
59