implementing progress bar

src/components/atoms/index.ts

@@ -1 +1,2 @@
 export * from './optionsModal';
+export * from './progressBar'

src/components/atoms/progressBar/container/progressBar.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { View } from "react-native"
+
+
+
+
+export const ProgressBar = ({
+    progress
+}) => {
+
+    return (
+        <View style={{height:16, flex:1, flexDirection:'row', color:'green'}}>
+            <View style={{flex:progress, color:'blue'}} />
+
+            <View style={{flex:100 - progress}} />
+        </View>
+    )
+}

src/components/atoms/progressBar/index.ts

@@ -0,0 +1 @@
+export * from './container/progressBar';

src/components/uploadsGalleryModal/uploadsGalleryModal.tsx

@@ -93,7 +93,7 @@ export const UploadsGalleryModal = forwardRef(({
             await _getMediaUploads();
             setIndices(new Map());
             setIsLoading(false);
-        } catch(err){
+        } catch (err) {
             console.warn("failed to remove image from gallery", err)
             setIsLoading(false);
         }
@@ -102,23 +102,23 @@ export const UploadsGalleryModal = forwardRef(({
 
     //fetch images from server
     const _getMediaUploads = async () => {
-        try{
+        try {
             if (username) {
                 setIsLoading(true);
-                console.log("getting images for: " + username )
+                console.log("getting images for: " + username)
                 const images = await getImages()
                 console.log("images received", images)
                 setMediaUploads(images);
                 setIsLoading(false);
             }
-        }catch(err){
+        } catch (err) {
             console.warn("Failed to get images")
             setIsLoading(false);
         }
     }
 
     //inserts media items in post body
-    const _insertMedia = async (selectedIndex?:number) => {
+    const _insertMedia = async (selectedIndex?: number) => {
         const map = selectedIndex > -1 ? new Map([[selectedIndex, true]]) : indices;
 
         const data = []
@@ -127,8 +127,8 @@ export const UploadsGalleryModal = forwardRef(({
             const item = mediaUploads[index]
 
             data.push({
-                 url:item.url,
+                url: item.url,
-                 hash:item.url.split('/').pop()
+                hash: item.url.split('/').pop()
             })
 
         }
@@ -139,7 +139,7 @@ export const UploadsGalleryModal = forwardRef(({
     //renders footer with add snipept button and shows new snippet modal
     const _renderFloatingPanel = () => {
 
-            if(!indices.size){
+        if (!indices.size) {
             return null
         }
 
@@ -148,14 +148,14 @@ export const UploadsGalleryModal = forwardRef(({
                 _deleteMedia()
             }
             Alert.alert(
-                    intl.formatMessage({id:'alert.delete'}),
+                intl.formatMessage({ id: 'alert.delete' }),
-                    intl.formatMessage({id:'alert.remove_alert'}),
+                intl.formatMessage({ id: 'alert.remove_alert' }),
                 [{
-                        text:intl.formatMessage({id:'alert.cancel'}),
+                    text: intl.formatMessage({ id: 'alert.cancel' }),
-                        style:'cancel'
+                    style: 'cancel'
-                    },{
+                }, {
-                        text:intl.formatMessage({id:'alert.confirm'}),
+                    text: intl.formatMessage({ id: 'alert.confirm' }),
-                        onPress:_onConfirm
+                    onPress: _onConfirm
                 }]
             )
 
@@ -171,7 +171,7 @@ export const UploadsGalleryModal = forwardRef(({
                     })}
                 />
                 <MainButton
-                            style={{ width: 136, marginLeft:12}}
+                    style={{ width: 136, marginLeft: 12 }}
                     onPress={_insertMedia}
                     iconName="plus"
                     iconType="MaterialCommunityIcons"
@@ -187,13 +187,13 @@ export const UploadsGalleryModal = forwardRef(({
 
 
     //render list item for snippet and handle actions;
-  const _renderItem = ({ item, index }:{item:UploadedMedia, index:number}) => {
+    const _renderItem = ({ item, index }: { item: UploadedMedia, index: number }) => {
 
         const _onCheckPress = () => {
             //update selection indices
-        if(indices.has(index)){
+            if (indices.has(index)) {
                 indices.delete(index);
-        }else {
+            } else {
                 indices.set(index, true);
             }
 
@@ -202,9 +202,9 @@ export const UploadsGalleryModal = forwardRef(({
 
         const _onPress = () => {
 
-        if(indices.size){
+            if (indices.size) {
                 _onCheckPress()
-        }else {
+            } else {
                 _insertMedia(index)
             }
         }
@@ -214,7 +214,7 @@ export const UploadsGalleryModal = forwardRef(({
         return (
             <TouchableOpacity onPress={_onPress} onLongPress={_onCheckPress}>
                 <FastImage
-            source={{uri:thumbUrl}}
+                    source={{ uri: thumbUrl }}
                     style={styles.mediaItem}
                 />
                 <View style={styles.checkContainer}>
@@ -234,18 +234,29 @@ export const UploadsGalleryModal = forwardRef(({
     const _renderEmptyContent = () => {
         return (
             <>
-            <Text style={styles.title}>{intl.formatMessage({id:'uploads_modal.label_no_images'})}</Text>
+                <Text style={styles.title}>{intl.formatMessage({ id: 'uploads_modal.label_no_images' })}</Text>
             </>
         );
     };
 
 
+    const _renderUploadProgress = () => {
+        return (
+            <View>
+
+            </View>
+        )
+    }
+
+
 
 
 
     const _renderContent = (
         <View style={styles.container}>
             <View style={styles.bodyWrapper}>
+                {true && <ProgressBar progress={30} />}
+                
                 <FlatList
                     data={mediaUploads}
                     keyExtractor={(item) => `item_${item.url}`}
@@ -256,7 +267,7 @@ export const UploadsGalleryModal = forwardRef(({
                     numColumns={2}
                     refreshControl={
                         <RefreshControl
-                        refreshing={isLoading}
+                            refreshing={isLoading || isUploading}
                             onRefresh={_getMediaUploads}
                         />
                     }
@@ -275,7 +286,7 @@ export const UploadsGalleryModal = forwardRef(({
             isCloseButton
             presentationStyle="formSheet"
             title={intl.formatMessage({
-            id:'uploads_modal.title'
+                id: 'uploads_modal.title'
             })}
             animationType="slide"
             style={styles.modalStyle}