How to use the react-native-web.AppRegistry.getApplication function in react-native-web

To help you get started, we’ve selected a few react-native-web examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github paularmstrong / build-tracker / src / app / src / server / index.tsx View on Github external
export function getPageHTML(nonce: string, state: Partial, scripts: Array): string {
  const store = makeStore(state);
  const { name } = store.getState();

  // @ts-ignore
  const { element, getStyleElement } = AppRegistry.getApplication('App', { initialProps: { store } });
  const html = ReactDOMServer.renderToString(element);
  const css = ReactDOMServer.renderToStaticMarkup(getStyleElement({ nonce }));

  return `



<title>${name === 'Build Tracker' ? name : `${name} : Build Tracker`}</title>

<style nonce="${nonce}">html,body{height:100%;overflow-y:hidden;}#root{display:flex;height:100%;}</style>
${css}

<div id="root">${html}</div>
<div id="menuPortal"></div>
<div id="tooltipPortal"></div>
<div id="snackbarPortal"></div>
github msand / InfiniDraw / pages / _document.js View on Github external
static async getInitialProps({ renderPage }) {
    AppRegistry.registerComponent('Main', () =&gt; Main);
    const { getStyleElement } = AppRegistry.getApplication('Main');
    const page = renderPage();
    const styles = [
      <style>,
      getStyleElement(),
    ];
    return { ...page, styles };
  }
</style>
github AvenCloud / aven-legacy / src / ServerApp.js View on Github external
App,
  props,
  res,
  path,
  docID,
  clientAgent,
  clientScriptID,
) {
  res.set("content-type", "text/html");
  // Horrible horrible horrible hacks to support react native web styles:
  const appKey = `App-${docID}-${path}`;
  const appKeys = AppRegistry.getAppKeys();
  if (appKeys.indexOf(appKey) === -1) {
    AppRegistry.registerComponent(appKey, () =&gt; App);
  }
  const { element, getStyleElement } = AppRegistry.getApplication(appKey, {
    initialProps: props,
  });
  const appHtml = ReactDOMServer.renderToString(element);
  const css = ReactDOMServer.renderToStaticMarkup(getStyleElement());

  const title = App.title;
  const html = `






<title>${title}</title>
${css}
github reframejs / goldpage / plugins / react-native-web / htmlRender.js View on Github external
async function htmlRender({page, initialProps, CONTAINER_ID}) {
  /*
  AppRegistry.registerComponent('App', () =&gt; page.view);
  /*/
  const viewElement = React.createElement(page.view, initialProps);
  AppRegistry.registerComponent('App', () =&gt; () =&gt; viewElement);
  //*/

  const { element, getStyleElement } = AppRegistry.getApplication('App', { initialProps });

  const viewHtml = ReactDOMServer.renderToStaticMarkup(element);

  // Bug: `styleHtml` doesn't inlcude user defined styles
  // Likely solution: make sure that all of react-native-web is compiled with webpack
  const styleHtml = ReactDOMServer.renderToStaticMarkup(getStyleElement());

  return {
    head: [
      styleHtml,
    ],
    body: [
      '<div id="'+CONTAINER_ID+'">'+viewHtml+'</div>',
    ]
  };
}
github celo-org / celo-monorepo / packages / web / pages / _document.tsx View on Github external
static async getInitialProps(context: DocumentContext &amp; PropContext) {
    const locale = context.req.locale
    const userAgent = context.req.headers['user-agent']
    setDimensionsForScreen(userAgent)

    AppRegistry.registerComponent('Main', () =&gt; Main)

    // Use RTL layout for appropriate locales. Remember to do this client-side too.
    I18nManager.setPreferredLanguageRTL(isLocaleRTL(locale))

    // Get the html and styles needed to render this page.
    const { getStyleElement } = AppRegistry.getApplication('Main')
    const page = context.renderPage()
    const styles = React.Children.toArray([
      // <style>,
      getStyleElement(),
    ])

    if (context.err) {
      Sentry.captureException(context.err)
    }

    return { ...page, locale, styles: React.Children.toArray(styles), pathname: context.pathname }
  }
</style>
github skidding / jobs-done / tools / shared / renderIndex.js View on Github external
export function renderIndex({ scriptFilename }) {
  AppRegistry.registerComponent('Main', () =&gt; Root);
  const { getStyleElement } = AppRegistry.getApplication('Main');

  const content = renderToStaticMarkup();
  const style = renderToStaticMarkup(getStyleElement());

  return `

  
    
    <title>Jobs Done!</title>
    
    
    
github codymurphyjones / NativeCore / packages / website / pages / _document.js View on Github external
static async getInitialProps({ renderPage }) {
    AppRegistry.registerComponent("Main", () =&gt; Main);
    const { getStyleElement } = AppRegistry.getApplication("Main");
    const page = renderPage();
    const styles = [
      <style>,
      getStyleElement()
    ];
    return {
      ...page,
      styles: React.Children.toArray(styles)
    };
  }
</style>