geekyants/nativebase

Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.

IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using gluestack-ui instead. Know More.

NativeBase is a mobile-first, accessible component library for building a consistent design system across android, iOS & web.

Website
Documentation

Table of Contents

1. Introduction
2. Motivation
3. Features
4. Dependencies
5. Installation & Setup
6. Components
7. Examples
8. KitchenSink App
9. Tech Stack
10. Compatible Versions
11. Contributors
12. Changelog
13. Community
14. License

1. Introduction?

NativeBase is a mobile-first, component library for React & React Native. Version 3.0 ships with complete ARIA integration, support for utility props and nearly 40 components that are consistent across Android, iOS and Web. Fast-track your dev process with NativeBase 3.0.

Recommended by Awesome React Native

NativeBase was added to the list of Frameworks of Awesome React Native and it is used by numerous React lovers across the world.

2. Motivation

Building with React Native from scratch is a tedious process with multiple steps such as adding styling, interactions, state management, responsiveness, accessibility, etc. We wanted to build and ship accessible, high-quality apps quickly.

Our inspirations include Material UI, Chakra UI, Ant Design, Braid Design System, Bootstrap, TailwindCSS & Flutter.

3. Features

Out of the Box Accessibility

Integrated with React ARIA and React Native ARIA, which provides React hooks. This enables you to build accessible design systems in no time.

Supporting Utility Props

Powered by Styled System so you can rapidly build custom UI components with constraint-based utility style props.

Rich Component Library

NativeBase offers around 40 components so you can build seamlessly. It includes button, checkbox, flex, stack and more.

Highly Themeable

Themeability is one of the core elements of NativeBase. You can customise your app theme and component styles to your heart's content.

Available for Both Mobile and Web

NativeBase 3.0 is powered by React Native Web so you can build consistent UIs across Web, Android and iOS.

Responsiveness Made Easy

Instead of manually adding responsiveness, NativeBase 3.0 allows you to provide object and array values to add responsive styles.

Now with Dark Mode

Building apps with a dark mode setting just got a whole lot easier. NativeBase is now optimised for light and dark modes.

4. Dependencies

React Native, Expo

5. Installation

NativeBase is supported in Expo or React Native CLI initiated apps. Web support is made possible by react-native-web.

Refer the guides to setup NativeBase in your React app.

6. Components

NativeBase 3.0 is a rich component library with nearly 40 components.

• Layout
• Forms
• Data Display
• Feedback
• Typography
• Overlay
• Disclosure
• Media & Icons
• Transition
• Other

7. Examples

Check out the Todo-List example

8. KitchenSink App

Kitchen Sink is a comprehensive demo app showcasing all the NativeBase components in action. It includes buttons, forms, icons, etc.

9. Tech Stack

JavaScript, React Native, Styled System

Made with ❤️ at GeekyAnts

NativeBase is an open-source project made by the tech-savvy geeks at GeekyAnts. GeekyAnts is a group of React Native experts. Do get in touch with us for any help with your React Native project. Always happy to help!

10. Compatible 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
v3.0.0-next.36 to v3.0.0-next-41	v0.63.0 and above
v3.0.0 to latest	v0.63.0 and above

11. 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]

12. Changelog

Check out the changelog in the official documentation

13. Community

• Facebook
• Twitter
• Discord
• Stackoverflow
• Blog
• YouTube

14. License

Licensed under the MIT License, Copyright © 2021 GeekyAnts. See LICENSE for more information.

nativebase's Issues

Discussion: Roadmap for future components.

We were thinking about the future direction of NativeBase as a whole and after some feedback from users in reddit, facebook, quora and the likes.
One point which divided opinions vastly was the look and feel of the components in NativeBase. There are specific guidelines laid down by both Google and Apple as to how the native apps should actually look and as of now, NativeBase isn't really adhering to those guidelines. So your input would be appreciated in these following UI components
1> TheNavbar component
2> Buttons with/without ripple effect
3> TabBarIos and similar implementation in Android
4> DatePicker component
5> Picker/Dropdown component
6> Floating action button
7> Floating Labels
Add more components if you feel is missing from the list.

Implmenting Searchbar on the Tool bar

Do we have some guide on implementing this common functionality? It seems to not yet be added on the current version? Or am I wrong? Please let me know,.

Cant get your list examples to render properly

I am using one of your simple list examples but it will not render properly (I am going for the look you have in your examples), actually none of the lists are. Can you help identify what I am going wrong?

Simple code is here:
https://gist.github.com/anthonywebb/eb32f7229c860cc386080b243d1a02f5

Error using InputGroup example

Hello,
I receive the following error when using the InputGroup example from the documents:

undefined is not an object (evaluating 'icon.props')

getIconProps
InputGroup.js @ 97:0

