selecting topic to share on

app/mobile/src/session/sharing/sharingItem/SharingItem.jsx

@@ -0,0 +1,22 @@
+import { Text, View } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import { Logo } from 'utils/Logo';
+import { styles } from './SharingItem.styled';
+import Colors from 'constants/Colors';
+
+export function SharingItem({ item, selection, select }) {
+
+  const container = (selection?.cardId === item.cardId && selection?.channelId === item.channelId) ? styles.active : styles.container;
+
+  return (
+    <TouchableOpacity style={container} activeOpacity={1} onPress={() => select({ cardId: item.cardId, channelId: item.channelId })}>
+      <Logo src={item.logo} width={32} height={32} radius={3} />
+      <View style={styles.detail}>
+        <View style={styles.subject}>
+          <Text style={styles.subjectText} numberOfLines={1} ellipsizeMode={'tail'}>{ item.subject }</Text>
+        </View>
+        <Text style={styles.message} numberOfLines={1} ellipsizeMode={'tail'}>{ item.message }</Text>
+      </View>
+    </TouchableOpacity>
+  )
+}

app/mobile/src/session/sharing/sharingItem/SharingItem.styled.js

@@ -0,0 +1,51 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexShrink: 1,
+    flexDirection: 'row',
+    height: 48,
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderColor: Colors.itemDivider,
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  active: {
+    display: 'flex',
+    flexShrink: 1,
+    flexDirection: 'row',
+    height: 48,
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderColor: Colors.itemDivider,
+    paddingLeft: 16,
+    paddingRight: 16,
+    backgroundColor: Colors.background,
+  },
+  detail: {
+    paddingLeft: 12,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    flexShrink: 1,
+  },
+  subject: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexShrink: 1,
+  },
+  subjectIcon: {
+    paddingRight: 4,
+  },
+  subjectText: {
+    color: Colors.text,
+    fontSize: 14,
+  },
+  message: {
+    color: Colors.lightText,
+    fontSize: 12,
+  },
+})