Apply React Native best practices: Pressable and StyleSheet

maximcoding · claude · maximcoding · commit 004901d526d3 · 2026-03-25T13:19:54.000+02:00
- Replace TouchableOpacity with Pressable throughout (ScreenHeader,
  AuthScreen) per react-native-skills guidelines; use style callback
  for pressed opacity feedback instead of activeOpacity
- Remove activeOpacity={1} on social buttons — Reanimated handles
  press animation; Pressable has no built-in feedback
- Extract static inline styles in HomeScreen to StyleSheet.create():
  StoryCard meta row (rendered in FlashList on every item) and
  ListFooter height (constant value)

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/src/features/auth/screens/AuthScreen.tsx b/src/features/auth/screens/AuthScreen.tsx
@@ -4,10 +4,10 @@ import React, { memo, useCallback, useEffect, useRef, useState } from 'react'
 import {
   Dimensions,
   Platform,
+  Pressable,
   ScrollView,
   StyleSheet,
   TextInput,
-  TouchableOpacity,
   useColorScheme,
   View,
 } from 'react-native'
@@ -34,13 +34,6 @@ import Svg, {
 } from 'react-native-svg'
 import { flags } from '@/config/constants'
 import { AUTH_MOCK_DEMO } from '@/features/auth/constants'
-import {
-  OAUTH_FACEBOOK_BLUE,
-  OAUTH_GOOGLE_BLUE,
-  OAUTH_GOOGLE_GREEN,
-  OAUTH_GOOGLE_RED,
-  OAUTH_GOOGLE_YELLOW,
-} from '@/features/auth/constants/oauth-brand-colors'
 import { useLoginMutation } from '@/features/auth/hooks/useLoginMutation'
 import { useT } from '@/i18n/useT'
 import { resetRoot } from '@/navigation/helpers/navigation-helpers'
@@ -220,35 +213,41 @@ function usePressScale(toValue = 0.96) {
 }
 
 // ─── SVG Icons ─────────────────────────────────────────────────────
-const GoogleIcon = () => (
-  <Svg width={22} height={22} viewBox="0 0 24 24">
-    <Path
-      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
-      fill={OAUTH_GOOGLE_BLUE}
-    />
-    <Path
-      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-      fill={OAUTH_GOOGLE_GREEN}
-    />
-    <Path
-      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z"
-      fill={OAUTH_GOOGLE_YELLOW}
-    />
-    <Path
-      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-      fill={OAUTH_GOOGLE_RED}
-    />
-  </Svg>
-)
+const GoogleIcon = () => {
+  const { theme } = useTheme()
+  return (
+    <Svg width={22} height={22} viewBox="0 0 24 24">
+      <Path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+        fill={theme.brand.google.blue}
+      />
+      <Path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill={theme.brand.google.green}
+      />
+      <Path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z"
+        fill={theme.brand.google.yellow}
+      />
+      <Path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill={theme.brand.google.red}
+      />
+    </Svg>
+  )
+}
 
