@depup/react-native 0.85.0-depup.1 → 0.86.2-depup.0

package/Libraries/Core/Timers/JSTimers.js

@@ -159,7 +159,7 @@ function _callReactNativeMicrotasksPass() {
   reactNativeMicrotasks = [];
 
   // Use for loop rather than forEach as per @vjeux's advice
-  // https://github.com/facebook/react-native/commit/c8fd9f7588ad02d2293cac7224715f4af7b0f352#commitcomment-14570051
+  // https://github.com/react/react-native/commit/c8fd9f7588ad02d2293cac7224715f4af7b0f352#commitcomment-14570051
   for (let i = 0; i < passReactNativeMicrotasks.length; ++i) {
     _callTimer(passReactNativeMicrotasks[i], 0);
   }
@@ -476,11 +476,11 @@ let ExportedJSTimers: {
 if (!NativeTiming) {
   console.warn("Timing native module is not available, can't set timers.");
   // $FlowFixMe[incompatible-type] : we can assume timers are generally available
-  ExportedJSTimers = ({
+  ExportedJSTimers = {
     callReactNativeMicrotasks: JSTimers.callReactNativeMicrotasks,
     queueReactNativeMicrotask: JSTimers.queueReactNativeMicrotask,
     // $FlowFixMe[incompatible-variance]
-  }: typeof JSTimers);
+  } as typeof JSTimers;
 } else {
   // $FlowFixMe[incompatible-variance]
   ExportedJSTimers = JSTimers;

package/Libraries/Core/Timers/immediateShim.js

@@ -55,7 +55,7 @@ export function setImmediate(callback: Function, ...args: any): number {
 }
 
 /**
- * @param {number} immediateID The ID of the immediate to be clearred.
+ * @param {number} immediateID The ID of the immediate to be cleared.
  */
 export function clearImmediate(immediateID: number) {
   clearedImmediates.add(immediateID);

package/Libraries/Core/setUpBatchedBridge.js

@@ -27,7 +27,7 @@ registerModule(
 );
 registerModule(
   'GlobalPerformanceLogger',
-  () => require('../Utilities/GlobalPerformanceLogger').default,
+  () => require('../ReactNative/DeprecatedPerformanceLoggerStub').default,
 );
 
 if (__DEV__) {

package/Libraries/Core/setUpNavigator.js

@@ -17,6 +17,6 @@ if (navigator === undefined) {
   // $FlowExpectedError[cannot-write] The global isn't writable anywhere but here, where we define it.
   global.navigator = {product: 'ReactNative'};
 } else {
-  // see https://github.com/facebook/react-native/issues/10881
+  // see https://github.com/react/react-native/issues/10881
   polyfillObjectProperty(navigator, 'product', () => 'ReactNative');
 }

package/Libraries/Core/setUpSegmentFetcher.js

@@ -40,7 +40,7 @@ function __fetchSegment(
     ) => {
       if (errorObject) {
         const error = new Error(errorObject.message);
-        (error: any).code = errorObject.code; // flowlint-line unclear-type: off
+        (error as any).code = errorObject.code; // flowlint-line unclear-type: off
         callback(error);
         return;
       }

package/Libraries/Debugging/DebuggingOverlayRegistry.js

@@ -34,7 +34,7 @@ import processColor from '../StyleSheet/processColor';
 
 // TODO(T171193075): __REACT_DEVTOOLS_GLOBAL_HOOK__ is always injected in dev-bundles,
 // but it is not mocked in some Jest tests. We should update Jest tests setup, so it would be the same as expected testing environment.
-const reactDevToolsHook: ?ReactDevToolsGlobalHook = (window: $FlowFixMe)
+const reactDevToolsHook: ?ReactDevToolsGlobalHook = (window as $FlowFixMe)
   .__REACT_DEVTOOLS_GLOBAL_HOOK__;
 
 export type DebuggingOverlayRegistrySubscriberProtocol = {

package/Libraries/EventEmitter/NativeEventEmitter.js

@@ -45,7 +45,7 @@ type UnsafeNativeEventObject = Object;
  * can theoretically listen to `RCTDeviceEventEmitter` (although discouraged).
  */
 export default class NativeEventEmitter<
-  TEventToArgsMap: Readonly<
+  TEventToArgsMap extends Readonly<
     Record<string, ReadonlyArray<UnsafeNativeEventObject>>,
   > = Readonly<Record<string, ReadonlyArray<UnsafeNativeEventObject>>>,
 > implements IEventEmitter<TEventToArgsMap>
@@ -83,7 +83,7 @@ export default class NativeEventEmitter<
     }
   }
 
-  addListener<TEvent: keyof TEventToArgsMap>(
+  addListener<TEvent extends keyof TEventToArgsMap>(
     eventType: TEvent,
     listener: (...args: TEventToArgsMap[TEvent]) => unknown,
     context?: unknown,
@@ -107,7 +107,7 @@ export default class NativeEventEmitter<
     };
   }
 
-  emit<TEvent: keyof TEventToArgsMap>(
+  emit<TEvent extends keyof TEventToArgsMap>(
     eventType: TEvent,
     ...args: TEventToArgsMap[TEvent]
   ): void {
@@ -116,7 +116,9 @@ export default class NativeEventEmitter<
     RCTDeviceEventEmitter.emit(eventType, ...args);
   }
 
-  removeAllListeners<TEvent: keyof TEventToArgsMap>(eventType?: ?TEvent): void {
+  removeAllListeners<TEvent extends keyof TEventToArgsMap>(
+    eventType?: ?TEvent,
+  ): void {
     invariant(
       eventType != null,
       '`NativeEventEmitter.removeAllListener()` requires a non-null argument.',
@@ -125,7 +127,9 @@ export default class NativeEventEmitter<
     RCTDeviceEventEmitter.removeAllListeners(eventType);
   }
 
-  listenerCount<TEvent: keyof TEventToArgsMap>(eventType: TEvent): number {
+  listenerCount<TEvent extends keyof TEventToArgsMap>(
+    eventType: TEvent,
+  ): number {
     return RCTDeviceEventEmitter.listenerCount(eventType);
   }
 }

package/Libraries/EventEmitter/RCTDeviceEventEmitter.js

@@ -25,7 +25,7 @@ type RCTDeviceEventDefinitions = {[name: string]: Array<any>};
  */
 class RCTDeviceEventEmitterImpl extends EventEmitter<RCTDeviceEventDefinitions> {
   // Add systrace to RCTDeviceEventEmitter.emit method for debugging
-  emit<TEvent: keyof RCTDeviceEventDefinitions>(
+  emit<TEvent extends keyof RCTDeviceEventDefinitions>(
     eventType: TEvent,
     ...args: RCTDeviceEventDefinitions[TEvent]
   ): void {
@@ -45,4 +45,4 @@ Object.defineProperty(global, '__rctDeviceEventEmitter', {
   value: RCTDeviceEventEmitter,
 });
 
-export default (RCTDeviceEventEmitter: IEventEmitter<RCTDeviceEventDefinitions>);
+export default RCTDeviceEventEmitter as IEventEmitter<RCTDeviceEventDefinitions>;

package/Libraries/EventEmitter/RCTNativeAppEventEmitter.d.ts

@@ -20,7 +20,7 @@ export interface NativeEventSubscription {
  * Receive events from native-code
  * Deprecated - subclass NativeEventEmitter to create granular event modules instead of
  * adding all event listeners directly to RCTNativeAppEventEmitter.
- * @see https://github.com/facebook/react-native/blob/0.34-stable\Libraries\EventEmitter\RCTNativeAppEventEmitter.js
+ * @see https://github.com/react/react-native/blob/0.34-stable\Libraries\EventEmitter\RCTNativeAppEventEmitter.js
  * @see https://reactnative.dev/docs/native-modules-ios#sending-events-to-javascript
  */
 type RCTNativeAppEventEmitter = DeviceEventEmitterStatic;

package/Libraries/FBLazyVector/FBLazyVector.podspec

@@ -8,7 +8,7 @@ require "json"
 package = JSON.parse(File.read(File.join(__dir__, "..", "..", "package.json")))
 version = package['version']
 
-source = { :git => 'https://github.com/facebook/react-native.git' }
+source = { :git => 'https://github.com/react/react-native.git' }
 if version == '1000.0.0'
   # This is an unpublished version, use the latest commit hash of the react-native repo, which we’re presumably in.
   source[:commit] = `git rev-parse HEAD`.strip if system("git rev-parse --git-dir > /dev/null 2>&1")

package/Libraries/Image/Image.android.js

@@ -12,10 +12,8 @@ import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {ImageProps} from './ImageProps';
-import type {ImageSourceHeaders} from './ImageSourceUtils';
 import type {AbstractImageAndroid, ImageAndroid} from './ImageTypes.flow';
 
-import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
@@ -196,55 +194,37 @@ let BaseImage: AbstractImageAndroid = ({
     );
   }
 
-  let style_: ImageStyleProp;
-  let sources_;
-  let headers_: ?ImageSourceHeaders;
+  const nativeProps = restProps as {
+    ...React.PropsOf<ImageViewNativeComponent>,
+  };
+
   if (Array.isArray(source_)) {
     const {
       headers: sourceHeaders,
       width: sourceWidth,
       height: sourceHeight,
     } = source_[0];
-    headers_ = sourceHeaders;
-    // Default to the first source's width and height if only one is provided
-    if (ReactNativeFeatureFlags.fixImageSrcDimensionPropagation()) {
-      style_ = [
-        source_.length === 1 && {width: sourceWidth, height: sourceHeight},
-        styles.base,
-        style,
-      ];
-    } else {
-      style_ = [styles.base, style];
+    if (sourceHeaders != null) {
+      nativeProps.headers = sourceHeaders;
     }
-    sources_ = source_;
+    // Default to the first source's width and height if only one is provided
+    nativeProps.style = [
+      source_.length === 1 && {width: sourceWidth, height: sourceHeight},
+      styles.base,
+      style,
+    ];
+    nativeProps.source = source_;
   } else {
     const {uri, width: sourceWidth, height: sourceHeight} = source_;
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
-    style_ = [
+    nativeProps.style = [
       {width: sourceWidth ?? width, height: sourceHeight ?? height},
       styles.base,
       style,
     ];
-    sources_ = [source_];
-  }
-
-  const nativeProps = restProps as {
-    ...React.PropsOf<ImageViewNativeComponent>,
-  };
-
-  // Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
-  // (for historical reasons). So in the latter case we populate both "src" and "source",
-  // in order to have a better alignment between platforms in the future.
-  // TODO: `src` should be eventually removed from the API on Android.
-  nativeProps.src = sources_;
-  nativeProps.source = sources_;
-
-  nativeProps.style = style_;
-
-  if (headers_ != null) {
-    nativeProps.headers = headers_;
+    nativeProps.source = [source_];
   }
 
   if (onLoadStart != null) {

package/Libraries/Image/ImageSource.d.ts

@@ -8,7 +8,7 @@
  */
 
 /*
- * @see https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageSource.js
+ * @see https://github.com/react/react-native/blob/master/Libraries/Image/ImageSource.js
  */
 export interface ImageURISource {
   /**

package/Libraries/Image/RCTImageLoader.mm

@@ -517,7 +517,7 @@ static RCTImageLoaderCancellationBlock RCTLoadImageURLFromLoader(
     // Add missing png extension
     if (request.URL.fileURL && request.URL.pathExtension.length == 0) {
       // Check if there exists a file with that url on disk already
-      // This should fix issue https://github.com/facebook/react-native/issues/46870
+      // This should fix issue https://github.com/react/react-native/issues/46870
       if ([[NSFileManager defaultManager] fileExistsAtPath:request.URL.path]) {
         mutableRequest.URL = request.URL;
       } else {
@@ -714,17 +714,19 @@ static RCTImageLoaderCancellationBlock RCTLoadImageURLFromLoader(
                                                        completionHandler
 {
   RCTNetworking *networking = [_moduleRegistry moduleForName:"Networking"];
-  if (RCT_DEBUG && !networking) {
+  if (!networking) {
     RCTLogError(
         @"No suitable image URL loader found for %@. You may need to "
          " import the RCTNetwork library in order to load images.",
         request.URL.absoluteString);
+    completionHandler(RCTErrorWithMessage(@"RCTNetworking module is not available"), nil, nil);
     return NULL;
   }
 
   // Check if networking module can load image
-  if (RCT_DEBUG && ![networking canHandleRequest:request]) {
+  if (![networking canHandleRequest:request]) {
     RCTLogError(@"No suitable image URL loader found for %@", request.URL.absoluteString);
+    completionHandler(RCTErrorWithMessage(@"No suitable URL loader for request"), nil, nil);
     return NULL;
   }
 

package/Libraries/Image/React-RCTImage.podspec

@@ -8,7 +8,7 @@ require "json"
 package = JSON.parse(File.read(File.join(__dir__, "..", "..", "package.json")))
 version = package['version']
 
-source = { :git => 'https://github.com/facebook/react-native.git' }
+source = { :git => 'https://github.com/react/react-native.git' }
 if version == '1000.0.0'
   # This is an unpublished version, use the latest commit hash of the react-native repo, which we’re presumably in.
   source[:commit] = `git rev-parse HEAD`.strip if system("git rev-parse --git-dir > /dev/null 2>&1")

package/Libraries/Image/RelativeImageStub.js

@@ -15,7 +15,7 @@
 
 const AssetRegistry = require('@react-native/assets-registry/registry');
 
-const RelativeImageStub = (AssetRegistry.registerAsset({
+const RelativeImageStub = AssetRegistry.registerAsset({
   __packager_asset: true,
   fileSystemLocation: '/full/path/to/directory',
   httpServerLocation: '/assets/full/path/to/directory',
@@ -25,7 +25,7 @@ const RelativeImageStub = (AssetRegistry.registerAsset({
   hash: 'nonsense',
   name: 'icon',
   type: 'png',
-}): number);
+}) as number;
 
 // eslint-disable-next-line @react-native/monorepo/no-commonjs-exports
 module.exports = RelativeImageStub;

package/Libraries/Interaction/PanResponder.js

@@ -117,7 +117,7 @@ const currentCentroidY = TouchHistoryMath.currentCentroidY;
  * ### Working Example
  *
  * To see it in action, try the
- * [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/HEAD/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js)
+ * [PanResponder example in RNTester](https://github.com/react/react-native/blob/HEAD/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js)
  */
 
 export type PanResponderGestureState = {

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -131,17 +131,17 @@ function createLayoutAnimation(
 }
 
 const Presets = {
-  easeInEaseOut: (createLayoutAnimation(
+  easeInEaseOut: createLayoutAnimation(
     300,
     'easeInEaseOut',
     'opacity',
-  ): LayoutAnimationConfig),
-  linear: (createLayoutAnimation(
+  ) as LayoutAnimationConfig,
+  linear: createLayoutAnimation(
     500,
     'linear',
     'opacity',
-  ): LayoutAnimationConfig),
-  spring: ({
+  ) as LayoutAnimationConfig,
+  spring: {
     duration: 700,
     create: {
       type: 'linear',
@@ -155,7 +155,7 @@ const Presets = {
       type: 'linear',
       property: 'opacity',
     },
-  }: LayoutAnimationConfig),
+  } as LayoutAnimationConfig,
 };
 
 /**
@@ -205,15 +205,15 @@ const LayoutAnimation = {
     console.error('LayoutAnimation.checkConfig(...) has been disabled.');
   },
   Presets,
-  easeInEaseOut: (configureNext.bind(null, Presets.easeInEaseOut): (
+  easeInEaseOut: configureNext.bind(null, Presets.easeInEaseOut) as (
     onAnimationDidEnd?: OnAnimationDidEndCallback,
-  ) => void),
-  linear: (configureNext.bind(null, Presets.linear): (
+  ) => void,
+  linear: configureNext.bind(null, Presets.linear) as (
     onAnimationDidEnd?: OnAnimationDidEndCallback,
-  ) => void),
-  spring: (configureNext.bind(null, Presets.spring): (
+  ) => void,
+  spring: configureNext.bind(null, Presets.spring) as (
     onAnimationDidEnd?: OnAnimationDidEndCallback,
-  ) => void),
+  ) => void,
   setEnabled: setLayoutAnimationEnabled,
 };
 

package/Libraries/Linking/Linking.js

@@ -32,7 +32,7 @@ class LinkingImpl extends NativeEventEmitter<LinkingEventDefinitions> {
    *
    * See https://reactnative.dev/docs/linking#addeventlistener
    */
-  addEventListener<K: keyof LinkingEventDefinitions>(
+  addEventListener<K extends keyof LinkingEventDefinitions>(
     eventType: K,
     listener: (...LinkingEventDefinitions[K]) => unknown,
   ): EventSubscription {

package/Libraries/LinkingIOS/React-RCTLinking.podspec

@@ -8,7 +8,7 @@ require "json"
 package = JSON.parse(File.read(File.join(__dir__, "..", "..", "package.json")))
 version = package['version']
 
-source = { :git => 'https://github.com/facebook/react-native.git' }
+source = { :git => 'https://github.com/react/react-native.git' }
 if version == '1000.0.0'
   # This is an unpublished version, use the latest commit hash of the react-native repo, which we’re presumably in.
   source[:commit] = `git rev-parse HEAD`.strip if system("git rev-parse --git-dir > /dev/null 2>&1")

package/Libraries/Lists/FlatList.js

@@ -564,7 +564,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
       );
       return items
         .map((item, kk) =>
-          keyExtractor(((item: $FlowFixMe): ItemT), index * numColumns + kk),
+          keyExtractor(item as $FlowFixMe as ItemT, index * numColumns + kk),
         )
         .join(':');
     }

package/Libraries/LogBox/LogBox.js

@@ -32,7 +32,7 @@ function convertLegacyComponentStack(componentStack: Stack): Stack {
     typeof firstFrame.content === 'string'
   ) {
     // Convert from legacy ComponentStack to Stack format
-    return (componentStack: $FlowFixMe).map(frame => ({
+    return (componentStack as $FlowFixMe).map(frame => ({
       methodName: frame.content,
       lineNumber: frame.location.row,
       column: frame.location.column,
@@ -304,4 +304,4 @@ if (__DEV__) {
   };
 }
 
-export default (LogBox: ILogBox);
+export default LogBox as ILogBox;

package/Libraries/LogBox/LogBoxInspectorContainer.js

@@ -12,6 +12,7 @@ import type LogBoxLog from './Data/LogBoxLog';
 
 import View from '../Components/View/View';
 import StyleSheet from '../StyleSheet/StyleSheet';
+import BackHandler from '../Utilities/BackHandler';
 import * as LogBoxData from './Data/LogBoxData';
 import LogBoxInspector from './UI/LogBoxInspector';
 import * as React from 'react';
@@ -23,6 +24,27 @@ type Props = Readonly<{
 }>;
 
 export class _LogBoxInspectorContainer extends React.Component<Props> {
+  _backHandler: ?{remove: () => void, ...} = null;
+
+  componentDidMount() {
+    this._backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        if (this.props.selectedLogIndex < 0) {
+          return false;
+        }
+        this._handleMinimize();
+        return true;
+      },
+    );
+  }
+
+  componentWillUnmount() {
+    if (this._backHandler) {
+      this._backHandler.remove();
+    }
+  }
+
   render(): React.Node {
     return (
       <View style={StyleSheet.absoluteFill}>
@@ -63,6 +85,6 @@ export class _LogBoxInspectorContainer extends React.Component<Props> {
   };
 }
 
-export default (LogBoxData.withSubscription(
+export default LogBoxData.withSubscription(
   _LogBoxInspectorContainer,
-): React.ComponentType<{}>);
+) as React.ComponentType<{}>;

package/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -11,6 +11,7 @@
 import SafeAreaView from '../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE';
 import View from '../Components/View/View';
 import StyleSheet from '../StyleSheet/StyleSheet';
+import BackHandler from '../Utilities/BackHandler';
 import * as LogBoxData from './Data/LogBoxData';
 import LogBoxLog from './Data/LogBoxLog';
 import LogBoxLogNotification from './UI/LogBoxNotification';
@@ -22,8 +23,28 @@ type Props = Readonly<{
   isDisabled?: ?boolean,
 }>;
 
-export function _LogBoxNotificationContainer(props: Props): React.Node {
+function useLogBoxBackHandler(focused: boolean, logCount: number): void {
+  React.useEffect(() => {
+    if (!focused || logCount === 0) {
+      return;
+    }
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        LogBoxData.clearWarnings();
+        LogBoxData.clearErrors();
+        return true;
+      },
+    );
+    return () => subscription.remove();
+  }, [focused, logCount]);
+}
+
+export function LogBoxNotificationContainer(props: Props): React.Node {
   const {logs} = props;
+  const [focused, setFocused] = React.useState(false);
+
+  useLogBoxBackHandler(focused, logs.length);
 
   const onDismissWarns = () => {
     LogBoxData.clearWarnings();
@@ -68,6 +89,7 @@ export function _LogBoxNotificationContainer(props: Props): React.Node {
             totalLogCount={warnings.length}
             onPressOpen={() => openLog(warnings[warnings.length - 1])}
             onPressDismiss={onDismissWarns}
+            onFocusChange={setFocused}
           />
         </View>
       )}
@@ -79,6 +101,7 @@ export function _LogBoxNotificationContainer(props: Props): React.Node {
             totalLogCount={errors.length}
             onPressOpen={() => openLog(errors[errors.length - 1])}
             onPressDismiss={onDismissErrors}
+            onFocusChange={setFocused}
           />
         </View>
       )}
@@ -100,6 +123,6 @@ const styles = StyleSheet.create({
   },
 });
 
-export default (LogBoxData.withSubscription(
-  _LogBoxNotificationContainer,
-): React.ComponentType<{}>);
+export default LogBoxData.withSubscription(
+  LogBoxNotificationContainer,
+) as React.ComponentType<{}>;

package/Libraries/LogBox/UI/LogBoxButton.js

@@ -12,7 +12,7 @@ import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
-import TouchableWithoutFeedback from '../../Components/Touchable/TouchableWithoutFeedback';
+import Pressable from '../../Components/Pressable/Pressable';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as LogBoxStyle from './LogBoxStyle';
@@ -28,9 +28,10 @@ component LogBoxButton(
   children?: React.Node,
   hitSlop?: ?EdgeInsetsProp,
   onPress?: ?(event: GestureResponderEvent) => void,
+  onFocusChange?: ?(focused: boolean) => void,
   style?: ViewStyleProp,
 ) {
-  const [pressed, setPressed] = useState(false);
+  const [focused, setFocused] = useState(false);
 
   let resolvedBackgroundColor = backgroundColor;
   if (!resolvedBackgroundColor) {
@@ -40,32 +41,54 @@ component LogBoxButton(
     };
   }
 
-  const content = (
-    <View
-      id={id}
-      style={StyleSheet.compose(
-        {
-          backgroundColor: pressed
-            ? resolvedBackgroundColor.pressed
-            : resolvedBackgroundColor.default,
-        },
-        style,
-      )}>
-      {children}
-    </View>
-  );
+  if (onPress == null) {
+    return (
+      <View
+        id={id}
+        style={StyleSheet.compose(
+          {backgroundColor: resolvedBackgroundColor.default},
+          style,
+        )}>
+        {children}
+      </View>
+    );
+  }
 
-  return onPress == null ? (
-    content
-  ) : (
-    <TouchableWithoutFeedback
+  return (
+    <Pressable
+      id={id}
+      focusable={true}
       hitSlop={hitSlop}
       onPress={onPress}
-      onPressIn={() => setPressed(true)}
-      onPressOut={() => setPressed(false)}>
-      {content}
-    </TouchableWithoutFeedback>
+      onFocus={() => {
+        setFocused(true);
+        onFocusChange?.(true);
+      }}
+      onBlur={() => {
+        setFocused(false);
+        onFocusChange?.(false);
+      }}
+      style={({pressed}) =>
+        StyleSheet.compose(
+          {
+            backgroundColor: pressed
+              ? resolvedBackgroundColor.pressed
+              : resolvedBackgroundColor.default,
+          },
+          focused ? StyleSheet.compose(style, styles.focusRing) : style,
+        )
+      }>
+      {children}
+    </Pressable>
   );
 }
 
+const styles = StyleSheet.create({
+  focusRing: {
+    borderWidth: 2,
+    borderColor: LogBoxStyle.getTextColor(0.6),
+    borderRadius: 4,
+  },
+});
+
 export default LogBoxButton;