Allow custom heights (non-squares)

[jimbol]

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]

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]

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.

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]

Pinging this and its corresponding PR, @peacechen

[AlanQuadros]

Same problem, any solutions?

[Sascha195]

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

[jimbol]

Theres a branch with a dayComponentHeight prop that I've been using (Here: https://github.com/BugiDev/react-native-calendar-strip/pull/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]

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

[pedrobslisboa]

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

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

[pedrobslisboa]

Solved here: #273

Thank you @peacechen for your help 🎉

[peacechen]

Published in 2.1.8