react-native-tvos 0.75.2-0rc0 → 0.76.0-0rc0

package/Libraries/Core/ExceptionsManager.js

@@ -154,6 +154,7 @@ function handleException(e: mixed, isFatal: boolean) {
     inExceptionHandler = true;
     /* $FlowFixMe[class-object-subtyping] added when improving typing for this
      * parameters */
+    // $FlowFixMe[incompatible-call]
     reportException(error, isFatal, /*reportToConsole*/ true);
   } finally {
     inExceptionHandler = false;
@@ -225,6 +226,7 @@ function reactConsoleErrorHandler(...args) {
   reportException(
     /* $FlowFixMe[class-object-subtyping] added when improving typing for this
      * parameters */
+    // $FlowFixMe[incompatible-call]
     error,
     false, // isFatal
     false, // reportToConsole

package/Libraries/Core/InitializeCore.js

@@ -8,6 +8,8 @@
  * @flow strict-local
  */
 
+'use client';
+
 /**
  * Sets up global variables typical in most JavaScript environments.
  *
@@ -27,7 +29,7 @@
 const start = Date.now();
 
 require('./setUpGlobals');
-require('../../src/private/core/setUpDOM');
+require('../../src/private/setup/setUpDOM').default();
 require('./setUpPerformance');
 require('./setUpErrorHandling');
 require('./polyfillPromise');

package/Libraries/Core/ReactFiberErrorDialog.js

@@ -32,14 +32,17 @@ const ReactFiberErrorDialog = {
     if (errorValue instanceof Error) {
       /* $FlowFixMe[class-object-subtyping] added when improving typing for
        * this parameters */
+      // $FlowFixMe[incompatible-cast]
       error = (errorValue: ExtendedError);
     } else if (typeof errorValue === 'string') {
       /* $FlowFixMe[class-object-subtyping] added when improving typing for
        * this parameters */
+      // $FlowFixMe[incompatible-cast]
       error = (new SyntheticError(errorValue): ExtendedError);
     } else {
       /* $FlowFixMe[class-object-subtyping] added when improving typing for
        * this parameters */
+      // $FlowFixMe[incompatible-cast]
       error = (new SyntheticError('Unspecified error'): ExtendedError);
     }
     try {

package/Libraries/Core/ReactNativeVersion.js

@@ -15,8 +15,8 @@ const version: $ReadOnly<{
   prerelease: string | null,
 }> = {
   major: 0,
-  minor: 75,
-  patch: 2,
+  minor: 76,
+  patch: 0,
   prerelease: '0rc0',
 };
 

package/Libraries/Core/setUpErrorHandling.js

@@ -21,7 +21,13 @@ ExceptionsManager.installConsoleErrorReporter();
 if (!global.__fbDisableExceptionsManager) {
   const handleError = (e: mixed, isFatal: boolean) => {
     try {
-      ExceptionsManager.handleException(e, isFatal);
+      // TODO(T196834299): We should really use a c++ turbomodule for this
+      if (
+        !global.RN$handleException ||
+        !global.RN$handleException(e, isFatal)
+      ) {
+        ExceptionsManager.handleException(e, isFatal);
+      }
     } catch (ee) {
       console.log('Failed to print error: ', ee.message);
       throw e;

package/Libraries/Core/setUpGlobals.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+'use client';
 'use strict';
 
 /**

package/Libraries/Core/setUpReactRefresh.js

@@ -36,10 +36,6 @@ if (__DEV__) {
     register: ReactRefreshRuntime.register,
 
     performReactRefresh() {
-      if (ReactRefreshRuntime.hasUnrecoverableErrors()) {
-        DevSettings.reload('Fast Refresh - Unrecoverable');
-        return;
-      }
       ReactRefreshRuntime.performReactRefresh();
       DevSettings.onFastRefresh();
     },

package/Libraries/Debugging/DebuggingOverlayRegistry.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @noflow
  * @format
  * @oncall react_native
  */

package/Libraries/Debugging/useSubscribeToDebuggingOverlayRegistry.js

@@ -4,11 +4,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow
  * @format
  * @oncall react_native
  */
 
+/*
 import type {
   AppContainerRootViewRef,
   DebuggingOverlayRef,
@@ -30,3 +31,4 @@ const useSubscribeToDebuggingOverlayRegistry = (
 };
 
 export default useSubscribeToDebuggingOverlayRegistry;
+ */

package/Libraries/Image/AssetSourceResolver.js

@@ -18,7 +18,10 @@ export type ResolvedAssetSource = {|
   +scale: number,
 |};
 
-import type {PackagerAsset} from '@react-native/assets-registry/registry';
+import type {
+  AssetDestPathResolver,
+  PackagerAsset,
+} from '@react-native/assets-registry/registry';
 
 const PixelRatio = require('../Utilities/PixelRatio').default;
 const Platform = require('../Utilities/Platform');
@@ -76,6 +79,10 @@ class AssetSourceResolver {
       return this.assetServerURL();
     }
 
+    if (this.asset.resolver != null) {
+      return this.getAssetUsingResolver(this.asset.resolver);
+    }
+
     if (Platform.OS === 'android') {
       return this.isLoadedFromFileSystem()
         ? this.drawableFolderInBundle()
@@ -85,6 +92,26 @@ class AssetSourceResolver {
     }
   }
 
+  getAssetUsingResolver(resolver: AssetDestPathResolver): ResolvedAssetSource {
+    switch (resolver) {
+      case 'android':
+        return this.isLoadedFromFileSystem()
+          ? this.drawableFolderInBundle()
+          : this.resourceIdentifierWithoutScale();
+      case 'generic':
+        return this.scaledAssetURLNearBundle();
+      default:
+        throw new Error(
+          "Don't know how to get asset via provided resolver: " +
+            resolver +
+            '\nAsset: ' +
+            JSON.stringify(this.asset, null, '\t') +
+            '\nPossible resolvers are:' +
+            JSON.stringify(['android', 'generic'], null, '\t'),
+        );
+    }
+  }
+
   /**
    * Returns an absolute URL which can be used to fetch the asset
    * from the devserver

package/Libraries/Image/Image.android.js

@@ -150,24 +150,20 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       );
     }
 
-    let style;
+    let style: ImageStyleProp;
     let sources;
     if (Array.isArray(source)) {
-      style = flattenStyle<ImageStyleProp>([styles.base, props.style]);
+      style = [styles.base, props.style];
       sources = source;
     } else {
       const {uri} = source;
-      const width = source.width ?? props.width;
-      const height = source.height ?? props.height;
-      style = flattenStyle<ImageStyleProp>([
-        {width, height},
-        styles.base,
-        props.style,
-      ]);
-      sources = [source];
       if (uri === '') {
         console.warn('source.uri should not be an empty string');
       }
+      const width = source.width ?? props.width;
+      const height = source.height ?? props.height;
+      style = [{width, height}, styles.base, props.style];
+      sources = [source];
     }
 
     const {height, width, ...restProps} = props;
@@ -203,11 +199,10 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       },
     };
 
-    const objectFit = style?.objectFit
-      ? convertObjectFitToResizeMode(style.objectFit)
-      : null;
+    const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+    const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
     const resizeMode =
-      objectFit || props.resizeMode || style?.resizeMode || 'cover';
+      objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
 
     const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
 

package/Libraries/Image/Image.ios.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {ImageStyle, ImageStyleProp} from '../StyleSheet/StyleSheet';
+import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
 import type {ImageSize} from './NativeImageLoaderAndroid';
@@ -112,38 +112,27 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     height: undefined,
   };
 
+  let style: ImageStyleProp;
   let sources;
-  let style: ImageStyle;
-
   if (Array.isArray(source)) {
-    style =
-      flattenStyle<ImageStyleProp>([styles.base, props.style]) ||
-      ({}: ImageStyle);
+    style = [styles.base, props.style];
     sources = source;
   } else {
     const {uri} = source;
-    const width = source.width ?? props.width;
-    const height = source.height ?? props.height;
-    style =
-      flattenStyle<ImageStyleProp>([
-        {width, height},
-        styles.base,
-        props.style,
-      ]) || ({}: ImageStyle);
-    sources = [source];
-
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
+    const width = source.width ?? props.width;
+    const height = source.height ?? props.height;
+    style = [{width, height}, styles.base, props.style];
+    sources = [source];
   }
 
-  const objectFit =
-    style.objectFit != null
-      ? convertObjectFitToResizeMode(style.objectFit)
-      : null;
+  const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+  const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
   const resizeMode =
-    objectFit || props.resizeMode || style.resizeMode || 'cover';
-  const tintColor = props.tintColor ?? style.tintColor;
+    objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
+  const tintColor = props.tintColor ?? flattenedStyle?.tintColor;
 
   if (props.children != null) {
     throw new Error(

package/Libraries/Image/ImageBackground.js

@@ -55,14 +55,7 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
 
   _viewRef: ?React.ElementRef<typeof View> = null;
 
-  _captureRef = (
-    ref: null | React$ElementRef<
-      React$AbstractComponent<
-        ViewProps,
-        React.ElementRef<HostComponent<ViewProps>>,
-      >,
-    >,
-  ) => {
+  _captureRef = (ref: null | React.ElementRef<HostComponent<ViewProps>>) => {
     this._viewRef = ref;
   };
 

package/Libraries/Image/ImageUtils.js

@@ -10,13 +10,13 @@
 
 type ResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
 
-export function convertObjectFitToResizeMode(objectFit: string): ResizeMode {
-  const objectFitMap = {
-    contain: 'contain',
-    cover: 'cover',
-    fill: 'stretch',
-    'scale-down': 'contain',
-  };
-  // $FlowFixMe[invalid-computed-prop]
-  return objectFitMap[objectFit];
+const objectFitMap: {[string]: ResizeMode} = {
+  contain: 'contain',
+  cover: 'cover',
+  fill: 'stretch',
+  'scale-down': 'contain',
+};
+
+export function convertObjectFitToResizeMode(objectFit: ?string): ?ResizeMode {
+  return objectFit != null ? objectFitMap[objectFit] : undefined;
 }

package/Libraries/Image/ImageViewNativeComponent.js

@@ -50,6 +50,7 @@ interface NativeCommands {
   +setIsVisible_EXPERIMENTAL: (
     viewRef: ElementRef<HostComponent<mixed>>,
     isVisible: boolean,
+    time: number,
   ) => void;
 }
 

package/Libraries/Image/RCTImageLoader.mm

@@ -68,6 +68,8 @@ static NSError *addResponseHeadersToError(NSError *originalError, NSHTTPURLRespo
 @end
 
 @implementation RCTImageLoader {
+  std::atomic<BOOL> _isLoaderSetup;
+  std::mutex _loaderSetupLock;
   NSArray<id<RCTImageURLLoader>> * (^_loadersProvider)(RCTModuleRegistry *);
   NSArray<id<RCTImageDataDecoder>> * (^_decodersProvider)(RCTModuleRegistry *);
   NSArray<id<RCTImageURLLoader>> *_loaders;
@@ -106,6 +108,7 @@ RCT_EXPORT_MODULE()
 {
   if (self = [super init]) {
     _redirectDelegate = redirectDelegate;
+    _isLoaderSetup = NO;
   }
   return self;
 }
@@ -123,12 +126,16 @@ RCT_EXPORT_MODULE()
 
 - (void)setUp
 {
-  // Set defaults
-  _maxConcurrentLoadingTasks = _maxConcurrentLoadingTasks ?: 4;
-  _maxConcurrentDecodingTasks = _maxConcurrentDecodingTasks ?: 2;
-  _maxConcurrentDecodingBytes = _maxConcurrentDecodingBytes ?: 30 * 1024 * 1024; // 30MB
-
-  _URLRequestQueue = dispatch_queue_create("com.facebook.react.ImageLoaderURLRequestQueue", DISPATCH_QUEUE_SERIAL);
+  std::lock_guard<std::mutex> guard(_loaderSetupLock);
+  if (!_isLoaderSetup) {
+    // Set defaults
+    _maxConcurrentLoadingTasks = _maxConcurrentLoadingTasks ?: 4;
+    _maxConcurrentDecodingTasks = _maxConcurrentDecodingTasks ?: 2;
+    _maxConcurrentDecodingBytes = _maxConcurrentDecodingBytes ?: 30 * 1024 * 1024; // 30MB
+
+    _URLRequestQueue = dispatch_queue_create("com.facebook.react.ImageLoaderURLRequestQueue", DISPATCH_QUEUE_SERIAL);
+    _isLoaderSetup = YES;
+  }
 }
 
 - (float)handlerPriority
@@ -156,7 +163,7 @@ RCT_EXPORT_MODULE()
 
 - (id<RCTImageURLLoader>)imageURLLoaderForURL:(NSURL *)URL
 {
-  if (!_maxConcurrentLoadingTasks) {
+  if (!_isLoaderSetup) {
     [self setUp];
   }
 
@@ -229,7 +236,7 @@ RCT_EXPORT_MODULE()
 
 - (id<RCTImageDataDecoder>)imageDataDecoderForData:(NSData *)data
 {
-  if (!_maxConcurrentLoadingTasks) {
+  if (!_isLoaderSetup) {
     [self setUp];
   }
 
@@ -564,7 +571,7 @@ static UIImage *RCTResizeImageIfNeeded(UIImage *image, CGSize size, CGFloat scal
   }
 
   // All access to URL cache must be serialized
-  if (!_URLRequestQueue) {
+  if (!_isLoaderSetup) {
     [self setUp];
   }
 
@@ -840,7 +847,9 @@ static UIImage *RCTResizeImageIfNeeded(UIImage *image, CGSize size, CGFloat scal
                                                                    progressBlock:progressBlock
                                                                 partialLoadBlock:partialLoadBlock
                                                                  completionBlock:completionHandler];
+  [cancelLoadLock lock];
   cancelLoad = loaderRequest.cancellationBlock;
+  [cancelLoadLock unlock];
   return [[RCTImageURLLoaderRequest alloc] initWithRequestId:loaderRequest.requestId
                                                     imageURL:imageURLRequest.URL
                                            cancellationBlock:cancellationBlock];
@@ -977,7 +986,7 @@ static UIImage *RCTResizeImageIfNeeded(UIImage *image, CGSize size, CGFloat scal
       });
     };
 
-    if (!_URLRequestQueue) {
+    if (!_isLoaderSetup) {
       [self setUp];
     }
     dispatch_async(_URLRequestQueue, ^{

package/Libraries/Image/RCTImageView.mm

@@ -446,8 +446,8 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithFrame : (CGRect)frame)
   } else if ([self shouldReloadImageSourceAfterResize]) {
     CGSize imageSize = self.image.size;
     CGFloat imageScale = self.image.scale;
-    CGSize idealSize =
-        RCTTargetSize(imageSize, imageScale, frame.size, RCTScreenScale(), (RCTResizeMode)self.contentMode, YES);
+    CGSize idealSize = RCTTargetSize(
+        imageSize, imageScale, frame.size, RCTScreenScale(), RCTResizeModeFromUIViewContentMode(self.contentMode), YES);
 
     // Don't reload if the current image or target image size is close enough
     if (!RCTShouldReloadImageForSizeChange(imageSize, idealSize) ||

package/Libraries/Image/RCTResizeMode.h

@@ -15,6 +15,34 @@ typedef NS_ENUM(NSInteger, RCTResizeMode) {
   RCTResizeModeRepeat = -1, // Use negative values to avoid conflicts with iOS enum values.
 };
 
+static inline RCTResizeMode RCTResizeModeFromUIViewContentMode(UIViewContentMode mode)
+{
+  switch (mode) {
+    case UIViewContentModeScaleToFill:
+      return RCTResizeModeStretch;
+      break;
+    case UIViewContentModeScaleAspectFit:
+      return RCTResizeModeContain;
+      break;
+    case UIViewContentModeScaleAspectFill:
+      return RCTResizeModeCover;
+      break;
+    case UIViewContentModeCenter:
+      return RCTResizeModeCenter;
+      break;
+    case UIViewContentModeRedraw:
+    case UIViewContentModeTop:
+    case UIViewContentModeBottom:
+    case UIViewContentModeLeft:
+    case UIViewContentModeRight:
+    case UIViewContentModeTopLeft:
+    case UIViewContentModeTopRight:
+    case UIViewContentModeBottomLeft:
+    case UIViewContentModeBottomRight:
+      return RCTResizeModeRepeat;
+  }
+};
+
 @interface RCTConvert (RCTResizeMode)
 
 + (RCTResizeMode)RCTResizeMode:(id)json;

package/Libraries/Image/React-RCTImage.podspec

@@ -45,7 +45,7 @@ Pod::Spec.new do |s|
                                "CLANG_CXX_LANGUAGE_STANDARD" => rct_cxx_language_standard(),
                                "HEADER_SEARCH_PATHS" => header_search_paths.join(' ')
                              }
-  s.framework              = ["Accelerate", "UIKit"]
+  s.framework              = ["Accelerate", "UIKit", "QuartzCore", "ImageIO", "CoreGraphics"]
 
   s.dependency "RCT-Folly", folly_version
   s.dependency "RCTTypeSafety"

package/Libraries/Inspector/Inspector.js

@@ -17,6 +17,7 @@ import type {
 } from '../Renderer/shims/ReactNativeTypes';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
+import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 const View = require('../Components/View/View');
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
@@ -164,7 +165,7 @@ function Inspector({
         />
       )}
 
-      <View style={[styles.panelContainer, panelContainerStyle]}>
+      <SafeAreaView style={[styles.panelContainer, panelContainerStyle]}>
         <InspectorPanel
           devtoolsIsOpen={!!reactDevToolsAgent}
           inspecting={selectedTab === 'elements-inspector'}
@@ -180,7 +181,7 @@ function Inspector({
           networking={selectedTab === 'network-profiling'}
           setNetworking={setNetworking}
         />
-      </View>
+      </SafeAreaView>
     </View>
   );
 }

package/Libraries/Inspector/InspectorPanel.js

@@ -80,16 +80,22 @@ class InspectorPanel extends React.Component<Props> {
             pressed={this.props.inspecting}
             onClick={this.props.setInspecting}
           />
-          <InspectorPanelButton
-            title={'Perf'}
-            pressed={this.props.perfing}
-            onClick={this.props.setPerfing}
-          />
-          <InspectorPanelButton
-            title={'Network'}
-            pressed={this.props.networking}
-            onClick={this.props.setNetworking}
-          />
+          {global.RN$Bridgeless === true ? null : (
+            // These Inspector Panel sub-features are removed under the New Arch.
+            // See https://github.com/react-native-community/discussions-and-proposals/pull/777
+            <>
+              <InspectorPanelButton
+                title={'Perf'}
+                pressed={this.props.perfing}
+                onClick={this.props.setPerfing}
+              />
+              <InspectorPanelButton
+                title={'Network'}
+                pressed={this.props.networking}
+                onClick={this.props.setNetworking}
+              />
+            </>
+          )}
           <InspectorPanelButton
             title={'Touchables'}
             pressed={this.props.touchTargeting}

package/Libraries/Inspector/NetworkOverlay.js

@@ -335,7 +335,7 @@ class NetworkOverlay extends React.Component<Props, State> {
   _renderItem = ({
     item,
     index,
-  }: RenderItemProps<NetworkRequestInfo>): React.Element<any> => {
+  }: RenderItemProps<NetworkRequestInfo>): React.MixedElement => {
     const tableRowViewStyle = [
       styles.tableRow,
       index % 2 === 1 ? styles.tableRowOdd : styles.tableRowEven,

package/Libraries/Interaction/TaskQueue.js

@@ -116,6 +116,7 @@ class TaskQueue {
         }
       } catch (e) {
         e.message =
+          // $FlowFixMe[incompatible-type]
           'TaskQueue: Error with task ' + (task.name || '') + ': ' + e.message;
         throw e;
       }

package/Libraries/LinkingIOS/React-RCTLinking.podspec

@@ -44,6 +44,7 @@ Pod::Spec.new do |s|
                                "CLANG_CXX_LANGUAGE_STANDARD" => rct_cxx_language_standard(),
                                "HEADER_SEARCH_PATHS" => header_search_paths.join(' ')
                              }
+  s.framework = "UIKit"
 
   s.dependency "React-Core/RCTLinkingHeaders", version
   s.dependency "ReactCommon/turbomodule/core", version

package/Libraries/Lists/FlatList.js

@@ -617,7 +617,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   }
 
   _renderer = (
-    ListItemComponent: ?(React.ComponentType<any> | React.Element<any>),
+    ListItemComponent: ?(React.ComponentType<any> | React.MixedElement),
     renderItem: ?RenderItemType<ItemT>,
     columnWrapperStyle: ?ViewStyleProp,
     numColumns: ?number,

package/Libraries/Lists/SectionList.js

@@ -33,7 +33,7 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *
    *     sections: $ReadOnlyArray<{
    *       data: $ReadOnlyArray<SectionItem>,
-   *       renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
+   *       renderItem?: ({item: SectionItem, ...}) => ?React.MixedElement,
    *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
    *     }>
    */
@@ -55,7 +55,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
       ...
     },
     ...
-  }) => null | React.Element<any>,
+  }) => null | React.Node,
   /**
    * A marker property for telling the list to re-render (since it implements `PureComponent`). If
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the

package/Libraries/Lists/SectionListModern.js

@@ -16,7 +16,7 @@ import type {
   SectionBase as _SectionBase,
   VirtualizedSectionListProps,
 } from '@react-native-tvos/virtualized-lists';
-import type {AbstractComponent, Element, ElementRef} from 'react';
+import type {AbstractComponent, ElementRef} from 'react';
 
 import Platform from '../Utilities/Platform';
 import {VirtualizedSectionList} from '@react-native-tvos/virtualized-lists';
@@ -34,7 +34,7 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *
    *     sections: $ReadOnlyArray<{
    *       data: $ReadOnlyArray<SectionItem>,
-   *       renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
+   *       renderItem?: ({item: SectionItem, ...}) => ?React.MixedElement,
    *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
    *     }>
    */
@@ -56,7 +56,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
       ...
     },
     ...
-  }) => null | Element<any>,
+  }) => null | React.MixedElement,
   /**
    * A marker property for telling the list to re-render (since it implements `PureComponent`). If
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the