mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Oskar Kwaśniewski
ec928d7a66
Summary:
This PR implements `RCTRootViewFactory` a utility class (suggested by cipolleschi) that returns proper RCTRootView based on the current environment state (new arch/old arch/bridgeless). This class aims to preserve background compatibility by implementing a configuration class forwarding necessary class to RCTAppDelegate.
### Brownfield use case
This PR leverages the `RCTRootViewFactory` in `RCTAppDelegate` for the default initialization of React Native (greenfield).
Here is an example of creating a Brownfield integration (without RCTAppDelegate) using this class (can be later added to docs):
1. Store reference to `rootViewFactory` and to `UIWindow`
`AppDelegate.h`:
```objc
interface AppDelegate : UIResponder <UIApplicationDelegate>
property(nonatomic, strong) UIWindow* window;
property(nonatomic, strong) RCTRootViewFactory* rootViewFactory;
end
```
2. Create an initial configuration using `RCTRootViewFactoryConfiguration` and initialize `RCTRootViewFactory` using it. Then you can use the factory to create a new `RCTRootView` without worrying about old arch/new arch/bridgeless.
`AppDelegate.mm`
```objc
implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey,id> *)launchOptions {
// Create configuration
RCTRootViewFactoryConfiguration *configuration = [[RCTRootViewFactoryConfiguration alloc] initWithBundleURL:self.bundleURL
newArchEnabled:self.fabricEnabled
turboModuleEnabled:self.turboModuleEnabled
bridgelessEnabled:self.bridgelessEnabled];
// Initialize RCTRootViewFactory
self.rootViewFactory = [[RCTRootViewFactory alloc] initWithConfiguration:configuration];
// Create main root view
UIView *rootView = [self.rootViewFactory viewWithModuleName:@"RNTesterApp" initialProperties:@{} launchOptions:launchOptions];
// Set main window as you prefer for your Brownfield integration.
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
// Later in the codebase you can initialize more rootView's using rootViewFactory.
return YES;
}
end
```
bypass-github-export-checks
## Changelog:
[INTERNAL] [ADDED] - Implement RCTRootViewFactory
Pull Request resolved: https://github.com/facebook/react-native/pull/42263
Test Plan: Check if root view is properly created on app initialization
Reviewed By: dmytrorykun
Differential Revision: D53179625
Pulled By: cipolleschi
fbshipit-source-id: 9bc850965ba30d84ad3e67d91dd888f0547c2136
113 lines
3.0 KiB
Plaintext
113 lines
3.0 KiB
Plaintext
/*
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
#import "FlexibleSizeExampleView.h"
|
|
|
|
#import <React/RCTBridge.h>
|
|
#import <React/RCTRootView.h>
|
|
#import <React/RCTRootViewDelegate.h>
|
|
#import <React/RCTViewManager.h>
|
|
|
|
#import "AppDelegate.h"
|
|
|
|
@interface FlexibleSizeExampleViewManager : RCTViewManager
|
|
|
|
@end
|
|
|
|
@implementation FlexibleSizeExampleViewManager
|
|
|
|
RCT_EXPORT_MODULE();
|
|
|
|
- (UIView *)view
|
|
{
|
|
return [FlexibleSizeExampleView new];
|
|
}
|
|
|
|
@end
|
|
|
|
@interface FlexibleSizeExampleView () <RCTRootViewDelegate>
|
|
|
|
@end
|
|
|
|
@implementation FlexibleSizeExampleView {
|
|
RCTRootView *_resizableRootView;
|
|
UITextView *_currentSizeTextView;
|
|
BOOL _sizeUpdated;
|
|
}
|
|
|
|
- (instancetype)initWithFrame:(CGRect)frame
|
|
{
|
|
if ((self = [super initWithFrame:frame])) {
|
|
_sizeUpdated = NO;
|
|
|
|
AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
|
|
|
|
_resizableRootView =
|
|
(RCTRootView *)[appDelegate.rootViewFactory viewWithModuleName:@"RootViewSizeFlexibilityExampleApp"];
|
|
|
|
[_resizableRootView setSizeFlexibility:RCTRootViewSizeFlexibilityHeight];
|
|
|
|
_currentSizeTextView = [UITextView new];
|
|
#ifndef TARGET_OS_TV
|
|
_currentSizeTextView.editable = NO;
|
|
#endif
|
|
_currentSizeTextView.text = @"Resizable view has not been resized yet";
|
|
_currentSizeTextView.textColor = [UIColor blackColor];
|
|
_currentSizeTextView.backgroundColor = [UIColor whiteColor];
|
|
_currentSizeTextView.font = [UIFont boldSystemFontOfSize:10];
|
|
|
|
_resizableRootView.delegate = self;
|
|
|
|
[self addSubview:_currentSizeTextView];
|
|
[self addSubview:_resizableRootView];
|
|
}
|
|
return self;
|
|
}
|
|
|
|
- (void)layoutSubviews
|
|
{
|
|
float textViewHeight = 60;
|
|
float spacingHeight = 10;
|
|
[_resizableRootView
|
|
setFrame:CGRectMake(
|
|
0, textViewHeight + spacingHeight, self.frame.size.width, _resizableRootView.frame.size.height)];
|
|
[_currentSizeTextView setFrame:CGRectMake(0, 0, self.frame.size.width, textViewHeight)];
|
|
}
|
|
|
|
- (NSArray<UIView<RCTComponent> *> *)reactSubviews
|
|
{
|
|
// this is to avoid unregistering our RCTRootView when the component is removed from RN hierarchy
|
|
(void)[super reactSubviews];
|
|
return @[];
|
|
}
|
|
|
|
#pragma mark - RCTRootViewDelegate
|
|
|
|
- (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView
|
|
{
|
|
CGRect newFrame = rootView.frame;
|
|
newFrame.size = rootView.intrinsicContentSize;
|
|
|
|
if (!_sizeUpdated) {
|
|
_sizeUpdated = TRUE;
|
|
_currentSizeTextView.text = [NSString
|
|
stringWithFormat:
|
|
@"RCTRootViewDelegate: content with initially unknown size has appeared, updating root view's size so the content fits."];
|
|
|
|
} else {
|
|
_currentSizeTextView.text =
|
|
[NSString stringWithFormat:
|
|
@"RCTRootViewDelegate: content size has been changed to (%ld, %ld), updating root view's size.",
|
|
(long)newFrame.size.width,
|
|
(long)newFrame.size.height];
|
|
}
|
|
|
|
rootView.frame = newFrame;
|
|
}
|
|
|
|
@end
|