sharing: Display file name under content preview.

This makes it more clear which preview belongs to which file.

Author: AkashDhiman

src/sharing/ShareToPm.js

@@ -1,6 +1,6 @@
 /* @flow strict-local */
 import React from 'react';
-import { View, Image, ScrollView, Modal, FlatList } from 'react-native';
+import { View, ImageBackground, ScrollView, Modal, FlatList, Text } from 'react-native';
 import type { RouteProp } from '../react-navigation';
 import type { SharingNavigationProp } from './SharingScreen';
 import * as NavigationService from '../nav/NavigationService';
@@ -55,6 +55,15 @@ const styles = createStyleSheet({
     borderColor: 'whitesmoke',
     padding: 5,
   },
+  previewText: {
+    color: 'white',
+    textAlign: 'center',
+    backgroundColor: '#000000a0',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
 });
 
 type Props = $ReadOnly<{|
@@ -157,7 +166,9 @@ class ShareToPm extends React.Component<Props, State> {
 
   renderItem = ({ item, index, separators }) =>
     item.type.startsWith('image') ? (
-      <Image source={{ uri: item.url }} style={styles.imagePreview} />
+      <ImageBackground source={{ uri: item.url }} style={styles.imagePreview}>
+        <Text style={styles.previewText}>{item.fileName}</Text>
+      </ImageBackground>
     ) : (
       <></>
     );

src/sharing/ShareToStream.js

@@ -1,6 +1,6 @@
 /* @flow strict-local */
 import React from 'react';
-import { View, Image, ScrollView, FlatList } from 'react-native';
+import { View, ImageBackground, ScrollView, FlatList, Text } from 'react-native';
 import type { SharingNavigationProp } from './SharingScreen';
 import type { RouteProp } from '../react-navigation';
 import * as NavigationService from '../nav/NavigationService';
@@ -40,6 +40,15 @@ const styles = createStyleSheet({
     flex: 1,
     margin: 8,
   },
+  previewText: {
+    color: 'white',
+    textAlign: 'center',
+    backgroundColor: '#000000a0',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
 });
 
 type Props = $ReadOnly<{|
@@ -158,7 +167,9 @@ class ShareToStream extends React.Component<Props, State> {
 
   renderItem = ({ item, index, separators }) =>
     item.type.startsWith('image') ? (
-      <Image source={{ uri: item.url }} style={styles.imagePreview} />
+      <ImageBackground source={{ uri: item.url }} style={styles.imagePreview}>
+        <Text style={styles.previewText}>{item.fileName}</Text>
+      </ImageBackground>
     ) : (
       <></>
     );