react-native-elements/react-native-elements

Cross-Platform React Native UI Toolkit

Cross Platform React Native UI Toolkit

Getting Started 🚀 - Documentation 📚 - Expo demo - Blog - Releases

Installation

npm install @rneui/themed @rneui/base

Follow these instructions to install React Native Elements!

Packages

Package	Version	Downloads
@rneui/base
@rneui/themed

Quick Start

Start using the components or try it on Snack.

import { Button } from '@rneui/base';

const App = () => <Button title="Hello World!" />;

React Native Web support

As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.

Click here for a full walkthrough using React Native Elements + React Native Web.

Expo demo app

Checkout the official React Native Elements App on Expo which uses all of the React Native Elements components.

If you are looking to contribute to the React Native Elements App, here to view the implementation & Use this command to start example app locally

yarn example:start

VS Code Extension

Install the React Native Elements VS Code Extension to speed up development.

Documentation

View the full docs here

Contributing

Interested in contributing to this repo? Check out our Contributing Guide, Setup Guide and submit a PR for a new feature/bug fix.

A big shoutout to all our contributors! You could be here too!

First Contributors

We encourage everyone to contribute & submit PR's especially first-time contributors. Look for the label Good First Issue on the issues. Click here to see them.

If there is something you's like to see or request a new feature, please submit an issue or a pull request.

Community

• Discord - In case you have any other question or would like to come say Hi! to the RNE community, join our Discord Server. See you on the other side! 👋😃

• Twitter - Follow us on Twitter to get the latest updates.

Backers

Become a backer and show your support for React Native Elements.

Sponsors

Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show on GitHub and link to your website - who doesn't want a little extra exposure? Here's the info. Check our sponsors on website.

react-native-elements's Issues

List of icons for buttons available?

What icons are being used for the buttons. I know you can add them but what is the source of the icons? Fontawesome? Other source?

FormInput ref attribute

Hi

i saw that FormInput is a stateless function and does not support the TextInput ref attribute.

if i am on a login screen and want to type in my username and then password i am not able to jump between text inputs since the ref attribute doesnt work.

is there a workaround for this?

Thanks
Chris

Search bar no longer working

This code:

      <SearchBar
        lightTheme
        onChangeText={onChangeSearchText}
        placeholder="Search Players..."
      />

Is causing this crash:

[Error]The development server returned response error code:500

Hello,

Thanks for build this awesome toolkit! Unfortunately when I try import { Button } from 'react-native-elements' or anything I get this error:

Any idea why?

Thanks!

Requiring unknown module react-native-elements

After installing the module I get an error:

Requiring unknown module react-native-elements

The module is there but I cannot see the entry script.

Access Denied Error

When using I get an access denied error:

Error: java.io.FileNotFoundException: C:\2016\react\react-native-audio\AudioExample\android\app\build\intermediates\assets\debug\fonts\MaterialIcons.ttf (Access is denied)

I am getting error PricingCard when I put color={colors.primary}

Please suggest me I am new to React as well React native still I manage to develop and run simple android application using React Native. The original react-native themes are very odd looking so I install this React-native-elements, for all it is working fine including PricingCard but when I put color={colors.primary} as attribute in the pricing Card the run time failure occurs. This gives the same error when I try creating styles for primary. Any help will be appreciated.

Typeahead element

First of all, congratulations for all developers involved in this project, very good job.

My suggestion is to create a component to search data like bootstrap's typeahead (https://github.com/bassjobsen/Bootstrap-3-Typeahead)

In my personal project in react native, I have created one to fulfill my needs

When searching
https://drive.google.com/file/d/0B2MMFJxQwbxgR1BnQldyZ2hsWW8/view?usp=sharing

When selected
https://drive.google.com/file/d/0B2MMFJxQwbxgZl9LbEZMdTgwUVk/view?usp=sharing

Image Prop on Card Component

Hey there,

Having a bit of trouble passing images to the image props on the card component.

Has this been implemented yet or am I passing the image props incorrectly?:

  <Card
     image={require('../Images/myImage.png')}
  >

Any help on this would be greatly appreciated!

Tab 'selected=true' causes React.Children.only error

The simplest scenario for tabs:

const TabPanel = () => (
  <Tabs>
    <Tab title="a" selected={true}/>
    <Tab title="b"/>
  </Tabs>
);

Causes an error

“React.Children.only expected to receive a single React element child”

If one removes the selected={true} or changes to selected={false} it works.

Wrapping `Card` in `TouchableWithoutFeedback` does not call the `onPress` callback

Steps to reproduce:

<TouchableWithoutFeedback onPress={() => console.warn(1)}>
<Card/>
</TouchableWithoutFeedback>

errors when using size property in icon

