Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow custom heights (non-squares) #222

Closed
jimbol opened this issue Aug 22, 2020 · 11 comments
Closed

Allow custom heights (non-squares) #222

jimbol opened this issue Aug 22, 2020 · 11 comments

Comments

@jimbol
Copy link

jimbol commented Aug 22, 2020

Hi there,
I'm interested in making a tall dayComponent element. It looks like there isn't a good way to do this yet. The code says to assume square element sizes.

One way to make this work would be to allow a number or an object to be passed by the user.

// So you could do
maxDayComponentSize={80}

// or
maxDayComponentSize={{
    height: 80,
    width: 300,
}}

Another approach would be to change the height of the element to a min-height. This wouldn't change the API at all, which is nice.

<View style={[this.props.innerStyle, { height: this.state.height }]}>

(source)

@peacechen
Copy link
Collaborator

Setting min-height sounds like a good idea. The existing innerStyle prop should enable you to do that. Does that work or are you asking for changes to get that working?

@jimbol
Copy link
Author

jimbol commented Aug 23, 2020

Ok I gave this a try.

innerStyle={{
  backgroundColor: 'red',
  minHeight: 200,
}}

The height of the inner element is increased but not the height of the Scroller. Here you can see the red is from innerStyle and the orange is on my custom dayComponent.

Screen Shot 2020-08-23 at 10 25 46 AM

I'm trying to make the dayComponents taller but the scroller cannot be set except with min/maxDayComponentSize (I think).

Here's where the scroller height is set.

      <View
        style={{ height: this.state.itemHeight, flex: 1 }}
        onLayout={this.onLayout}

Perhaps adding a new style object prop like scrollerStyle? What do you think?

@jimbol
Copy link
Author

jimbol commented Sep 4, 2020

Pinging this and its corresponding PR, @peacechen

@AlanQuadros
Copy link

Same problem, any solutions?

@Sascha195
Copy link

Unfortunately I also encountered this problem. Is there already a solution for this?

@jimbol
Copy link
Author

jimbol commented Oct 13, 2020

Theres a branch with a dayComponentHeight prop that I've been using (Here: #223). Gonna try and get it merged.

As a temporary fix you could pull in the branch by adding this to your package.json.

"react-native-calendar-strip": "jimbol/react-native-calendar-strip#add-scroller-style-option",

But if that branch gets deleted you'll have a missing package. However, I'm using it right now and I will refrain from deleting it when it gets merged.

@peacechen
Copy link
Collaborator

@jimbol Would you mind updating your PR based on the discussion in that thread?

@pedrobslisboa
Copy link
Contributor

pedrobslisboa commented Feb 10, 2021

@peacechen What can us make to get it merged? Can I create a PR with the necessary changes since Jimbol doesn't seems to update it

@pedrobslisboa
Copy link
Contributor

#273 I've made a PR about it and I will keep my attention on it so maybe we can add this feature.

@pedrobslisboa
Copy link
Contributor

Solved here: #273

Thank you @peacechen for your help 🎉

@peacechen
Copy link
Collaborator

Published in 2.1.8

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants