Coder Social home page Coder Social logo

Comments (20)

binoy14 avatar binoy14 commented on June 18, 2024 5

This has been merged and will be released in the next release v0.12.3

from react-native-elements.

filiphosko avatar filiphosko commented on June 18, 2024 3

@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

React Native Navbar

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 UI

Shoutem NavigationBar uses components as props:

<NavigationBar
    leftComponent={<Icon name="face" />}
    centerComponent={<Text>Shoutem UI</Text>}
    rightComponent={<Icon name="home" />}
/>

NativeBase

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.

dinubs avatar dinubs commented on June 18, 2024 2

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.

binoy14 avatar binoy14 commented on June 18, 2024 2

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

filiphosko avatar filiphosko commented on June 18, 2024 2

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

filiphosko avatar filiphosko commented on June 18, 2024 1

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

Monte9 avatar Monte9 commented on June 18, 2024

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

Monte9 avatar Monte9 commented on June 18, 2024

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.

Carpetfizz avatar Carpetfizz commented on June 18, 2024

This seems pretty essential for ListView based apps. How does the Scene change when a row is tapped?

from react-native-elements.

dinubs avatar dinubs commented on June 18, 2024

@binoy14 Something like that would be awesome!

from react-native-elements.

Monte9 avatar Monte9 commented on June 18, 2024

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

Monte9 avatar Monte9 commented on June 18, 2024

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.

binoy14 avatar binoy14 commented on June 18, 2024

@filiphosko go for it! Let me know if you need any help.

from react-native-elements.

filiphosko avatar filiphosko commented on June 18, 2024

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

Monte9 avatar Monte9 commented on June 18, 2024

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

binoy14 avatar binoy14 commented on June 18, 2024

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

filiphosko avatar filiphosko commented on June 18, 2024

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

nonameolsson avatar nonameolsson commented on June 18, 2024

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.

binoy14 avatar binoy14 commented on June 18, 2024

@nonameolsson It's if you are not using react-navigation.

from react-native-elements.

Monte9 avatar Monte9 commented on June 18, 2024

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)

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.