Comments (10)
Hi @kiwina can you share some code or a screenshot?
from react-native-collapsible-tab-view.
Same here: How is it possible to set a minimum height of the remaining collapsible header so that there can be shown an ActionBar? It should look similar to that:
from react-native-collapsible-tab-view.
Hi @PentamapRainer you can render the toolbar above the CollapsibleTabView
and pass the same Animated.Value
to both (<CollapsibleTabView animatedValue={scrollY} ... />
)
I have a setup like this where I'm using a react-navigation
header and animating the title when the user is scrolling.
from react-native-collapsible-tab-view.
When I try to render the toolbar above the CollapsibleTabView
with following code, then the CollapsibleTabView
is not shown any more. Just the Text
element is shown.
<View>
<Text>HERE COMES THE NAVIGATIONBAR</Text>
<CollapsibleTabView<Route>
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={handleIndexChange}
renderHeader={renderHeader}
headerHeight={HEADER_HEIGHT}
tabBarHeight={150}
{...props}
/>
</View>
So where do I have to render the NavigationBar above the CollapsibleTabView
?
from react-native-collapsible-tab-view.
Did you try flex: 1
?
from react-native-collapsible-tab-view.
Did you try flex: 1?
Thanks a lot! That worked:
<View style={{flex:1}}>
<Text>HERE COMES THE NAVIGATIONBAR</Text>
<CollapsibleTabView<Route>
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={handleIndexChange}
renderHeader={renderHeader}
headerHeight={HEADER_HEIGHT}
tabBarHeight={150}
{...props}
/>
</View>
from react-native-collapsible-tab-view.
One more question to this issue: Is it possible to make the collapsible header behind the (transparent) NavigationBar, so that the header image is visible behind the NavigtionBar when scrolling to the top.
This is how it looks now:
This is how the header should look like:
from react-native-collapsible-tab-view.
@PentamapRainer If I got your question right, you can interpolate the opacity of the "bar", to do so, you can use the animated value coming from the CollapsibleTabView and interpolate it between 0 and the header height to get the opacity, something like
const backgroundOpacity = scrollYPosition.interpolate({
inputRange: [0, scrollSize],
outputRange: [0, 1],
extrapolate: 'clamp',
});
from react-native-collapsible-tab-view.
@PedroBern Is it possible to configure a minimum header height with the v3 version? While the approach of placing the component outside the Collapsible tab view component is an easy and simple approach, if you need to place the content with an absolute position on the header(something similar to the previous image on the comments), it becomes really hard to come with a solution since the absolute position removes the component from the screen flow and its size is not taken into consideration.
This is more of a discussion other than an "issue" for me, wasn't just sure how to reach you to discuss it, thanks in advance.
from react-native-collapsible-tab-view.
@tcorreiaubi no, it's still not possible in v3, I know, this desired configuration is probably hard to get with the current implementation, but it's open for PR.
from react-native-collapsible-tab-view.
Related Issues (20)
- Getting current scroll position with useCurrentTabScrollY using FlashList
- Bug using FlashList in combination with lazy HOT 1
- App get stuck when switching and scrolling 2-3 time between the Tabs only in android HOT 1
- Invalid onScroll event for Tabs.ScrollView
- Does this work on React Native Web? HOT 1
- Programmatically show header when `revealHeaderOnScroll={true}`
- Make AnimatedPagerView style customizable
- Is there a way to prevent scroll being lost when scrolling through dynamic tabs in collapsed state?
- Is it possible to reveal header on tab change? HOT 1
- Turbo repo - pnpm installation - getting `TypeError: deepEqual is not a function (it is Object)` HOT 3
- Great component! HOT 1
- ExampleComponentSharedPullToRefresh ios bug
- How to make the title slide without having to collapse into a page
- Collapsed header
- How to programatically switch tabs? HOT 2
- Header is reseting when switching to 5th tab from 1st tab HOT 4
- Nested TabViews HOT 1
- change the indicator style HOT 4
- No content rendered when the tab navigation is inside a ScrollView. HOT 3
- VirtualizedList missing HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-collapsible-tab-view.