fix: broken poll vote casting with react compiler (#3308)

## 🎯 Goal

This PR fixes an issue of poll votes not being casted correctly while
using `React` compiler. This is because the compiler itself optimizes
away truthy objects within actual `JSX`/`TSX` differently. Whenever
using object accessors directly within a `JSX`/`TSX` closure, the data
flow of the compiled code gets confused due to the inability to
determine the truthfulness of the expression (and so it defaults to the
`falsy` branch). The other way around works because then the object
clearly falls into the `falsy` branch (i.e `undefined` or `null`).

This is noticeable as it does not particularly break the actual state
(vote toggline works for example), however the optimized closure of
immutable styles/conditionally rendered styles does not work on the UI.

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Co-authored-by: Khushal Agarwal <[email protected]>

Author: isekovanic

package/src/components/Poll/components/PollOption.tsx

@@ -181,24 +181,24 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
     toggleVote();
   }, [message, onPress, poll, toggleVote]);
 
+  const hasVote = !!ownVotesByOptionId[option.id];
+
   return ownCapabilities.castPollVote && !isClosed ? (
     <Pressable
       onPress={onPressHandler}
       style={({ pressed }) => [
         { opacity: pressed ? 0.5 : 1 },
         styles.voteContainer,
         {
-          backgroundColor: ownVotesByOptionId[option.id]
-            ? voteButtonActive || accent_dark_blue
-            : 'transparent',
-          borderColor: ownVotesByOptionId[option.id]
+          backgroundColor: hasVote ? voteButtonActive || accent_dark_blue : 'transparent',
+          borderColor: hasVote
             ? voteButtonActive || accent_dark_blue
             : voteButtonInactive || disabled,
         },
         voteButtonContainer,
       ]}
     >
-      {ownVotesByOptionId[option.id] ? <Check height={15} pathFill='white' width={20} /> : null}
+      {hasVote ? <Check height={15} pathFill='white' width={20} /> : null}
     </Pressable>
   ) : null;
 };