diff --git a/docs/apis/AppRegistry.md b/docs/apis/AppRegistry.md index 46db60e3..f8cf14f0 100644 --- a/docs/apis/AppRegistry.md +++ b/docs/apis/AppRegistry.md @@ -16,8 +16,11 @@ into `runApplication`. These should always be used as a pair. (web) static **prerenderApplication**(appKey:string, appParameters: object) Renders the given application to an HTML string. Use this for server-side -rendering. Return object is of type `{ html: string; style: string; }`, where -`html` the prerendered HTML, and `style` is the prerendered style sheet. +rendering. Return object is of type `{ html: string; style: string; +styleElement: ReactComponent }`. `html` is the prerendered HTML, `style` is the +prerendered style sheet, and `styleElement` is a React Component. It's +recommended that you use `styleElement` to render the style sheet in an app +shell. static **registerConfig**(config: Array) diff --git a/docs/guides/rendering.md b/docs/guides/rendering.md index ffb9cc77..89ed5786 100644 --- a/docs/guides/rendering.md +++ b/docs/guides/rendering.md @@ -33,7 +33,7 @@ React.renderToStaticMarkup(
) Rendering using the `AppRegistry`: -``` +```js // App.js import React, { AppRegistry } from 'react-native' @@ -64,12 +64,12 @@ rendering. import React from 'react-native' -const AppShell = (html, style) => ( +const AppShell = (html, styleElement) => ( - {style} + {styleElement}
@@ -90,8 +90,8 @@ import AppShell from './AppShell' AppRegistry.registerComponent('App', () => App) // prerenders the app -const { html, style } = AppRegistry.prerenderApplication('App', { initialProps }) +const { html, style, styleElement } = AppRegistry.prerenderApplication('App', { initialProps }) // renders the full-page markup -const renderedApplicationHTML = React.renderToString() +const renderedApplicationHTML = React.renderToStaticMarkup() ``` diff --git a/src/apis/AppRegistry/__tests__/renderApplication-test.js b/src/apis/AppRegistry/__tests__/renderApplication-test.js index e69de29b..74794bfd 100644 --- a/src/apis/AppRegistry/__tests__/renderApplication-test.js +++ b/src/apis/AppRegistry/__tests__/renderApplication-test.js @@ -0,0 +1,20 @@ +/* eslint-env mocha */ + +import assert from 'assert' +import React from 'react' +import { elementId } from '../../StyleSheet' +import { prerenderApplication } from '../renderApplication' + +const component = () =>
+ +suite('apis/AppRegistry/renderApplication', () => { + test('prerenderApplication', () => { + const { html, style, styleElement } = prerenderApplication(component, {}) + + assert.ok(html.indexOf('
-1) + assert.ok(typeof style === 'string') + assert.equal(styleElement.type, 'style') + assert.equal(styleElement.props.id, elementId) + assert.equal(styleElement.props.dangerouslySetInnerHTML.__html, style) + }) +}) diff --git a/src/apis/AppRegistry/renderApplication.js b/src/apis/AppRegistry/renderApplication.js index 02ebb18d..ada932d4 100644 --- a/src/apis/AppRegistry/renderApplication.js +++ b/src/apis/AppRegistry/renderApplication.js @@ -13,14 +13,16 @@ import ReactDOMServer from 'react-dom/server' import ReactNativeApp from './ReactNativeApp' import StyleSheet from '../../apis/StyleSheet' -const renderStyleSheetToString = () => `` +const renderStyleSheetToString = () => StyleSheet._renderToString() +const styleAsElement = (style) => ` export default function renderApplication(RootComponent: Component, initialProps: Object, rootTag: any) { invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag) // insert style sheet if needed const styleElement = document.getElementById(StyleSheet.elementId) - if (!styleElement) { rootTag.insertAdjacentHTML('beforebegin', renderStyleSheetToString()) } + if (!styleElement) { rootTag.insertAdjacentHTML('beforebegin', styleAsTagString(renderStyleSheetToString())) } const component = (