diff --git a/packages/react-native-web/src/exports/AppRegistry/AppContainer.js b/packages/react-native-web/src/exports/AppRegistry/AppContainer.js index 3c11222a..1f17fbcd 100644 --- a/packages/react-native-web/src/exports/AppRegistry/AppContainer.js +++ b/packages/react-native-web/src/exports/AppRegistry/AppContainer.js @@ -8,16 +8,11 @@ * @flow */ -import type { ComponentType } from 'react'; +import type { ComponentType, Context } from 'react'; import StyleSheet from '../StyleSheet'; import View from '../View'; -import { any } from 'prop-types'; -import React from 'react'; - -type Context = { - rootTag: any -}; +import React, { createContext } from 'react'; type Props = { WrapperComponent?: ?ComponentType<*>, @@ -26,44 +21,26 @@ type Props = { rootTag: any }; -type State = { - mainKey: number -}; +const RootTagContext: Context = createContext(null); -export default class AppContainer extends React.Component { - state = { mainKey: 1 }; +export default function AppContainer(props: Props) { + const { children, WrapperComponent } = props; - static childContextTypes = { - rootTag: any - }; + let innerView = ( + + ); - getChildContext(): Context { - return { - rootTag: this.props.rootTag - }; + if (WrapperComponent) { + innerView = {innerView}; } - render() { - const { children, WrapperComponent } = this.props; - let innerView = ( - - ); - - if (WrapperComponent) { - innerView = {innerView}; - } - - return ( + return ( + {innerView} - ); - } + + ); } const styles = StyleSheet.create({ diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js index 40312eeb..b81e6c58 100644 --- a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.js @@ -4,21 +4,16 @@ import AppRegistry from '..'; import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment'; import React from 'react'; import ReactDOMServer from 'react-dom/server'; -import { render } from 'enzyme'; +import { render } from '@testing-library/react'; import StyleSheet from '../../StyleSheet'; import Text from '../../Text'; import View from '../../View'; +const canUseDOM = ExecutionEnvironment.canUseDOM; const NoopComponent = () =>
; -const styles = StyleSheet.create({ root: { borderWidth: 1234, backgroundColor: 'purple' } }); -const RootComponent = () => ; -const AlternativeComponent = () => ; - describe('AppRegistry', () => { describe('getApplication', () => { - const canUseDOM = ExecutionEnvironment.canUseDOM; - beforeEach(() => { ExecutionEnvironment.canUseDOM = false; }); @@ -56,6 +51,10 @@ describe('AppRegistry', () => { return getStyleElement().props.dangerouslySetInnerHTML.__html; }; + const styles = StyleSheet.create({ root: { borderWidth: 1234, backgroundColor: 'purple' } }); + const RootComponent = () => ; + const AlternativeComponent = () => ; + // First render "RootComponent" AppRegistry.registerComponent('App', () => RootComponent); const first = getApplicationStyles('App'); diff --git a/packages/react-native-web/src/exports/AppRegistry/index.js b/packages/react-native-web/src/exports/AppRegistry/index.js index ce8c1f5f..cbfffccd 100644 --- a/packages/react-native-web/src/exports/AppRegistry/index.js +++ b/packages/react-native-web/src/exports/AppRegistry/index.js @@ -8,10 +8,11 @@ * @flow */ +import type { ComponentType } from 'react'; + import invariant from 'fbjs/lib/invariant'; import unmountComponentAtNode from '../unmountComponentAtNode'; import renderApplication, { getApplication } from './renderApplication'; -import type { ComponentType } from 'react'; const emptyObject = {}; const runnables = {}; diff --git a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js index ecc09783..2d0466a7 100644 --- a/packages/react-native-web/src/exports/AppRegistry/renderApplication.js +++ b/packages/react-native-web/src/exports/AppRegistry/renderApplication.js @@ -8,12 +8,14 @@ * @flow */ +import type { ComponentType } from 'react'; + import AppContainer from './AppContainer'; import invariant from 'fbjs/lib/invariant'; import hydrate from '../../modules/hydrate'; import render from '../render'; import styleResolver from '../StyleSheet/styleResolver'; -import React, { type ComponentType } from 'react'; +import React from 'react'; export default function renderApplication( RootComponent: ComponentType,