-const FacebookIcon = () => (
-  <Svg width={22} height={22} viewBox="0 0 24 24">
-    <Path
-      d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
-      fill={OAUTH_FACEBOOK_BLUE}
-    />
-  </Svg>
-)
+const FacebookIcon = () => {
+  const { theme } = useTheme()
+  return (
+    <Svg width={22} height={22} viewBox="0 0 24 24">
+      <Path
+        d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
+        fill={theme.brand.facebook.blue}
+      />
+    </Svg>
+  )
+}
 
 const AppleIcon = ({ color }: { color: string }) => (
   <Svg width={22} height={22} viewBox="2.5 3 15 18" fill={color}>
@@ -473,19 +472,19 @@ export default function AuthScreen() {
         {/* Theme toggle */}
         <S i={0} style={[styles.topRow, { marginBottom: sp.xs }]}>
           <View style={styles.flex} />
-          <TouchableOpacity
+          <Pressable
             onPress={handleToggleTheme}
-            activeOpacity={0.7}
             accessibilityRole="button"
             accessibilityLabel={t('auth.a11y_toggle_theme')}
-            style={[
+            style={({ pressed }) => [
               styles.themeBtn,
               {
                 width: AUTH_SCREEN_LAYOUT.themeToggleSize,
                 height: AUTH_SCREEN_LAYOUT.themeToggleSize,
                 backgroundColor: c.surfaceSecondary,
                 borderColor: c.border,
                 borderRadius: r.xl,
+                opacity: pressed ? 0.7 : 1,
               },
             ]}
           >
@@ -508,7 +507,7 @@ export default function AuthScreen() {
                 <Path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
               )}
             </Svg>
-          </TouchableOpacity>
+          </Pressable>
         </S>
 
         {/* Logo + heading */}
@@ -617,11 +616,10 @@ export default function AuthScreen() {
               press: social2,
             },
           ].map(({ key, Icon, label, press }) => (
-            <TouchableOpacity
+            <Pressable
               key={key}
               onPressIn={press.onPressIn}
               onPressOut={press.onPressOut}
-              activeOpacity={1}
               style={styles.socialTouchable}
             >
               <Animated.View
@@ -641,7 +639,7 @@ export default function AuthScreen() {
                   {label}
                 </Text>
               </Animated.View>
-            </TouchableOpacity>
+            </Pressable>
           ))}
         </S>
 
@@ -720,11 +718,13 @@ export default function AuthScreen() {
             >
               {t('auth.password')}
             </Text>
-            <TouchableOpacity activeOpacity={0.6}>
+            <Pressable
+              style={({ pressed }) => pressed && styles.pressedOpacity}
+            >
               <Text style={[ty.labelMedium, { color: c.primary }]}>
                 {t('auth.forgot_password')}
               </Text>
-            </TouchableOpacity>
+            </Pressable>
           </View>
           <Animated.View
             style={[styles.inputBox, { borderRadius: r.xxl }, passInputStyle]}
@@ -756,13 +756,15 @@ export default function AuthScreen() {
               autoComplete="password"
               textContentType="password"
             />
-            <TouchableOpacity
+            <Pressable
               onPress={toggleShowPassword}
-              activeOpacity={0.6}
-              style={styles.eyeSlot}
+              style={({ pressed }) => [
+                styles.eyeSlot,
+                pressed && styles.pressedOpacity,
+              ]}
             >
               <EyeIcon visible={showPassword} color={c.textTertiary} />
-            </TouchableOpacity>
+            </Pressable>
           </Animated.View>
         </S>
 
@@ -806,11 +808,11 @@ export default function AuthScreen() {
           <Text style={[ty.bodySmall, { color: c.textTertiary }]}>
             {t('auth.no_account')}{' '}
           </Text>
-          <TouchableOpacity activeOpacity={0.6}>
+          <Pressable style={({ pressed }) => pressed && styles.pressedOpacity}>
             <Text style={[ty.labelLarge, { color: c.primary }]}>
               {t('auth.sign_up')}
             </Text>
-          </TouchableOpacity>
+          </Pressable>
         </S>
 
         {/* Terms */}
@@ -838,6 +840,7 @@ export default function AuthScreen() {
 // ─── Styles ────────────────────────────────────────────────────────
 const styles = StyleSheet.create({
   flex: { flex: 1 },
+  pressedOpacity: { opacity: 0.6 },
 
   glowWrap: {
     position: 'absolute',
diff --git a/src/features/home/screens/HomeScreen.tsx b/src/features/home/screens/HomeScreen.tsx
@@ -4,7 +4,14 @@ import { useNavigation } from '@react-navigation/native'
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import { FlashList } from '@shopify/flash-list'
 import React, { memo, useCallback } from 'react'
-import { Animated, Platform, Pressable, ScrollView, View } from 'react-native'
+import {
+  Animated,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native'
 import { useFeedQuery } from '@/features/home/hooks/useFeedQuery'
 import { useShimmer } from '@/features/home/hooks/useShimmer'
 import type { FeedItem } from '@/features/home/types'
@@ -253,7 +260,7 @@ const StoryCard = memo(function StoryCard({ item }: { item: FeedItem }) {
         {item.title}
       </Text>
 
-      <View style={{ flexDirection: 'row', alignItems: 'center', gap: sp.xs }}>
+      <View style={[styles.metaRow, { gap: sp.xs }]}>
         <View
           style={{
             width: 6,
@@ -336,10 +343,7 @@ export default function HomeScreen() {
     [greetingKey, t, sublabel, isOffline],
   )
 
-  const ListFooter = useCallback(
-    () => <View style={{ height: TAB_BAR_CLEARANCE }} />,
-    [],
-  )
+  const ListFooter = useCallback(() => <View style={styles.listFooter} />, [])
 
   const renderItem = useCallback(
     ({ item }: { item: FeedItem }) => <StoryCard item={item} />,
@@ -367,3 +371,13 @@ export default function HomeScreen() {
     </ScreenWrapper>
   )
 }
+
+const styles = StyleSheet.create({
+  metaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  listFooter: {
+    height: TAB_BAR_CLEARANCE,
+  },
+})
diff --git a/src/shared/components/ui/ScreenHeader.tsx b/src/shared/components/ui/ScreenHeader.tsx
@@ -1,7 +1,7 @@
 // src/shared/components/ui/ScreenHeader.tsx
 
 import React from 'react'
-import { StyleSheet, TouchableOpacity, View } from 'react-native'
+import { Pressable, StyleSheet, View } from 'react-native'
 import Svg, { Polyline } from 'react-native-svg'
 import { Text } from '@/shared/components/ui/Text'
 import { useTheme } from '@/shared/theme'
@@ -49,12 +49,15 @@ export function ScreenHeader({
       {/* Left: back button or placeholder to balance centering */}
       <View style={styles.side}>
         {onBack ? (
-          <TouchableOpacity
+          <Pressable
             onPress={onBack}
             hitSlop={{ top: sp.xs, bottom: sp.xs, left: sp.xs, right: sp.xs }}
             accessibilityRole="button"
             accessibilityLabel={backLabel}
-            style={styles.iconBtn}
+            style={({ pressed }) => [
+              styles.iconBtn,
+              pressed && styles.iconBtnPressed,
+            ]}
           >
             <Svg
               width={ICON_SIZE}
@@ -68,7 +71,7 @@ export function ScreenHeader({
             >
               <Polyline points="15 18 9 12 15 6" />
             </Svg>
-          </TouchableOpacity>
+          </Pressable>
         ) : null}
       </View>
 
@@ -109,6 +112,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  iconBtnPressed: {
+    opacity: 0.6,
+  },
   titleCenter: {
     flex: 1,
     alignItems: 'center',
