[v6.1.1] lazy + cancelLazyFadeIn + header scrolled: Empty space

[nihilenz]

Hello, I'm considering upgrading from version 4.5.2, but I noticed the following problem which I was able to reproduce with the example project (v6.1.1)

First of all, replaced/renamed all occurrences of reactnativecollapsibletabviewdemos in rnctvexample to fix a build error (Error building symbol: variable BuildConfig)

Please consider the "Lazy Example" and add the prop cancelLazyFadeIn={true}

Steps to reproduce:

• Open "Lazy Example"
• do not visit other tabs
• scroll the first tab to collapse the header
• change tab

The next tab you visit will be mounted with empty space equivalent to the height of the header.

Screencast: https://im.ge/i/LYtTxz

[andreialecu]

Thanks for reporting this issue! I encourage you to create a PR to fix it, as it seems like a good first issue.

Tackling this would be a great opportunity to become familiar with the codebase. Although it might seem complex, there isn't a huge amount of code in the library. If you need any help or have questions, feel free to ask. I'm here to help.

[andreialecu]

Should be fixed in 6.1.2

[sapjax]

Still exists in 6.1.4

[devoren]

@sapjax hey, did you fix the problem?

[metinaltinbas]

I am having this issue almost more than 3-4 months. Couldn't find any solution. It is fixed after scrolling, maybe we can scroll the view for 1 pixel after changing the tab

[metinaltinbas]

@andreialecu any updates on this ?

[devoren]

@metinaltinbas hey! I solved this problem, in my case it is because my tab name was in other language and not English, after changing the name to English and using the label the problem is solved. Hope it helps

[metinaltinbas]

@devoren Our app has multiple languages and I change the names between the those languages by getting it from a variable. Some of the tabs works exactly it should be but most of them not working and also having a problem with fitting all 5 tabs that I have.

[devoren]

@metinaltinbas do you use label prop?

[metinaltinbas]

@devoren Yes i use it like this.

 <Tabs.Tab
          name={`${languages[selectedLanguage].appConstantData.tomorrow}`}
          label="tomorrow">

[devoren]

@metinaltinbas ${languages[selectedLanguage].appConstantData.tomorrow} translate?

[metinaltinbas]

@devoren if selectedLanguage variable changes the text changes, I am getting it from a variable. Default app language is english and still not working

[devoren]

@metinaltinbas I see, you have to use that languages as label and name must be key like tomorrow that does not change even if language changed (swap them)

[metinaltinbas]

@devoren I tried almost everything it doesn't work even If i use tabs like this below

<Tabs.Tab name={'Today'} label="today">

I use Tabs in another view and works :). I couldn't understand the difference

<Tabs.Tab name={'${languages[selectedLanguage].appConstantData.yesterday}'}>

[devoren]

@metinaltinbas can you send video and repo or example how you use it?

[metinaltinbas]

@devoren I cannot share the code but I am trying to extract to code and share it. I have tried it in english words and still having the problem. I don't think it is because of that. It was working on my older versions with other languages. I have check my header height and it is still same but couldn't find out any mistakes that I did, still having the problem.