Web

Run React Native components on the web

npm i material-bread

yarn add material-bread

The following guide is for setting up a minimal configuration for react-native-weband Material Bread. Please see the example repo for the full code.

React Native Web

First

npm i react-native-web react-dom react-art modal-enhanced-react-native-web react-native-svg

then set up webpack to alias react-native

 resolve: {
  alias: {
    "react-native": "react-native-web"
  },
  extensions: [".web.js", ".js"]
},

Install Material Icons as font

Material Icons need to be installed as a font, first add the font to a css file called global.css

 @font-face {
  src: url(../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf);
  font-family: MaterialIcons;
}

Then include it in your App component or include it as a link in index.html

import React, { Component } from "react";
import "./styles/global.css";

class App extends Component {
  render() {
    return <Router />;
  }
}

export default App;

TFF Loader

You'll also need to add a TFF loader to load the font

 rules: [
  {
    test: /.(png|woff|woff2|eot|ttf|svg)$/,
    loader: "url-loader?limit=100000"
  }
]

Babel Loader

Finally you'll need to exclude both Material Bread and react-native-vector-icons , as well as add a few babel packages.

rules: [
    {
      test: /.(js|jsx)$/,
      exclude: /node_modules/(?!(material-bread|react-native-vector-icons)/).*/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: [
            "@babel/plugin-transform-flow-strip-types",
            "@babel/plugin-proposal-class-properties",
            "@babel/plugin-proposal-object-rest-spread",
            "@babel/plugin-transform-runtime",
          ]
        }
      }
},

Finish

You should now be able to add Material Bread components. If you're stuck please checkout the example repo below

Simply wrap your app or root in the BreadProvider and start developing. You can learn about customizing on the theme page.


import React, { Component } from "react";
import Root from "./Root";
import { BreadProvider } from "material-bread";

export default class App extends Component {
  render() {
    return (
      <BreadProvider>
        <Root />
      </BreadProvider>
    );
  }
}

For a quick start with minimal set up with react-native-web and materal-bread , checkout the example below

Minimal React Example

Web

Install #

Setup #

React Native Web

Install Material Icons as font

TFF Loader

Babel Loader

Finish

Usage #

Examples #