when i use the property of size in icon,the react-native will have a mistake.
i have tried two ways to solve this problem,but there still exists.
1.<Icon
raised
name='heartbeat'
type='octicon'
color='#f50'
size={30}
onPress={() => alert('hello')}
/>
2.
<Icon
raised
name='heartbeat'
type='octicon'
color='#f50'
size='30'
onPress={() => alert('hello')}
/>
Error while updating property 'borderRadius' of a view managed by:RCTView

More Elements?

Hey @dabit3, I was looking through the list of Components that RN Elements has and I was wondering if there were any other ones that you'd think are worth building (or some that might be worth expanding on)? I'm taking a look at RN Swipable ListItem and am planning on doing an implementation for RN Elements, but maybe there are more pressing needs/issues that need to be attended to. Also saw the chat about RN Elements Website on #43, which I'm sure I can help with too.

Make ButtonGroup border configurable

Please make this style configurable with a second style: https://github.com/react-native-community/react-native-elements/blob/master/src/buttons/ButtonGroup.js#L26

Can I change the search bar icon position?

I have a requirement, I want to change the search bar icon position, because the icon is absolute and no via to change it.

The existing includes:

• containerStyle
• inputStyle
• icon
• noIcon
• lightTheme
• round
• containerRef
• textInput

Expose fontWeight on buttons

It looks like fontFamily is exposed but fontWeight is not. Ideally all of the font styles would be assign-able.

ListView Component large dataset with external images bug

Hey there,

I noticed while implementing a list view with your library that you statically render the entire list inside of a view, instead of the React Native ListView component?

Is there a reason for this? You could just as easily wrap around the ListView component, which has multiple performance improvements, including initial list size. This would help when loading large lists with external image resources.

If you'd like I'd be more than willing to open a PR.

Mo

dependency on react-native-tab-navigator

Hi

I am using Exponent and following your first step but when trying to use a button I get an error saying it cant find modules from https://github.com/exponentjs/react-native-tab-navigator

is this intended? if yes it would be great to have it in the documentation

Thanks
Chris

Add image of list items without link to documentation

Question about NavigationBar (HSNavBar)

Newbie question. I'd like to add a back button to the Navigation Bar. Was assuming I could make use of the LeftButton constant in NavBar.js as follows:

  render () {
    return (
      <Navigator
        navigationBar={navigationBar(navigationBar.LeftButton)}
        initialRoute={initialRoute}
        renderScene={this.renderScene.bind(this)} />
    )
  }

But, to no avail. A little help would be greatly appreciated!

Thanks!
P.S. Hoping this is the right spot to post questions...

Create React Native Elements Website

Invalid prop 'component' on Icon

when I specify a component on an Icon like so:

<Icon
  reverse
  raised
  name="chat"
  color="lightblue"
  component={TouchableOpacity}
  onPress={() => console.log('hello')}
/>

it gives this warning Failed prop type: Invalid prop 'component' of type 'function' supplied to 'Icon', expected a single ReactElement

Question: Is this elements based on some design (psd) uikit ?

Mark Roadmap in progress

It would be nice to mark a feature from the Roadmap in progress when someone is working on it so anybody who would like to contribute can grab another feature which is still in queue.

How is it different from NativeBase.io?

I am the core developer & the founder of NativeBase.io, I have been following React-Native-Elements for a while now.

I would like to discuss the possibility of merging NativeBase.io with this one. If we are solving the same problem then it doesn't make sense putting the same effort at different places.

Also, are we following any design guidelines (like Google / Apple design principles)?

Add TouchablebNativeFeedback to buttons for Android

Problem with Icons

Im trying to use the icons. I think i'm doing everything right, but it just won't work. All i get is a little crossed out box. Does anyone know what I'm doing wrong?
Sorry if this isn't the right place to put this btw. I'm new here.

Header element

I'm trying to make a view that has a header at the top, similar to what react-native-navbar is doing, I understand that it may not be great to copy what they are doing, but it would be great to have a unified style out of the box.

Search bar on android

This is what the search bar looks like on android at the moment:

Revisit padding / margin decisions on buttons / icons

Create Activity Indicator for elements

I was wondering if other people would be interested in Loading Indicator prop for elements such as a Button and FormInput. I'm thinking of just adding a prop called "loading" and it would wrap the ActivityIndicator in the button container for example.

Before creating a PR, I wanted to know if there would be interest from the community on such feature.

Thanks.

How can I trigger the blur() on SearchBar?

How can I trigger the blur() on SearchBar? for TextInput we can invoke the blur function of the instance, but i can't find it in SearchBar, any help?

@KevM @designorant @brentvatne @mattapperson @oblador

Change default button color to grey

Need a ref to textInput component in FormInput

Hello,

I have requirement where I need to access the refs (references) of textInput component in react-native-elements FormInput component for some requirement for handling keyboard slide

