Flix flaky buttons (#13)

Even though they're active, buttons are sometimes not actually
clickable.
Switching `Pressable` for `TouchableOpacity` seems to fix that
flakiness.

example/app/porting/index.tsx

@@ -4,11 +4,11 @@ import Checkbox from 'expo-checkbox'
 import { useCallback, useState } from 'react'
 import {
   Button,
-  Pressable,
   ScrollView,
   StyleSheet,
   Text,
   TextInput,
+  TouchableOpacity,
   View,
 } from 'react-native'
 
@@ -171,7 +171,7 @@ export default function PortingEmbedScreen() {
             )
           }}
           renderSecondaryButton={(name, onPress) => (
-            <Pressable onPress={onPress}>
+            <TouchableOpacity onPress={onPress}>
               <Text
                 style={[
                   {
@@ -185,7 +185,7 @@ export default function PortingEmbedScreen() {
               >
                 {titles[name]}
               </Text>
-            </Pressable>
+            </TouchableOpacity>
           )}
           renderAlertBanner={(variant, message) => (
             <View

src/components/EmbedButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Pressable, PressableProps } from 'react-native'
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native'
 
 import { useOptionsContext } from '../PortingEmbed/CustomOptionsProvider'
 import { EmbedText } from './EmbedText'
@@ -9,7 +9,7 @@ type Props = {
   disabled?: boolean
   isSubmitting?: boolean
   name?: string
-} & PressableProps
+} & TouchableOpacityProps
 
 export function EmbedButton({
   onPress,
@@ -23,7 +23,7 @@ export function EmbedButton({
   return options?.renderPrimaryButton ? (
     options.renderPrimaryButton(onPress, name, isSubmitting, disabled)
   ) : (
-    <Pressable
+    <TouchableOpacity
       disabled={disabled}
       style={[
         {
@@ -32,6 +32,7 @@ export function EmbedButton({
           padding: 12,
         },
       ]}
+      onPress={onPress}
       {...rest}
     >
       <EmbedText
@@ -46,6 +47,6 @@ export function EmbedButton({
       >
         {name}
       </EmbedText>
-    </Pressable>
+    </TouchableOpacity>
   )
 }

src/components/EmbedTextButton.tsx

@@ -1,15 +1,15 @@
 import React, { ReactNode } from 'react'
-import { Pressable, PressableProps } from 'react-native'
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native'
 
 import { EmbedText } from './EmbedText'
 
 type Props = {
   children: ReactNode
-} & PressableProps
+} & TouchableOpacityProps
 
 export function EmbedTextButton({ children, ...rest }: Props) {
   return (
-    <Pressable {...rest}>
+    <TouchableOpacity {...rest}>
       <EmbedText
         style={[
           {
@@ -22,6 +22,6 @@ export function EmbedTextButton({ children, ...rest }: Props) {
       >
         {children}
       </EmbedText>
-    </Pressable>
+    </TouchableOpacity>
   )
 }

src/components/FakeCheckBox.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
 import { EmbedText } from './EmbedText'
 
@@ -17,10 +17,10 @@ export function FakeCheckBox({ onChecked, label }: CheckboxProps) {
   }
 
   return (
-    <Pressable onPress={toggleCheckbox} style={[styles.container]}>
+    <TouchableOpacity onPress={toggleCheckbox} style={[styles.container]}>
       <View style={[styles.checkbox, checked ? styles.checked : null]} />
       <EmbedText style={[{ fontSize: 16, marginLeft: 12 }]}>{label}</EmbedText>
-    </Pressable>
+    </TouchableOpacity>
   )
 }