Code Monkey home page Code Monkey logo

react-native-elements's Introduction

react-native-elements

Cross Platform React Native UI Toolkit



Installation

npm install @rneui/themed @rneui/base

Follow these instructions to install React Native Elements!

Packages

Package Version Downloads
@rneui/base badge npm
@rneui/themed badge npm

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.

React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer

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 Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer React Native Elements Backer

react-native-elements's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-native-elements's Issues

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.

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)

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
image

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?

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.

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

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.

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

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

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:

screen shot 2016-09-12 at 12 21 53 pm

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!

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.

Search bar no longer working

This code:

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

Is causing this crash:
screen shot 2016-10-02 at 3 41 11 am

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.

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?

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.

Expose fontWeight on buttons

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

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.

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

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);

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.

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

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!

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

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

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)?

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

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.

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

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.