Does the FormInput supports it, can we have this feature if its not at present?

Changes needed in file FormInput.js

//line number 7
const FormInput = ({
  textInputRef,
  ....
})

//linenumber 51
  <TextInput
      ref = {textInputRef}

Thanks for sharing awesome components

Lato on iOS

Why default to Lato on iOS? People who install this library will have to then install that font and increase the size of their app :( San Francisco is a pretty good default font.

In particular this is problematic with Exponent where we don't ship with that font and have a separate way of loading fonts into the app that would be incompatible with this.

Icon in List view

how to use different icon pack in list view

FormInput with alignItems: 'center'

When using a FormInput and flexbox with alignItems: 'center', the input does not render at all, even with width/height set. How would you go to about centering inputs?

Swipeable list components

I would love to see a swipeable list component à la https://github.com/jemise111/react-native-swipe-list-view.

Cheers, Kai

Side menu not working

The side menu is not working, I am using the code below and its coming up like the attached screen-shot. I have also attached the code ( BTW whats the element you have mentioned in the example code? )
index.android.js.zip

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { SideMenu, List, ListItem } from 'react-native-elements';


export default class Element extends Component {
  constructor () {
  super()
  this.state = { toggled: false }
}
toggleSideMenu () {
  this.setState({
    toggled: !this.state.toggled
  })
}
  render() {
    // SideMenu takes a React Native element as a prop for the actual Side Menu
    const list = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  }
]
  const MenuComponent = (
    <View style={{flex: 1, backgroundColor: '#ededed', paddingTop: 50}}>
      <List containerStyle={{marginBottom: 20}}>
      {
        list.map((item, i) => (
          <ListItem
            roundAvatar
            onPress={() => console.log('something')}
            avatar={{uri:item.avatar_url}}
            key={i}
            title={item.name}
            subtitle={item.subtitle} />
        ))
      }
      </List>
    </View>
  )
    return (
      <SideMenu
     MenuComponent={MenuComponent}
     toggled={this.state.toggled}>
     <Text style={styles.welcome}>
       App
     </Text>
    </SideMenu>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('Element', () => Element);

Would love to see a Two-Marker Slider for Setting a Range

Scrolling in list view

Hi,

I'm unsure whether or not I misread the documentation or otherwise, but I am unable to scroll the list view once the list of data surpasses the size defined by the maxHeight style.

Is there anyway for me to implement scrolling functionality?

Thanks

side menu suggestion

i've been trying to create a side menu that contains other menus
for example:
the side menu will contain these:
submenu #1
submenu #2
menuitem 1
menuitem 2

clicking on submenu #1 will bring me to:
submenu#1 item #1
submenu#1 item #2

clicking on submenu #2 will bring me to:
submenu#2item #1
submenu#2item#2

clicking on menuitem # or submenu##item## will navigate to the object selected

perhaps with some small animation choice will be good as well

Rebass inspiration

Nice work! Have you seen https://github.com/jxnblk/rebass? I think it's the most clean approach.

Add Grid component

borderRadius of Buttons is not working

It seems thats borderRadius of Buttons is not working

Better defaults

Hi,

Looks like a great idea, but the defaults aren't great at the moment. Just adding two simple buttons to my app I get:

The font should be SF (as has already been mentioned in another issue). If the button was styled in the same way as the screenshots in the README that would also be great.

I think this package will turn into something great and thanks for all the work you've put in so far!

ListItem rightIcon failed prop type - Warning

propTypes for rightIcon in ListItem.js defaults to type string whereas it requires an object.

TestCase: provide an object with name and type to rightIcon
Observed behavior: An yellow warning for invalid prop type and a "?" displayed in UI
Required Behavior: UI shows the icon from icon type

example code missing

Looks like for each example code bit there is only first part visible. Is rest somehow gone missing, or it is not created yet?

Can't use icons

Hi i have used several elements but when i try to use Icons like this

import {  Icon } from 'react-native-elements'

<Icon
  name='rowing' />

i am met by this screen

Font size normalization across pixel ratios

Font sizes on iphone6 and iphone4 are particularly small. It would be good to use a "resizing" function to help with this across pixel ratios.

If you would like me to submit a PR please let me know.

const React = require('react-native')
const {
PixelRatio
} = React;
const pixelRatio = PixelRatio.get();

const normalize = (size) => {
if (pixelRatio == 2) {
return size * 1.15;
}
if (pixelRatio == 3) {
return size * 1.35;
}
return size * pixelRatio;
}

export default normalize;

Usage:
import normalize from '../helpers/normalizeText';

fontSize: normalize(14)

Code example from: https://jsfiddle.net/97ty7yjk/ and https://stackoverflow.com/questions/34837342/font-size-on-iphone-6s-plus.