I linked the react-native-vector-icons with both rnpm and set them up manually in XCode. I'm brand new to react-native so I apologize in advance if this was an error on my part. Running react-natve 0.25.1 and native-base 0.3.0.

thanks for great library!

Just want to say thanks for such useful library and notify that I've proposed adding you to awesome-react-native list:
jondot/awesome-react-native#196

Unable to find ReactNativePropRegistry (0.22.2 and 0.26)

This framework looks really good - Thank you!
Trying it now and running into this issue - I had used latest react-native 0.26 (react 15.0.2), also had it downgraded to 0.22.2 (react 0.14.8) - same issue. Any idea?

Header not rendering in certain cases

I found that the header code (copy and paste from your examples) would not render unless there were other things under it, for instance:

This will not render anything

<Container>
                <Header>
                    <Button transparent>
                        <Icon name={'ios-arrow-left'} />
                    </Button>

                    <Title>Header</Title>

                    <Button transparent>
                        <Icon name={'navicon'}/>
                    </Button>
                </Header>
            </Container>

But this works

<Container>
                <Header>
                    <Button transparent>
                        <Icon name={'ios-arrow-left'} />
                    </Button>

                    <Title>Header</Title>

                    <Button transparent>
                        <Icon name={'navicon'}/>
                    </Button>
                </Header>
                <Content>
                    <Text>Some content here</Title>
                </Content>
            </Container>

Missing option iconLeft, iconRight for Icon in InputGroup

Hi,
NativeBase is rapid my prototype, but i have trouble with input, i can't control position of icon.
I hope we can have that options.

thanks.

Components breaks when using custom styles created by StyleSheet.create

NativeBase components, like Footer and Content breaks when you use the style prop passing an object created by ReactNative StyleSheet.create class.

I'm using the following code to reproduce the problem:

import React, { Component } from "react";
import {Container, Header, Content, Footer, Title, Button} from "native-base";

import { get as getDimension } from "Dimensions";

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
} from "react-native";

class AwesomeNativeBase extends Component {

  render() {
    return(
        <Container>
          <Content>
            <Text> Hello nativebase </Text>
          </Content>
          <Footer style={styles.footer}>
            <Text> This is an awesome footer </Text>
          </Footer>
        </Container>
    );
  }
}

const styles = StyleSheet.create({
  footer: {
    backgroundColor: "transparent"
  }
});

AppRegistry.registerComponent("AwesomeNativeBase", () => AwesomeNativeBase);

The error that I get is the following:

If I change the the Footer as show below the component works fine.

          <Footer style={{ backgroundColor: "transparent" }}>
            <Text> This is an awesome footer </Text>
          </Footer>

I tried to look into nativebase base but I couldn't find exactly why this hapen but I guess this is related to this nativebase file and this React Native breaking change: StyleSheetRegistry has been renamed to ReactNativePropRegistry. This module is private so it shouldn't affect everyone using React Native's public API, though: 433fb33, this breaking change can be found on this React Native release note.

Thanks!

Webpack build

Hi,

I'm trying out your nativeBase package as it looks like it can simplify a lot of my views. I am however building my package with webpack, and it doesn't seem to play nicely with your code. I keep getting

'import' and 'export' may only appear at the top level

errors at runtime because of the 'use strict' lines you have on top of your files. Running the nativebase sources trough babel gives me all kinds of weird errors, could you advice?

Not working with react-native 0.26

I have a very simple setup, installed vector icons (work great) but when trying to load modules from native-base:
import {Container, Header, Content, Footer, Title} from 'native-base';

I get an error

Requiring unknown module "react-native/Libraries/ReactNative/ReactNativePropRegistry".If you are sure the module is there, try restarting the packager or running "npm install"

At least for android not working

error : unrecognized font family ionicons

when testing Icon
http://nativebase.io/docs/v0.2.0/components#button

Input loses focus when updating state.

I am using React Naive 0.27.2 with nativebase 0.4.7, I am having trouble using the input component.

As you can see, I am trying to update the state on the input on onChangeText, but when I update the state the focus is lost from the input component. Is there another way to use the input component to get the value from it onSubmit?

edit:
Also TextInput is working correctly, if I substitute it for the input component.

---

`import {Container, Header, Content, Button, Title, List, ListItem, InputGroup, Input, Icon} from 'native-base';
import React, {Component} from 'react';
import {TextInput, View} from 'react-native';

export default class Login extends Component {

constructor() {
super();
this.state = {user: '', pw: undefined};
}

userNameUpdate(event){

  this.props.actions.createUser(this.state.username, '1234')
}


render() {
  const {login} = this.props

    return (
        <Container>

            <Content>

                    <InputGroup>
                           <Input
                             placeholder="USERNAME"
                             value={this.state.user}
                             onChangeText={(username) => this.setState({username})}/>
                           </InputGroup>

                       <InputGroup>
                           <Icon name="ios-unlock" />
                           <Input
                             placeholder="PASSWORD"
                             secureTextEntry={true}
                             value={(this.state && this.state.pw) || ''}
                             onChangeText={(password) => this.setState({pw: password})}/>
                       </InputGroup>


                   <Button style={{margin:5}} onPress={() => this.userNameUpdate()} block> Login </Button>


            </Content>


        </Container>
    );
}

}
`

How to specify Icon set for Android?

As title, all sample in the document is using prefix "ios" <Icon name="ios-refresh" />, I don't know if there's a specific requirement to use Icon on android platform. After a brief test, the Icon shown on Android platform seems not looking good, too small. I assume that there's a different naming syntax for Android platform. Any thought?

how to define global font?

There is nothing about fonts in the light.js.

Is it possible to do that?

how to dynamically render layout based on json parameters?

currently the View, button, text tag need to be created.

is there a way, based on json file, it will automatically render View or button or text?

Card animation

Question regarding the new Card component. Is the idea of these that you can slide between a set of cards using swipe gestures? If so, could you indicate how this would be done?

Also are you planning on adding a navigator component, or should the standard React Native one be used?

Keep up the great work!

UNMET PEER DEPENDENCY [email protected]

please add a datatables / datagrid component!!

This is sorely missing.. I know it must be much more complicated. But I really need one for my next project where I meant to use your boilerplate and this framework.

I need a datatable component that can handle multiple columns/rows with some kind of responsive mechanism for tables that are too large to fit on the screen. Just simple horizontal scrolling would be fine.

If it could also handle column sorting.. pagination and search/filter well omg that would be a dream.. but at this point I'll gladly take something basic. There seems to be a scarcity for this type of component.

Any hope of you adding this soon? Something that will work for both IOS and Android.

Social Network Component...

What step needed if I want to integrate facebook login or create facebook component for native base?

for simple header,content, footer. is easy. how about more complex layout. Is there any example of complex layout ?

Input compnent is missing

ran thru the demo.... it was amazing...

everything worked perfect except that it i cant render any Inputs...

i backed down to 0.3.0 because input would not work...

I added it to your index.js and it worked..

also using an InputGroup without an Icon throws an 'undefined is not an object (evaluating 'Icon.props')

hope this helps

Button missing disabled state

Hi,

It not a bug. My app still working well. But i hope your team can support "disabled" prop.
<Button disabled>My Button</Button

Spinner failsl

Please help.

The example http://nativebase.io/docs/v0.4.6/components#spinner fails with Element type is invalid.
I'm using native-base 0.4.7

How to customize header and footer layout ?

Examples of event handling?

I may be missing something, but I don't see, from the documentation, what events are available for the various components, eg buttons, list items etc. Could this be added to the documentation please? The components look great, and I'd love to use them, but don't yet see how. Many thanks!

Error using cards

I'm trying to use cards inside of my component, and run across this issue whenever the <CardItem />
is used inside of a card. I have my imports setup correctly. I can render components fine, the error only occurs when adding in <CardItem>

ExceptionsManager.js:61 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of YakView.

Testing Slack Integration

Hey team, does this go to our Slack channel?

How to pass datasource to List

Hello

Great library, I was wondering how should I pass the data to List (since all of the examples are with static data)?

How to add validate rules to form?

Say for example, I'd like to require a valid email, or that the password has certain characteristics (length, special chars & numbers, etc) or password match during registration -

1. how would that be set up
2. where would the error message display?

I've used this https://github.com/gcanti/tcomb-form-native and it includes some options for handling these issues. I assume using that tcomb-form-native w/ NativeBase components would be doable?

Business logic status - local storage, sync, server implementation prep, etc?

I'm trying to understand how much business type logic is implemented in the React Native Pro Starter.

Is there any local storage implementation? Any Sync type implementation so user can work offline?

Once a user is Registered/Login, is there code so that subsequent times they do not have to login?

Is there any code that is ready for server implementation? For example, when the Register is clicked, is there code that takes the values and prepares a call to the server?

react-native 0.27.2 invalid peer dependency

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected] - 0.27.1

Figure you guys will update shortly. Thanks for a great library.

NativeBase on NPM comments out Spinner & ProgressBar

Seems to be commented out in the current master branch as well, but is pretty annoying if you are sharing a code base with multiple people and node_modules are not committed to git (which they shouldn't be).

react-native-vector-icons peer installation failed

Elliss-MacBook-Pro:AwesomeNativeBase` wshen$ npm install native-base --save
[email protected] /Users/wshen/git/myWork/AwesomeNativeBase
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
└── UNMET PEER DEPENDENCY react-native-vector-icons@~1.3.4

npm WARN [email protected] requires a peer of react-native-vector-icons@~1.3.4 but none was installed.

Somehow the react-native-vector-icons always not installed.
I follow up the installation instruction (http://nativebase.io/docs/v0.3.0/getting-started) by using "rnpm link" doesn't seem to link the package correctly.

Do I have to install react-native-vector-icons manually?

ReactNative.createElement is deprecated

I had different troubles integrating NativeBase into an existing application.

1. The docs state, NativeBase would be compatible with every ReactNative release. That seems not to be the case. Everything below 0.25.1 does not come with ReactNativePropRegistry.js, so that claim is misleading.
2. I found nothing about setting the theme. The components that I can make work look odd and seem not to have proper styles applied (everything comes in a blue'ish color). What's necessary to activate the (one) theme?
3. Even when building a whole new and fresh app with 0.25.1, when integrating NativeBase and rendering pretty easy stuff from the docs, I get errors like ReactNative.createElement is deprecated...

Am I doing sth wrong here?

NativeBase not compatible with the latest version of react native 0.26

Hi,
I just created a new project and it's using rn ver 0.26. Then i got this error.

It's seems issue with ReactNativePropRegistry.

How to override style in NativeBase?

It may sound like a stupid question... but I didn't find a way to override style. In every code example, there's no usage of React StyleSheet. Could anyone give me a hint?

just got latest through npm

getting a error message that is causing issues.

Each child in array or irerator should have a unique "key" prop. check the render method of 'Header'

Q: What is the supported React-Native version?

Hello, at this time, the most recent version of React-Native is 0.26.1. Native-Base doesn't work with this version.

I followed the tutorials from both RN and NB perfectly.

The hello world app works perfectly without Native-Base, but after i add any component from Native-Base, i get this error:

Button transparent warning

Simple component in RN 0.27

class App extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Button transparent>
            <Icon name="ios-add" />
          </Button>
          <Title>Test</Title>
        </Header>
        <Content>
          <Button> Click Me! </Button>
        </Content>
      </Container>
    );
  }
}

Custom Fonts.

Since most application try to be unique, adding a way to throw in custom font would be good.

[mocha test] SyntaxError: Unexpected token import

original source,

import React from 'react';
import {
  View,
  Text,
} from 'react-native';

const ChatList = () => (
  <View>
    <Text>Hello world</Text>
  </View>
);

export default ChatList;

mocha test runs fine.

after i added this code,

import { Container, Header, Content, Footer, Title } from 'native-base';

and run mocha test,

it throws

mocha --require react-native-mock/mock.js --compilers js:babel-core/register src/*/.t
est.js --watch

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Module._extensions..js (module.js:405:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/canna/my-projects/

mshopbang/node_modules/babel-register/lib/node.js:166:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (ChatList.js:6:1)
    at Module._compile (module.js:398:26)
    at loader (/Users/canna/my-projects/mshopbang/node_modules/babel-register/lib/node.js
:158:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/canna/my-projects/
mshopbang/node_modules/babel-register/lib/node.js:168:7)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)

Requiring unknow module ReactNativePropRegistry

I'ḿ trying native-base in a new react-native android project on linux, i follow the instructions and with out native-base the app works, but when i add components from native-base send me an error:

Requiring unknow module "react-native/Libraries/ReactNative/ReactNativePropRegistry".If you are sure the module is there, try restarting the packager or running "npm install".

Badge Font Size No Longer Changeable

See #45 - Same issue but for style prop fontSize

linear gradient

Not sure whether it's planned or not, but react-native-linear-gradient seems to be useful for headers or buttons or whatever.

How do I size cards

Thank you for NativeBase!

I would like to know the best way to do Card layouts. Maybe 2 cards next to each other, or even 3. At the moment it looks like a CardItem fills a row.

Warning: Failed propType: Invalid props.style key 'color' supplied to [ 'View' | 'RCTView' ]

Original issue submitted here...
start-react/native-starter-kit#10

I'm using native-starter-kit, which uses native-base. In both iOS and Android simulators, I'm receiving these warnings after clicking "Login"

iOS

Android

I believe the error is occurring in /native-base/Components/Widgets/Button.js, but I haven't been able to locate it yet.

Badge Text Color No Longer Changeable

Per documentation you need to pass the color of the text into the styles property, however with the new code update you can no longer change text color to anything other than the theme colors. This is counter to the documentation http://nativebase.io/docs/v0.4.6/components#badge

Seems to be with the move to View wrapping the text when you pass the color into the style prop it will toss errors because those properties get attached to the View. To correct this you need to either create a new property that you can pass in to change the Text color or move back to wrapping a Text element only.

How would I use react-native-router-flux with this?

If I'm using the Container Component, how would I go on about using the react-native-router-flux with this?

Enable style prop array values

Array doesn't work on Button.

<Button style={[styles.base, styles.background]} />

Vertical alignment issue of the text and the icon inside button

I think we need to pull up the icon a bit.