Expo

Build mobile apps using React and React Native

npm i material-bread

yarn add material-bread

Install Expo

Follow the instructions on Expo's Get Started guide to make sure you have everything installed. Or run the following

npm install expo-cli --global
expo init my-new-project
cd my-new-project
expo start

Dependencies

Expo already has react-native-vector-icons setup, so we only need to install react-native-svg , and we're ready to start adding components.

Expo Web

Expo web should run fine, but we need to provide the MaterialIcon font to the browser. First we need to generate the index.html to insert the font in the head. Run the following and select index.html :

expo customize:web

Next we need to download the font file, MaterialIcons.ttf , go to react-native-vector-icons repoto download it. Add this file to a new web folder at the root.

Finally, go to the index.html and add the following to the bottom of the <style> element.

@font-face {
    src: url(./MaterialIcons.ttf);
    font-family: MaterialIcons;
}

Now you can run the following and start adding components with icons

expo start -w

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>
    );
  }
}

If you're confused, check out thes example repo with Material Bread set up

Expo Example

Expo

Install #

Setup #

Install Expo

Dependencies

Expo Web

Usage #

Examples #