react-native-elements / react-native-elements Goto Github PK
View Code? Open in Web Editor NEWCross-Platform React Native UI Toolkit
Home Page: https://reactnativeelements.com
License: MIT License
Cross-Platform React Native UI Toolkit
Home Page: https://reactnativeelements.com
License: MIT License
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.
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
It looks like fontFamily is exposed but fontWeight is not. Ideally all of the font styles would be assign-able.
Nice work! Have you seen https://github.com/jxnblk/rebass? I think it's the most clean approach.
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.
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
Looks like for each example code bit there is only first part visible. Is rest somehow gone missing, or it is not created yet?
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.
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)?
It seems thats borderRadius of Buttons is not working
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.
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
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!
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
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
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
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...
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.
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?
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.
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
Steps to reproduce:
<TouchableWithoutFeedback onPress={() => console.warn(1)}>
<Card/>
</TouchableWithoutFeedback>
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
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?
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.
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
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
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?
I would love to see a swipeable list component à la https://github.com/jemise111/react-native-swipe-list-view.
Cheers, Kai
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!
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 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:
how to use different icon pack in list view
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);
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.
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.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.