Comments (20)
This has been merged and will be released in the next release v0.12.3
from react-native-elements.
@Monte9 @binoy14 Sorry for the delay, work stuff got me. Here is some humble 'research' but I'm sure you know all of that already. What is really important for me to know is how would we handle passing in of nav elements and the possibility of 'default layout'.
Existing solutions
It uses 'configuration objects' as props to pass components in:
const rightButtonConfig = {
title: 'Next',
handler: () => alert('hello!'),
};
const titleConfig = {
title: 'Hello, world',
};
function ComponentWithNavigationBar() {
return (
<View style={styles.container}>
<NavigationBar
title={titleConfig}
rightButton={rightButtonConfig}
/>
</View>
);
}
It is also possible to pass in a custom component instead of an object.
Shoutem NavigationBar uses components as props:
<NavigationBar
leftComponent={<Icon name="face" />}
centerComponent={<Text>Shoutem UI</Text>}
rightComponent={<Icon name="home" />}
/>
Header uses children which are usually wrapped in Left, Right or Body components (but don't have to be):
<Header>
<Left>
<Icon name="face" />
</Left>
<Body>
<Text>NativeBase</Text>
</Body>
<Right>
<Icon name="home" />
</Right>
</Header>
They are just wrappers with some aligment settings applied:
'NativeBase.Left': {
flex: 1,
alignSelf: 'center',
alignItems: 'flex-start',
},
Questions
- What style of passing in components would be the best for RN Elements? As props on the parent component (Shoutem UI) or as children (NativeBase)?
- Would it be good/beneficial to support something like 'default layout'? Since most use cases of header/navbar have only 3 elements (left button, title, right button), maybe it would be ok to support some default layout out of the box that could be configured. Configuration options could be passed in as props on the parent element (as it is in React Native Navbar).
My thoughts
- I think the best way is to support passing in children since (at least for me) it is a natural pattern in React that should be supported
- But I also think it would be great to support the default use case only by configuration objects that could be passed in as props, so if somebody would only need the standard layout (two icon buttons and a title) they wouldn't need to create components for them, only to pass title, icon name, onPress handler(s) and maybe some styling to the parent component props for example like this: leftIconBtn={{ name: 'home', onPress: () => console.log('Left button pressed.) }}. Of course the question is that if we will do this default layout stuff with configuration objects maybe it would be good to also allow passing in custom components to props as React Native Navbar does - but maybe also still allow passing in children?
What do you think?
from react-native-elements.
I ran into it when building a fairly simple app, all I needed was a header for a view, it didn't have any navigation components to it. Though having that option would be great.
from react-native-elements.
@Monte9 What are your thoughts on having functionality like http://shoutem.github.io/docs/ui-toolkit/components/navigation-bar There is a wide variety of options available
from react-native-elements.
@binoy14 @Monte9 I'm working on this, mostly inspired by NavigationBar (shoutem/ui) and Header (nativebase) components. I could have it done by the end of next week (I hope).
from react-native-elements.
@binoy14 So I refactored it to support passing in components into props too. I will add tests and push the changes for review.
from react-native-elements.
@gavindinubilo that's a good idea. Although in my experience, if you are using any navigation library, NavigationExperimental for instance, the header comes with it as well.
Were you thinking of using this "unified style" throughout your app that's independent of any sort of navigation? Just trying to understand how useful it would be in general.
from react-native-elements.
Ran into this while prototyping a simple UI for an app. I didn't have any sort of navigation although I needed a header and had to write one myself. I think it could be pretty useful if added as part of RN Elements. Will try to implement this soon.
from react-native-elements.
This seems pretty essential for ListView based apps. How does the Scene change when a row is tapped?
from react-native-elements.
@binoy14 Something like that would be awesome!
from react-native-elements.
@binoy14 I think that's a great idea. Let me know if you have some time on your hands to start it off.. I can pitch in as well.
from react-native-elements.
In an effort to streamline all RNE issues such that it is easier to get to solutions faster/ submit a new issue we have decided to close any enhancement/roadmap features as "issues".
Feel free to use this issue to talk about this feature and ping @binoy14 or me (@Monte9) if you feel like you can submit a PR for this. Thanks in advance.
Also you can track the status of this feature and all other roadmap features here.
from react-native-elements.
@filiphosko go for it! Let me know if you need any help.
from react-native-elements.
@binoy14 Sure, I will. Currently I'm analysing another already existing solutions (NativeBase Header, Shoutem UI NavigationBar, RN Community Navbar). They offer different approaches and I would like to discuss later what will be the best solution for this element. I would like to make it as customisable as possible but also avoid unnecessary complexity.
from react-native-elements.
@filiphosko that's great. Thanks for doing it.
Feel free to post your findings here and we can talk about the implementation details if necessary. @binoy14 and I are actively working on this repo and have some bandwidth. So let us know if you need any help in developing this component so we can ensure that we get this out in a timely manner.
from react-native-elements.
@filiphosko I think we should have an API similar to React native navbar since it is similar to how navigation libraries such as react navigation. That is also similar to API in our other components
from react-native-elements.
@binoy14 Yes, you are right. We could also allow passing nav elements through props like in react navigation (example from their site):
class ProfileScreen extends React.Component {
static navigationOptions = ({ navigation, screenProps }) => ({
title: navigation.state.params.name + "'s Profile!",
headerRight: <Button color={screenProps.tintColor} {...} />,
});
...
Right now Header only accepts configuration objects for default configuration through props like that. I proposed the default config for people who just need the 'regular' three main elements (left & right buttons and a title) so they can start quickly. But I can also extend that for passing these elements through props, so that way it will create three 'element' groups in which you can put how many elements (buttons, ...) you want.
I would also like to allow passing in children to the component because it just provides the ultimate customisability. React Navigation doesn't have this option since they don't expose the header element as is, only it's configuration, but we have a standalone Header that can accept children, so I think we should allow them (in the end there could be three options: 1) default elements with config props, 2) custom element groups with element props, 3) children). Maybe @Monte9 could also share his opinion about this.
from react-native-elements.
What would be the difference by using React Navigation instead of building a custom component? As I can see, React Navigation has a fully working navigation bar.
from react-native-elements.
@nonameolsson It's if you are not using react-navigation.
from react-native-elements.
Basically, a quick way to mock up the UI without having to necessarily integrate a navigation library into your project just to get a header bar.
from react-native-elements.
Related Issues (20)
- Dialog.Title does not honor Dark mode text color HOT 3
- SpeedDial cant work in web platform,cuz ``` [...new Array(React.Children.count(children))]``` will returned ```[empty × 2]``` HOT 2
- NPM version missmatch for @rneui/themed's peerDeps/devDeps HOT 1
- Unable to import styled helper HOT 1
- ref prop is not working for Button component of New React native element lib (@rneui/base & @rneui/themed) HOT 2
- Upgrade Expo version for Expo demo HOT 1
- [Feature Request] For web renders, let `Icon` and `Chip` render as `<button>` only if it needs to be clickable HOT 1
- Latest @rneui/themed has incorrect peer and dev dependency HOT 2
- SearchBar has no Cancel button on iOS HOT 4
- TextProps are extended by ListItem.Content instead of ListItem.Title
- Show default image when source load fail HOT 1
- Cannot use Button as child of Link. HOT 2
- clearIcon in SearchBar component does not theme for dark mode (still appears light)
- Virtualized List error when adding a flatlist inside bottomsheet. HOT 1
- [Feature Request]Classification selector
- Slider disabled prop is not working.
- CheckBox icon cannot be seen HOT 1
- Warning: Dialog.Loading: Support for defaultProps will be removed from function components in a future major release. HOT 7
- Add `ScrollViewProps` or `ScrollViewStyle` to Tab component props
- DimensionValue typing
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-elements.