Update tile to memoise correctly

packages/shared/src/components/Tile.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {memo, useCallback} from 'react';
 import {
   Image,
   ImageSourcePropType,
@@ -10,45 +10,51 @@ import {
 import {scaleFontSize, scaleWidth} from '../utils/scaling';
 
 export interface TileProps {
+  id: string;
   label: string;
   icon: ImageSourcePropType;
   isFocused: boolean;
-  onFocus: () => void;
+  onFocus: (id: string) => void;
   onBlur: () => void;
   testID?: string;
   accessibilityLabel?: string;
   hasTVPreferredFocus?: boolean;
 }
 
-export const Tile = ({
-  label,
-  icon,
-  isFocused,
-  onFocus,
-  onBlur,
-  testID,
-  accessibilityLabel,
-  hasTVPreferredFocus,
-}: TileProps) => {
-  return (
-    <TouchableOpacity
-      style={[styles.tile, isFocused ? styles.focused : styles.default]}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      testID={testID}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="button"
-      hasTVPreferredFocus={hasTVPreferredFocus}
-      activeOpacity={0.8}>
-      <View style={styles.topHalf}>
-        <Image source={icon} style={styles.icon} accessible={false} />
-      </View>
-      <View style={styles.bottomHalf}>
-        <Text style={styles.label}>{label}</Text>
-      </View>
-    </TouchableOpacity>
-  );
-};
+export const Tile = memo(
+  ({
+    id,
+    label,
+    icon,
+    isFocused,
+    onFocus,
+    onBlur,
+    testID,
+    accessibilityLabel,
+    hasTVPreferredFocus,
+  }: TileProps) => {
+    const handleFocus = useCallback(() => onFocus(id), [id, onFocus]);
+
+    return (
+      <TouchableOpacity
+        style={[styles.tile, isFocused ? styles.focused : styles.default]}
+        onFocus={handleFocus}
+        onBlur={onBlur}
+        testID={testID}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        hasTVPreferredFocus={hasTVPreferredFocus}
+        activeOpacity={0.8}>
+        <View style={styles.topHalf}>
+          <Image source={icon} style={styles.icon} accessible={false} />
+        </View>
+        <View style={styles.bottomHalf}>
+          <Text style={styles.label}>{label}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   tile: {
@@ -88,6 +94,6 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     textAlign: 'center',
     lineHeight: scaleFontSize(52),
-    includeFontPadding: false,
+    width: '100%',
   },
 });

packages/shared/src/screens/HomeScreen.tsx

@@ -17,6 +17,10 @@ export const HomeScreen = () => {
     setFocusedTileId(tileId);
   }, []);
 
+  const handleTileBlur = useCallback(() => {
+    setFocusedTileId('home');
+  }, []);
+
   const renderFocusedContent = () => {
     if (focusedTileId === 'home') {
       return <Header />;
@@ -49,11 +53,12 @@ export const HomeScreen = () => {
         {tiles.map(tile => (
           <Tile
             key={tile.id}
+            id={tile.id}
             label={tile.label}
             icon={tile.icon}
             isFocused={focusedTileId === tile.id}
-            onFocus={() => handleTileFocus(tile.id)}
-            onBlur={() => setFocusedTileId('home')}
+            onFocus={handleTileFocus}
+            onBlur={handleTileBlur}
             testID={`tile-${tile.id}`}
             accessibilityLabel={tile.accessibilityLabel}
             hasTVPreferredFocus={tile.id === 'home'}