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

Conditionally showing tabs after first render #94

Closed
dan-fein opened this issue Feb 3, 2021 · 1 comment · Fixed by #93
Closed

Conditionally showing tabs after first render #94

dan-fein opened this issue Feb 3, 2021 · 1 comment · Fixed by #93
Labels
question Further information is requested

Comments

@dan-fein
Copy link

dan-fein commented Feb 3, 2021

Hi been a bit active on this repo today, hoping this is my last question (and thanks for the support so far).

I'm trying to conditionally set my ref map but it doesn't seem to like updates. Basically I'm trying to load pages that may or may not have content for the various pages, and if there's no content I don't want to show them.

Here's where I'm starting:

let refs = {
                    Posts: postsTabRef,
                    Details: detailsTabRef,
                    Items: itemsTabRef,
                    Similar: similarTabRef 
                }

Simple example of what I was trying/would like to achieve:
```
let refs = {}
refs['Posts'] = postsTabRef
if (details.length > 0){
refs['Details'] = detailsTabRef
}
if (items.length > 0){
refs['Items'] = itemsTabRef
}
if (similar.length > 0){
refs['Similar'] = similarTabRef
}
const [refMap, setRefMap] = React.useState(refs)


With this, was trying to check after an API call returns, could I update refMap and should I somehow ask it to refresh without re-rendering the children components?

I can currently update refs and it will render the right tabs, but when clicking them I'm currently getting scrollToIndex out of range, which just makes me think it renders first with some number of expected tabs, and then re-renders to show the tabs but on-click it doesn't recognize that tab actually belongs.

Any thoughts would be great!
@dan-fein dan-fein added the question Further information is requested label Feb 3, 2021
@PedroBern
Copy link
Owner

PedroBern commented Feb 3, 2021

@danielfein you are right, it does not like updates 😝 It will probably maybe be possible with #93.

@PedroBern PedroBern linked a pull request Feb 3, 2021 that will close this issue
@PedroBern PedroBern linked a pull request Feb 9, 2021 that will close this issue
PedroBern added a commit that referenced this issue Feb 9, 2021
Version 4.0 with api refactoring and dynamic tabs.

BREAKING CHANGES:

createCollapsibleTabs() no longer exists. Instead the library exports different components (Container, Tab, ScrollView, ListView) which can be nested like normal react components.
refMap no longer exists, and creating refs is no longer necessary (it's all handled internally)
ScrollView/FlatList now forward their refs, so the caller can just tap into their ref prop
the existing onIndexChange was renamed to onTabChange, and a separate onIndexChange was implemented that just returns the new index (as a number)
diffClampEnabled was changed to revealHeaderOnScroll
redundant prop snapEnabled was removed, instead snapThreshold is number | null | undefined. If not a number, then snap is not enabled. Setting it to 0.5 will result in snapping in the middle, like in the previous version.

Fixes: #100, #98, #94, #88
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants