Comments (22)
static navigationOptions = {
header: null
}
from react-navigation.
@mdramos I gave that a try, and it shifted down the content of the hidden header page during the animation.
from react-navigation.
There are may hacks
Try this solution
const style = StyleSheet.create({ hideText:{ display:"none" } })
static navigationOptions = { header: <Text style={style.hideText} ></Text> };
from react-navigation.
static navigationOptions = {
header: {
style: { position: "absolute" }
}
};
Anyone see any problems with using this hack in order to hide the header on a specific view?
from react-navigation.
Why is this issue closed? on Android the header is still shown even thou I set header: () => null (just setting it to null will throw errors for me). the screen is moved up as id there where no header when I set this but the floating header is still visible.
<Stack.Navigator
initialRouteName="Register"
mode="modal"
headerMode="float"
screenOptions={{
header: ({ scene, previous, navigation }) => (
<NavMenu handleDrawerMenu={handleToggleDrawer}/>
),
}}
>
<Stack.Screen
name="Register"
component={RegisterRecyclablesFormScreen}
options={{ headerTitle: 'Register' }}
/>
<Stack.Screen
name="Scan"
component={ScanBarcodeScreen}
options={{
header: () => null,
}}
/>
</Stack.Navigator>
@lprhodes Could there be some clarification as to how to hide a header that works with headerMode = 'float'?
from react-navigation.
Having worked on this today I think it needs some further discussion.
To fit into what's already in the code I worked on a method named "shouldEmbedHeader" which determines whether the header should float outsides all scenes or sit inside the current scene depending on the navigationOptions of the current scene and the one previously shown.
When we transition from headerVisible: false
to headerVisible: true
it keeps the header inside the view (as if it were mode: 'screen') but then seamlessly swaps it out to a floating header when the transition is complete.
There's various edge cases to deal with so it's not ready to release but I'm concerned that it already feels very much like a hack so I'd like to get some thoughts from the core developers.
@skevy @grabbou @satya164 @cooperka
from react-navigation.
complete solution:
app.js:
auth: {
screen: StackNavigator({
auth: { screen: AuthScreen },
login: { screen: LoginScreen }
})
},
auth: (shows no header)
class AuthScreen extends Component {
static navigationOptions = {
header: null
}
login: (shows header)
class Login extends Component {...
from react-navigation.
...to be clear I'm attempting to allow any combination of modes and visible header and allowing for modal as we can natively.
from react-navigation.
Let's merge headerMode: 'none' | 'screen' | 'float'
and header.visible: boolean
, to header.mode: 'none' | 'screen' | 'float'
.
from react-navigation.
@ericvicenti ^ ?
from react-navigation.
Only problem I see is that header.visible
changes the header on a per-screen basis, and headerMode
changes it for the whole navigator. What happens if you transition from a float screen to a screen with mode: 'screen'
?
The animation for that isn't very easy.. what would it look like?
from react-navigation.
@ericvicenti the only difference between them is when the animation is happening, right? it shouldn't be visible if changed just before the animation starts, .i.e when the state changes.
from react-navigation.
To be clear, you are suggesting to have the floating header simply hide when the next header.mode:screen
screen enters? Such that either A) the floating header instantly disappears, or B) both headers are visible during the transition?
Depending on the animation implementation, B might be quite nice.
from react-navigation.
Working on a similar transition, I would love to see B implemented
from react-navigation.
i would like to be able to hide the header when the mode is float. we could just have it as is now, and just enable the hiding. i guess thats simpler than the suggestions above.
from react-navigation.
With react-router-flux it was working quite well for my use case: Starting of with no header visible on the main screen. Then navigate to the next screen by using the "screen mode animation", which will have a header. All animations ontop of this view are of type "float" then
from react-navigation.
yea i was using react native router flux too. feels more native now, but also feels weirdly set up. the api of flux is better I think. I like some stuff here but even though this is muuuuuch better than previous navigator attempts, it still feels half way there. I guess it will get better with time :)
from react-navigation.
I'll be working on this in the morning. I'll keep you posted!
from react-navigation.
@fritz-c did you find a solution? or switched to another navigation library?
from react-navigation.
check out this example: https://github.com/react-navigation/react-navigation/blob/master/examples/NavigationPlayground/js/StackWithHeaderPreset.js
you can hide header on specific screens and it will transition as expected between header/no header
from react-navigation.
Cannot Hide Parent Header In nested Tab & Stack Navigator!
from react-navigation.
I've tried to use this on the screen that overrides the float header... but doesn't works!
React.useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, [navigation]);
any workaround for this in v5???
from react-navigation.
Related Issues (20)
- Header focus issue on AndroidTV HOT 1
- 'createDrawerNavigator' is crashing the app
- Height of header with active search input seems to be ignored during back navigation transition on iOS
- 7.0.0-alpha `static` router conditional not working on iOS HOT 6
- Issue unit testing a navigation container (createInteractionHandle is not a function) HOT 3
- Elements with `position: absolute` disappear during screen transition HOT 3
- Crash due to useNativeDriver true for tab animations with android 12 devices HOT 2
- Cannot read property 'name' of undefined in "MaterialTopTabView" HOT 4
- Dropdown and popover components opening at incorrect position in iOS when using default header in React Navigation 6 stack HOT 2
- getState typescript error after version 6.1.10 HOT 1
- Header height not getting calculated in pageY value for components in new architecture HOT 3
- Incorrect pageY value when only using default header of react navigation stack in new architecture HOT 3
- v7 Navigating back randomly causes NAVIGATE action to be dispatched instead of GO_BACK HOT 2
- Possible EventEmitter memory leak detected HOT 1
- Pressable interaction issue with StackNavigator on iPhone Xs + new architecture HOT 8
- 7.0.0-alpha.15 @react-navigation/material-top-tabs - tabBarIcons are not showing. HOT 4
- Adjust the margin of the bottom menu bar HOT 3
- DRAWER ENCERRA O APLICATIVO HOT 10
- Sometimes duplicate tab bar labels appear in bottom tabs HOT 1
- unmountOnBlur shows white screen randomly when switchint tabs 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-navigation.