Bulma Native screenshot

Bulma Native

Author Avatar Theme by Jessicarobins
Updated: 9 May 2020
10 Stars

React Native port of Bulma components

Categories

Overview:

Bulma Native is a React Native port of the Bulma CSS component library. This guide provides information on how to get started and install Bulma Native components in a React Native app. It also includes documentation and a caveat regarding the accuracy of component rendering on different devices.

Features:

  • React Native Port: Bulma Native is a port of the Bulma CSS component library specifically for React Native.
  • Integration with React Native Projects: Bulma Native can be used with both Expo and vanilla React Native projects.
  • Icon Support: In order to use components with icons, React Native Vector Icons need to be installed. Expo users have access to icons via the @expo/vector-icons library.

Installation:

To install Bulma Native, follow these steps:

  1. Set up a React Native project by referring to the React Native documentation.
  2. Install Bulma Native by running the following command in your project directory:
npm install bulma-native
  1. If you want to use components with icons and you are not using Expo, install React Native Vector Icons by following its installation instructions.

For more information on icon installation and usage, and setting up theming, refer to the Bulma Native Storybook page for Icons documentation.

Summary:

Bulma Native is a React Native port of the popular Bulma CSS component library. It provides a seamless integration with React Native projects and offers support for icons. The official documentation, available in the Bulma Native Storybook, allows users to preview components, view and interactively set their properties, and copy sample code. However, it’s important to note that the components might not look exactly the same on different devices. The Image component also has limitations, as it relies on a React Native-specific prop and does not display on web. The development team is currently working on a solution for this issue.