Dates bounce when component renders

[VanessaChu]

There's a small bounce/shake on the dates when we ingress to the calendar strip. Is there a work around on this? It seems to be caused by within the library itself. Video: https://www.amazon.com/photos/shared/B-vDmgOeRj6alXDi7QF9UA.jh9zDXt2KAOp4dlDAEiu3_

[peacechen]

I may not have permission to view your video (Amazon page says Not Found).

I'll try to take a look at the issue, but don't have much time to dedicate to it. It would help if you could provide Snack that recreates the behavior. Place breakpoints in the library code to see if you can track it down too.

[VanessaChu]

Sorry here's the correct link https://www.amazon.com/photos/shared/EqjRAsgmRUiU-kcdMqOoBw.Ur73GlJoMGa1qvRzskR7vz

[peacechen]

That looks like RNCS responsively scaling itself to its container. I recommend setting a breakpoint in onLayout to inspect the dimensions it's receiving compared to the initial dimensions. See if there's a way to set the initial values to be identical to the onLayout values provided later.

[beujator]

I think I found the problem, it is a rounding error on marginHorizontal and dayComponentWidth in the onLayoutDebounce function.

[peacechen]

beujator's fix has been published in 2.0.8

[bhaskardabhi]

Same is happening for me. find attached link https://drive.google.com/file/d/1xlUChch2jizK8T34ZXyYqWBmKOw4IbJz/view?usp=sharing

Following are versions:

"dependencies": { "react": "16.11.0", "react-native": "0.62.2", "react-native-calendar-strip": "^2.0.8" },

I am using Redmi Note 5. This is not happening in emulator

[peacechen]

Which makes / models of physical devices does this happen on? It would help debugging if you could post a Snack or repo that recreates this behavior.

[bhaskardabhi]

This is happening with MI Note models. I will check if the example is having same issue

[bhaskardabhi]

Finally found the issue. I kept the CalendarStrip in Container of nativebase which is scrollable view. I moved it to <View> and it worked.

Changed

            <Content
                style={{ flex: 1 }}
                contentContainerStyle={{ flex: 1 }} // important!
                padder>
                <CalendarStrip 
                    scrollable
                    selectedDate={this.state.currentDate}
                    onDateSelected={(selectedDate) => {
                        that.setCurrentDate(selectedDate);
                    }}
                    style={{
                        height: 80
                    }} dateNumberStyle={{
                        fontWeight: 'normal'
                    }} />

to

            <View>
                <CalendarStrip 
                    scrollable
                    selectedDate={this.state.currentDate}
                    onDateSelected={(selectedDate) => {
                        that.setCurrentDate(selectedDate);
                    }}
                    style={{
                        height: 80
                    }} dateNumberStyle={{
                        fontWeight: 'normal'
                    }} />

[peacechen]

Thanks @bhaskardabhi for posting your solution.

@VanessaChu are you using NativeBase?

[abhidatta0]

it is happening again