@jcribeiro/native-base-web

NativeBase for react-native-web

Stats

StarsIssuesVersionUpdatedCreatedSize
@jcribeiro/native-base-web
0.0.44 years ago4 years agoMinified + gzip package size for @jcribeiro/native-base-web in KB

Readme

NativeBase for Web

npm version

native-base-web is a project to bring NativeBase components to the Web, with the help of react-native-web.

Docs & Demo

NativeBase for Web Gitbook

Live demo here! Browse it on your iPhone6+/Android4.4.4+ devices.

Compatibility

Currently supports Safari on iPhone6 or newer with IOS9/10, Android Browser on Android4.4.4 or newer, Chrome/Safari on both mobile and desktop.

Quick Start

It's advised to use our boilerplate to initialize your app structure.

Manual Setup

To install:

npm install --save native-base-web

native-base-web is depended on react-native-web. Install it if you have not yet configured your app structure:

npm install --save react-native-web

Setup resolve alias in your webpack configuration:

resolve: {
    alias: {
        'react-native': 'react-native-web',
        'native-base' : 'native-base-web',
        'react/lib/ReactNativePropRegistry': 'react-native-web/dist/modules/ReactNativePropRegistry'
    }
}

Alternatively, you can use react-native-web-extended instead of react-native-web for extended components and APIs, in which case your webpack configuration should be:

resolve: {
    alias: {
        'react-native': 'react-native-web-extended',
        'native-base': 'native-base-web',
        //Icon.TabBarItem
        'react-native-vector-icons/Ionicons': 'native-base-web/lib/Components/Widgets/Icon',
        'react/lib/ReactNativePropRegistry': 'react-native-web-extended/dist/modules/ReactNativePropRegistry'
    }
}

Components

Most components from NativeBase are included with same features and parameters. Read the docs for detailed usage.

Working components:

  • Anatomy
  • Badge
  • Button
  • Card
  • Check Box
  • Form
  • Icon (Available icon familys: Ionicons, FontAwesome, MaterialIcons)
  • InputGroup
  • Layout
  • List
  • Radio Button
  • Search Bar
  • Spinner
  • Tabs
  • Thumbnail

Migrate from NativeBase projects

It is probable to migrate your NativeBase project to a native-base-web project without changing lots of your code.

WIP

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.