3 files changed, 31 insertions, 10 deletions
diff --git a/src/assets/images/mute.png b/src/assets/images/mute.png
new file mode 100644
index 00000000..b330e259
--- /dev/null
+++ b/src/assets/images/mute.png
diff --git a/src/assets/images/unmute.png b/src/assets/images/unmute.png
new file mode 100644
index 00000000..7fe1782d
--- /dev/null
+++ b/src/assets/images/unmute.png
diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
index 6b166b55..f2662b6a 100644
--- a/src/components/messages/ChannelPreview.tsx
+++ b/src/components/messages/ChannelPreview.tsx
@@ -41,6 +41,10 @@ const ChannelPreview: React.FC<
   const member = getMember(channel, state);
   const online = isOnline(member?.user?.last_active);
   const unread = channel.state.unreadCount > 0;
+  const isMuted = channel.muteStatus().muted;
+  const mutedImage = isMuted
+    ? require('../../assets/images/unmute.png')
+    : require('../../assets/images/mute.png');
 
   return (
     <Swipeable
@@ -49,15 +53,20 @@ const ChannelPreview: React.FC<
       renderRightActions={() => (
         <View style={styles.swipeableContainer}>
           <RectButton
-            style={styles.rightSwipeableButton}
+            style={styles.muteButton}
             onPress={() => {
-              channel.delete();
+              channel.mute();
+              console.log(channel.muteStatus());
             }}>
-            <Trash
-              width={normalize(25)}
-              height={normalize(25)}
-              color={'white'}
-            />
+            <Image source={mutedImage} style={styles.icon} />
+            <Text style={styles.actionText}>{isMuted ? 'Unmute' : 'Mute'}</Text>
+          </RectButton>
+          <RectButton
+            style={styles.deleteButton}
+            onPress={() => {
+              channel.hide();
+            }}>
+            <Trash style={styles.icon} color={'white'} />
             <Text style={styles.actionText}>Delete</Text>
           </RectButton>
         </View>
@@ -156,13 +165,21 @@ const styles = StyleSheet.create({
   swipeableContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: '#C42634',
+    flexDirection: 'row',
   },
-  rightSwipeableButton: {
+  muteButton: {
     width: 72,
-    height: 62,
+    height: '100%',
     justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: '#C4C4C4',
+  },
+  deleteButton: {
+    width: 72,
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#C42634',
   },
   actionText: {
     color: 'white',
@@ -172,6 +189,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: '5%',
     marginTop: '5%',
   },
+  icon: {
+    width: normalize(25),
+    height: normalize(25),
+  },
 });
 
 export default ChannelPreview;