fix: convert all poll buttons to pressables

Author: isekovanic

package/src/components/Poll/CreatePollContent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { StyleSheet, Switch, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Pressable, StyleSheet, Switch, Text, TextInput, View } from 'react-native';
 
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSharedValue } from 'react-native-reanimated';
@@ -94,7 +94,7 @@ export const CreatePollContent = () => {
     <>
       <View style={[styles.headerContainer, { backgroundColor: white }, headerContainer]}>
         <PollModalHeader onPress={() => closePollCreationDialog?.()} title={t('Create Poll')} />
-        <TouchableOpacity
+        <Pressable
           disabled={!isPollValid}
           onPress={() => {
             const currentPollOptions = Object.assign({}, pollOptions);
@@ -120,15 +120,15 @@ export const CreatePollContent = () => {
                 : {}),
             });
           }}
-          style={[styles.sendButton, sendButton]}
+          style={({ pressed }) => [{ opacity: pressed ? 0.5 : 1 }, styles.sendButton, sendButton]}
         >
           <SendPoll
             height={24}
             pathFill={isPollValid ? '#005DFF' : '#B4BBBA'}
             viewBox='0 0 24 24'
             width={24}
           />
-        </TouchableOpacity>
+        </Pressable>
       </View>
       <ScrollView
         contentContainerStyle={{ paddingBottom: 70 }}

package/src/components/Poll/components/Button.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { Pressable, StyleSheet, Text } from 'react-native';
 
 import { Poll, PollOption } from 'stream-chat';
 
@@ -43,9 +43,12 @@ export const GenericPollButton = ({ onPress, title }: { onPress?: () => void; ti
   } = useTheme();
 
   return (
-    <TouchableOpacity onPress={onPress} style={[styles.container, container]}>
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [{ opacity: pressed ? 0.5 : 1 }, styles.container, container]}
+    >
       <Text style={[styles.text, { color: accent_dark_blue }, text]}>{title}</Text>
-    </TouchableOpacity>
+    </Pressable>
   );
 };
 
@@ -77,9 +80,10 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
 
   return (
     <>
-      <TouchableOpacity
+      <Pressable
         onPress={onPressHandler}
-        style={[
+        style={({ pressed }) => [
+          { opacity: pressed ? 0.5 : 1 },
           styles.answerListAddCommentContainer,
           { backgroundColor: bg_user },
           buttonContainer,
@@ -88,7 +92,7 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
         <Text style={[styles.text, { color: accent_dark_blue }, text]}>
           {ownAnswer ? t<string>('Update your comment') : t<string>('Add a comment')}
         </Text>
-      </TouchableOpacity>
+      </Pressable>
       {showAddCommentDialog ? (
         <PollInputDialog
           closeDialog={() => setShowAddCommentDialog(false)}
@@ -136,9 +140,10 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
   }, [message, onPress, poll, toggleVote]);
 
   return ownCapabilities.castPollVote && !isClosed ? (
-    <TouchableOpacity
+    <Pressable
       onPress={onPressHandler}
-      style={[
+      style={({ pressed }) => [
+        { opacity: pressed ? 0.5 : 1 },
         styles.voteContainer,
         {
           backgroundColor: ownVotesByOptionId[option.id]
@@ -152,7 +157,7 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
       ]}
     >
       {ownVotesByOptionId[option.id] ? <Check height={15} pathFill='white' width={20} /> : null}
-    </TouchableOpacity>
+    </Pressable>
   ) : null;
 };
 

package/src/components/Poll/components/CreatePollOptions.tsx

@@ -1,5 +1,5 @@
 import React, { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
-import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   interpolate,
@@ -294,7 +294,7 @@ export const CreatePollOptions = (props: {
           />
         ))}
       </View>
-      <TouchableOpacity
+      <Pressable
         onPress={() => {
           const newIndex = pollOptions.length;
           currentOptionPositions.value = {
@@ -312,12 +312,17 @@ export const CreatePollOptions = (props: {
           };
           setPollOptions([...pollOptions, { text: '' }]);
         }}
-        style={[styles.addOptionWrapper, { backgroundColor: bg_user }, addOption.wrapper]}
+        style={({ pressed }) => [
+          { opacity: pressed ? 0.5 : 1 },
+          styles.addOptionWrapper,
+          { backgroundColor: bg_user },
+          addOption.wrapper,
+        ]}
       >
         <Text style={[styles.text, { color: black }, addOption.text]}>
           {t<string>('Add an option')}
         </Text>
-      </TouchableOpacity>
+      </Pressable>
     </View>
   );
 };

package/src/components/Poll/components/PollInputDialog.tsx

@@ -3,10 +3,10 @@ import {
   KeyboardAvoidingView,
   Modal,
   Platform,
+  Pressable,
   StyleSheet,
   Text,
   TextInput,
-  TouchableOpacity,
   View,
 } from 'react-native';
 
@@ -62,22 +62,25 @@ export const PollInputDialog = ({
             value={dialogInput}
           />
           <View style={[styles.buttonContainer, buttonContainer]}>
-            <TouchableOpacity onPress={closeDialog}>
+            <Pressable
+              onPress={closeDialog}
+              style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
+            >
               <Text style={[styles.button, { color: accent_dark_blue }, button]}>
                 {t<string>('Cancel')}
               </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
+            </Pressable>
+            <Pressable
               onPress={() => {
                 onSubmit(dialogInput);
                 closeDialog();
               }}
-              style={{ marginLeft: 32 }}
+              style={({ pressed }) => ({ marginLeft: 32, opacity: pressed ? 0.5 : 1 })}
             >
               <Text style={[styles.button, { color: accent_dark_blue }, button]}>
                 {t<string>('SEND')}
               </Text>
-            </TouchableOpacity>
+            </Pressable>
           </View>
         </View>
       </KeyboardAvoidingView>

package/src/components/Poll/components/PollModalHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts';
 import { Back } from '../../../icons';
@@ -21,9 +21,9 @@ export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
 
   return (
     <View style={[styles.container, { backgroundColor: white }, container]}>
-      <TouchableOpacity onPress={onPress}>
+      <Pressable onPress={onPress} style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}>
         <Back height={24} pathFill={text_high_emphasis} viewBox='0 0 24 24' width={24} />
-      </TouchableOpacity>
+      </Pressable>
       <Text numberOfLines={1} style={[styles.title, { color: black }, titleStyle]}>
         {title}
       </Text>