mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Ramanpreet Nara
7b9490b4b1
Summary: ## Impact Fix the Static ViewConfig for <View/>. This diff fixes the base ViewConfig for all HostComponents on both platforms. Consequently, it simplifies SVC reconciliation efforts, by nearly eliminating the first of these classes of SVC errors: 1. Unexpected properties in SVC 2. Missing properties in SVC 3. Not matching properites in SVC ## What is the base ViewConfig on each iOS/Android? **On iOS:** - All props come from ViewManagers - All HostComponent ViewManagers extend <View/> ViewManager https://pxl.cl/1SxdF Therefore, the base ViewConfig for all components should be <View/>'s static ViewConfig. **On Android:** The component model is a bit more complicated: https://pxl.cl/1Vmp5 Takeaways: - Props come from Shadow Nodes **and** ViewManagers - Nearly all HostComponent ViewManagers extend BaseViewManager. But, that's not <View/>'s ViewManager. - <View/>'s ViewManager is [ReactViewManager](https://fburl.com/code/0zalv8zk), which is a descendent of BaseViewManager, and declares its own ReactProps. So, on Android, it's not safe for the base ViewConfig to be <View>'s ViewConfig: 1. No components actualy incorportate <View/>'s props 2. Some components don't even incorporate BaseViewManager's props. So, what should the base ViewConfig be on Android? - Nearly all components extend BaseViewManager. BaseViewManager must have a shadow node [that extends LayoutShadowNode](https://www.internalfb.com/code/fbsource/[47d68ebc06e64d97da9d069f1ab662b392f0df8a]/xplat/js/react-native-github/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java?lines=40). Therefore, we'll make the base ViewConfig on Android be generated by BaseViewManager + LayoutShadowNode. ## Changes In this diff, I removed ReactNativeViewViewConfig, and introduced a new view config called PlatformBaseViewConfig. This ViewConfig partial will capture all the props available on all HostComponents on **both** platforms. This may not necessarily be the props made available on <View/>. The only components that don't extend the base platform props are: RCTTextInlineImage. What we do with these components is TBD. Changelog: [Internal] Reviewed By: p-sun, yungsters Differential Revision: D33135055 fbshipit-source-id: 7299f60ae45ed499ce47c0d0a6309a047bff90bb
78 lines
2.6 KiB
JavaScript
78 lines
2.6 KiB
JavaScript
/**
|
|
* 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.
|
|
*
|
|
* @flow
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
if (__DEV__) {
|
|
let isWebSocketOpen = false;
|
|
let ws = null;
|
|
|
|
const reactDevTools = require('react-devtools-core');
|
|
const connectToDevTools = () => {
|
|
if (ws !== null && isWebSocketOpen) {
|
|
// If the DevTools backend is already connected, don't recreate the WebSocket.
|
|
// This would break the connection.
|
|
// If there isn't an active connection, a backend may be waiting to connect,
|
|
// in which case it's okay to make a new one.
|
|
return;
|
|
}
|
|
|
|
// not when debugging in chrome
|
|
// TODO(t12832058) This check is broken
|
|
if (!window.document) {
|
|
const AppState = require('../AppState/AppState');
|
|
const getDevServer = require('./Devtools/getDevServer');
|
|
|
|
// Don't steal the DevTools from currently active app.
|
|
// Note: if you add any AppState subscriptions to this file,
|
|
// you will also need to guard against `AppState.isAvailable`,
|
|
// or the code will throw for bundles that don't have it.
|
|
const isAppActive = () => AppState.currentState !== 'background';
|
|
|
|
// Get hostname from development server (packager)
|
|
const devServer = getDevServer();
|
|
const host = devServer.bundleLoadedFromServer
|
|
? devServer.url.replace(/https?:\/\//, '').split(':')[0]
|
|
: 'localhost';
|
|
|
|
// Read the optional global variable for backward compatibility.
|
|
// It was added in https://github.com/facebook/react-native/commit/bf2b435322e89d0aeee8792b1c6e04656c2719a0.
|
|
const port =
|
|
window.__REACT_DEVTOOLS_PORT__ != null
|
|
? window.__REACT_DEVTOOLS_PORT__
|
|
: 8097;
|
|
|
|
const WebSocket = require('../WebSocket/WebSocket');
|
|
ws = new WebSocket('ws://' + host + ':' + port);
|
|
ws.addEventListener('close', event => {
|
|
isWebSocketOpen = false;
|
|
});
|
|
ws.addEventListener('open', event => {
|
|
isWebSocketOpen = true;
|
|
});
|
|
|
|
const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
|
|
|
|
reactDevTools.connectToDevTools({
|
|
isAppActive,
|
|
resolveRNStyle: require('../StyleSheet/flattenStyle'),
|
|
nativeStyleEditorValidAttributes: Object.keys(
|
|
ReactNativeStyleAttributes,
|
|
),
|
|
websocket: ws,
|
|
});
|
|
}
|
|
};
|
|
|
|
const RCTNativeAppEventEmitter = require('../EventEmitter/RCTNativeAppEventEmitter');
|
|
RCTNativeAppEventEmitter.addListener('RCTDevMenuShown', connectToDevTools);
|
|
connectToDevTools(); // Try connecting once on load
|
|
}
|