Comments (17)
👍🏻 Kudos on the library by the way. Nice work!
from react-native-collapsible-tab-view.
It seems like you should include the header in renderTabBar?
const [index, setIndex] = useState(0);
const [routes] = useState([
{
icon: (
<FontAwesomeIcon
color={C.COLOR_BLACK}
icon={['fab', 'apple']}
size={20}
style={styles.iconStyle}
/>
),
key: 'first',
title: 'First',
},
{ key: 'second', title: 'Second' },
]);
const _renderHeader = (props) => (
<>
<View style={styles.header}>
<Text style={styles.headerText}>COLLAPSIBLE</Text>
</View>
<TabBar {...props} onTabPress={_onTabPress} />
</>
);
const _onTabPress = (tabProps) => {
tabProps.jumpTo(tabProps.route.key);
};
return (
<CollapsibleTabView
navigationState={{ index, routes }}
onIndexChange={setIndex}
renderScene={SceneMap({
first: () => <SomeRoute color="white" routeKey="first" />,
second: () => <SomeRoute color="black" routeKey="second" />,
})}
renderTabBar={_renderHeader}
/>
);
from react-native-collapsible-tab-view.
Hi @alexpchin no, the header shouldn't be included in the tab bar.
Did you forget to add the styles? Assuming you are copying from the quick start example in the readme.
const styles = StyleSheet.create({
header: {
height: HEADER_HEIGHT,
backgroundColor: '#2196f3',
justifyContent: 'center',
alignItems: 'center',
elevation: 4,
},
headerText: {
color: 'white',
fontSize: 24,
},
content: {
height: 1500,
},
});
from react-native-collapsible-tab-view.
Hi @PedroBern I do appreciate that this issue seems like I haven't followed the installation instructions... I promise I'm not simple ;) I am adding to an existing react-native application.
Firstly, to get up and running I had to install @react-navigation/material-top-tabs
. Whilst I do have react-navigation running in the project, it seemed from the README that you only had to do this if you were integrating with react-navigation rather than just using the component on a screen.
I will investigate further and perhaps create a demo to share on CodeSandbox or something.
Question - If the content of one of the tabs is shorter than the other, are the tabs meant to stick at the top?
Thanks,
Alex
from react-native-collapsible-tab-view.
FYI, a small update. The issue is when you omit the headerHeight
which the docs say is optional. I checked the code in your example. If you comment out CollapsibleTabViewDemoExample
, you will see the issue I was facing.
return (
<CollapsibleTabView
// headerHeight={HEADER_HEIGHT} // optional, will be computed.
navigationState={{ index, routes }}
onIndexChange={handleIndexChange}
renderHeader={renderHeader}
renderScene={renderScene}
/>
);
Thanks!
from react-native-collapsible-tab-view.
FYI, a small update. The issue is when you omit the
headerHeight
which the docs say is optional. I checked the code in your example. If you comment outCollapsibleTabViewDemoExample
, you will see the issue I was facing.
That's weird, it does not happen here. I've just commented out, I get the same behavior as before.
Question - If the content of one of the tabs is shorter than the other, are the tabs meant to stick at the top?
Do you mean the tab or the screen of the tab? If you have a tab screen smaller than the window, you can see small content example.
I will investigate further and perhaps create a demo to share on CodeSandbox or something.
Perfect, if can do that I appreciate :)
from react-native-collapsible-tab-view.
Thank you for the heads up on the small content example.
So far my steps:
- I forked the repo.
- Loaded the packages in example with yarn.
- Ran the example using ios simulator. (Everything worked ok).
- Commented out the line about
headerHeight
which causes the header not to appear.
Interestingly, the header works fine if the value is:
headerHeight={1}
The line in CollapsibleTabView
:
{headerHeight > 0 && renderHeader()}
If the default headerHeight
is 0 and there is no headerHeight provided by props, if renderHeader
has been provided then a header will render, if not then you'll render null... So can you not just omit this check?
{renderHeader()}
This will display the header, but it seems like the scrollY then stops working.
Please let me know if you follow the same steps and you do not replicate what I am seeing on CollapsibleabViewDemoExample.tsx
.
UPDATE
When logging out the header, it seemed like the header was initially -1
. Checking:
{!!headerHeight && renderHeader()}
Seems to resolve. Looking into why it's initially -1
.
UPDATE2
Could this be because in TabBarItem
in react-native-tab-view the styling for item is:
item: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 10,
minHeight: 48,
},
TabBar height in this package is 49, which would give -1 (48-49) ?
from react-native-collapsible-tab-view.
Thank you for the heads up on the small content example.
It will be handled inside the package in the next release with #17. EDIT: shipped in v1.3.0
Regardings the header height, I will check it today and come back here.
from react-native-collapsible-tab-view.
UPDATE2 ...
The 48
is the minHeight
. You can check the real tabBarHeight
with the following code in your fork. We need to chose between computing the real tabBarHeight
or headerHeight
onLayout, we can't guess both, only if one of then is provided, in this case, I choose to always have tabBarHeight
, allowing to render a header without up front height.
Add this to your fork, in the CollapsibleTabView.tsx
.
const getHeaderHeight = React.useCallback(
(event: LayoutChangeEvent) => {
const value = event.nativeEvent.layout.height - tabBarHeight;
// 250 is the header height from the example. It will log the real tabBarHeight, around 49.xx
console.log(event.nativeEvent.layout.height - 250)
....
from react-native-collapsible-tab-view.
@PedroBern Thanks for replying so quickly.
If I do pass in the headerHeight={HEADER_HEIGHT}
in the example, where headerHeight is 250
and then use the code:
console.log(event.nativeEvent.layout.height - 250)
This logs out 48
. What do you get?
Have you managed to replicate my initial problem, where not providing a headerHeight
means that the header does not render?
from react-native-collapsible-tab-view.
I get 49.428558349609375
.
Check out #18, at any moment the preview will be ready. Or see the code and try to implement by yourself to see if works. I don't have access to iOS simulator right now, so I couldn't tell.
EDIT: see the no upfront height example
EDIT: I will wait your response to merge and release it.
from react-native-collapsible-tab-view.
Hi @PedroBern Thanks! I've just fetched #18 and the problem still occurs. I will look at a possible solution now.
from react-native-collapsible-tab-view.
@alexpchin thanks, please if you solve share it here or open a PR :)
from react-native-collapsible-tab-view.
Hello @PedroBern From what I can tell, I think this is working:
const getHeaderHeight = React.useCallback(
(event: LayoutChangeEvent) => {
const value = event.nativeEvent.layout.height - tabBarHeight;
if (Math.round(value * 10) / 10 !== Math.round(headerHeight * 10) / 10) {
onHeaderHeightChange?.();
setHeaderHeight(Math.max(value, 0));
setTranslateY(
scrollY.interpolate({
inputRange: [0, Math.max(value, 0)],
outputRange: [0, -value],
extrapolateRight: 'clamp',
})
);
}
},
[headerHeight, onHeaderHeightChange, scrollY, tabBarHeight]
);
Accompanied by:
{renderHeader()}
from react-native-collapsible-tab-view.
Of course! Already pushed to #18
from react-native-collapsible-tab-view.
Solved in v1.3.1
, with #18
from react-native-collapsible-tab-view.
Thanks :) please let me know if you find more problems
from react-native-collapsible-tab-view.
Related Issues (20)
- 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
- In Recent update if we use Lazy then all content in tabs goes blank.(BUG) HOT 1
- Cannot read property 'stateNode' of undefined when using Tabs.Flatlist
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.