Introduction

This page is a stub.

Component library compatible with Expo/React Native projects as well as React applications.

Relies on react-native-web to port components, written with a React Native first approach, to the web.

📘 Storybook | 📚 Documentation

Usage

yarn install @kiwicom/universal-components
# Only for React Native
react-native link @kiwicom/universal-components

In Expo projects

Since react-native link is not available in Expo, we need to load the fonts at the root of the application. Your App.js should look like

import React from "react";
import { View } from "react-native";
import { Icon, Text, PageLoader } from "@kiwicom/universal-components";
import { Font } from "expo";
import { Fonts } from "@kiwicom/universal-components";

export default class App extends React.Component {
  state = {
    fontLoaded: false
  };

  componentDidMount() {
    Font.loadAsync({
      "orbit-icons": Fonts.OrbitIcons,
      Roboto: Fonts.Roboto,
      RobotoItalic: Fonts.RobotoItalic,
      RobotoBold: Fonts.RobotoBold,
      RobotoBoldItalic: Fonts.RobotoBoldItalic
    }).then(() => {
      this.setState({ fontLoaded: true });
    });
  }

  render() {
    return this.state.fontLoaded ? (
      <View>
        <Text>Open up App.js to start working on your app!</Text>
        <Icon name="calendar" />
      </View>
    ) : (
      <PageLoader />
    );
  }
}

For more information, consult the documentation on expo.io.

Note: For web projects, you need to ensure you support the .web.js extension. create-react-app already supports it by default.

Contributing

See the contributing section.

Forward your suggestions, issues and bugs here (use the universal-components label).