npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@aaxis/native-base

v2.15.2-2

Published

Essential cross-platform UI components for React Native

Downloads

12

Readme

NativeBase Financial Contributors on Open Collective Build Status npm version npm downloads

NPM

Essential cross-platform UI components for React Native

Updated docs here!

Demo Demo

Table of Content

  1. What is NativeBase?
  2. Why NativeBase?
  3. KitchenSink App
  4. Getting Started
  5. Components
  6. NativeBase for Web
  7. Compatibility Versions
  8. React Native Seed
  9. NativeBase Market
  10. Documentation
  11. Website
  12. Quick Links to NativeBase
  13. About the creators

1. What is NativeBase?

NativeBase is a sleek, ingenious and dynamic front-end framework created by passionate React Loving team at Geekyants.com to build cross platform Android & iOS mobile apps using ready to use generic components of React Native.

2. Why NativeBase?

What is really great with NativeBase is that you can use shared UI cross-platform components, which will drastically increase your productivity. When using NativeBase, you can use any native third-party libraries out of the box.

Recommended by Microsoft

If you're looking to get started with React Native + CodePush, and are looking for an awesome starter kit, you should check out Native Starter Pro - Microsoft's react-native-code-push repo

Recommended by Awesome React Native

NativeBase added into the list of Frameworks of Awesome React Native and are also used by many other React lovers across the world.

4. Getting Started

a. Setup with pure React Native app

Install NativeBase:

npm install native-base --save

Install Peer Dependencies: The peer dependencies included from any npm packages does not automatically get installed. Your application will not depend on it explicitly.

react-native link

Note: If you are using react-native version 0.60 or higher you don't need to link any package.

You've successfully setup NativeBase with your React Native app. Your React Native app is now all set to run on iOS and Android simulator.

b. Setup with Expo

Expo helps you make React Native apps with no build configuration. It works on macOS, Windows, and Linux. Refer this link for additional information on Expo

Install NativeBase:

npm install native-base --save

Note NativeBase uses some custom fonts that can be loaded using Font.loadAsync. Check out the Expo Font documentation.

Install Expo Fonts:

expo install expo-font

App.js

import React from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
      ...Ionicons.font,
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }

    return (
      <Container>
        <Text>Open up App.js to start working on your app!</Text>
      </Container>
    );
  }
}

Check out the KitchenSink with Expo for an example of the implementation. Find the KitchenSink repo here

c. Setup with ignite-native-base-boilerplate

You can run the following command to create the boilerplate, provided you have Ignite CLI installed.

ignite new appname --boilerplate native-base-boilerplate

Go to app location:

cd appname

For iOS run:

react-native run-ios

For Android run:

react-native run-android

Refer ignite-native-base-boilerplate page for additional information.

5. Components

NativeBase is made from effective building blocks referred to as components. The Components are constructed in pure React Native platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface.

6. NativeBase for Web

NativeBase is now available for React web lovers. Check the demo. Find the repo here.

7. Compatibility Versions

| NativeBase | React Native | |----------|-------------| | v0.1.1 | v0.22 to v0.23 | | v0.2.0 to v0.3.1 | v0.24 to v0.25 | | v0.4.6 to v0.4.9 | v0.26.0 - v0.27.1 | | v0.5.0 to v0.5.15 | v0.26.0 - v0.37.0 | | v0.5.16 to v0.5.20 | v0.38.0 - v0.39.0 | | v2.0.0-alpha1 to v2.1.3 | v0.38.0 to v0.43.0 | | v2.1.4 to v2.1.5 | v0.44.0 to v0.45.0 | | v2.2.0 | v0.44.0 to v0.45.0 | | v2.2.1 | v0.46.0 and above | | v2.3.0 to 2.6.1 | v0.46.0 and above (does not support React 16.0.0-alpha.13)| | v2.7.0 | v0.56.0 and above |

8. React Native Seed

React Native Seed provides you React Native starter kits for your base app with the technologies that you love.

Based on the feedback we received from our users, people had trouble sorting out the right boilerplate for them with the desired technologies and contacted us to enquire. We realized that many people were particular about the technologies they want in the app and that a minimal, neat solution was required to solve this, and hence, React Native Seed.

React Native Seed is for learners and professionals alike, those who want to experiment, learn all aspects and those who already know enough, just want a starter kit to quickly start working on their project.

9. NativeBase Market

Having tried with the free version, Native Starter Kit and appreciate our product?

Get on the mobile fast track with the featured apps of NativeBase, to build high-quality iOS and Android mobile apps. A marketplace for premium React Native app themes to build high-quality iOS and Android mobile apps.

10. Documentation

Go through NativeBase Docs to play with NativeBase.

11. Website

https://nativebase.io/

12. Quick Links to NativeBase

13. About the creators

We are GeekyAnts, a startup based in Bangalore, India with 50+ developers in strength. We have been very active in the React / React Native community where we have developed StrapUI and StartReact. Our other products include StartLaravel and StartAngular.

Another major project by us is BuilderX, a screen design tool which codes React Native for you.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]