How to use react-native-web - 10 common examples

runApplication(code) {
    const {AppRegistry} = require('react-native-web')

    const screenElement = this.refs.phone.getScreenNode()

    this.resetApplication()

    this.props.onRun()

    try {
      this.evaluate(code)

      AppRegistry.runApplication('MyApp', {
        rootTag: screenElement,
      })
    } catch (e) {
      // console.log('Failed to run MyApp', e)
      this.props.onError(e)
    }
  }

|};
const Div = props => createElement("div", props);
// eslint-disable-next-line react/no-multi-comp
const BackgroundGradient = (props: PropsType) => (
  <div style="{[">
    {props.children}
  </div>
);

const styles = StyleSheet.create({
  container: {
    position: "relative",
    display: "flex",
    flexDirection: "column",
  },
});

const makeGradient = (start, end, direction = "to bottom right") =&gt; ({
  backgroundColor: start,
  background: `linear-gradient(${direction}, ${start}, ${end})`,
});

export default BackgroundGradient;

{this.state.fetchingNextPage ?  : null}
      
    )
  }
}

interface Styles {
  container: ViewStyle,
  section: ViewStyle,
  spinner: ViewStyle,
}

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "row",
  } as ViewStyle, // FIXME: Needed because `display` is not a prop that non-web RN has.
  section: {
    // flex: "1 0 0px",
    flex: 1,
    flexDirection: "column",
    marginRight: 20,
    maxWidth: 300,
  },
  spinner: {
    marginTop: 20,
  },
})

// @flow

import * as React from "react";
import { StyleSheet, View } from "react-native-web";

const BodyContainer = (props: Object) => (
  
);

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    width: "100%",
    maxWidth: 700,
    marginLeft: "auto",
    marginRight: "auto",
  },
});

export default BodyContainer;

const LONG_DELAY = 3500; // 3.5 seconds
const SHORT_DELAY = 2000; // 2 seconds

let Toast = {

  SHORT: SHORT_DELAY,
  LONG: LONG_DELAY,

  show: function(message, duration) {
    Portal.showModal('toast', );
    setTimeout(()=>Portal.closeModal('toast'), duration);
  },
};

let styles = StyleSheet.create({
  container: {
    backgroundColor: 'rgba(0,0,0,.65)',
    color: '#ffffff',
    padding: '5 12',
    position: 'absolute',
    left: '50%',
    bottom: 20,
    fontSize: 14,
    lineHeight: 18,
    borderRadius: 2,
    transform: 'translateX(-50%)'
  },
});

export default Toast;

const Div = props => createElement("div", props);
// eslint-disable-next-line react/no-multi-comp

async function respondWithApp(
  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, () => 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>

static getInitialProps({ renderPage }: (cb: Function) => void) {
    AppRegistry.registerComponent('Main', () => Main);
    // $FlowFixMe Wrong libdef. https://gist.github.com/paularmstrong/f60b40d16fc83e1e8e532d483336f9bb
    const { getStyleElement } = AppRegistry.getApplication('Main');
    const page = renderPage();

    const styles = [
      // eslint-disable-next-line react/jsx-key
      <style>,
      getStyleElement(),
    ];
    return { ...page, styles: React.Children.toArray(styles) };
  }
</style>

);
  }
}

function sleep(n: number) {
  return new Promise(resolve => setTimeout(resolve, n));
}

class Display extends React.Component<{}, { screen: number }> {
  state = { screen: 0 };
  render() {
    return  } />;
  }
}

AppRegistry.registerComponent('App', () => Display);

AppRegistry.runApplication('App', {
  initialProps: {},
  rootTag: window.root,
});

// A <-> B <-> C
//
//  content
//     set to position A'
//     put that inside another

// @flow

import { AppRegistry } from 'react-native-web'

import './index.css'
import Onyx from './Onyx'

document.addEventListener('dragover', event => event.preventDefault())
document.addEventListener('drop', event => event.preventDefault())

AppRegistry.registerComponent('Onyx', () => Onyx)
AppRegistry.runApplication('Onyx', {
  rootTag: document.getElementById('root'),
})