Tried different things none of them working, documentation also doesn't help
<MainFlowStack.Navigator
screenOptions={{headerTitleAlign: 'left', shadowColor: 'transparent', headerStyle: {height: 200}}}
>
<MainFlowStack.Screen name="RoutinesList" component={RoutinesListScreen} option={{headerStyle: {height: 600}}} options={{
headerTitle: (props) =>
(<View style={{width: '100%'}}>
<Text style={styles.header1}>
Your Workouts
</Text>
</View>),
headerShadowVisible: false,
headerStyle: {height: 100}
}} />
<MainFlowStack.Screen name="RoutineScreen" component={RoutineScreen} options={({ route }) => ({ title: route.params.name })} />
</MainFlowStack.Navigator>
The headerStyle prop for the Stack.Navigator does not support setting a custom height. From the official documentation:
headerStyle
Style object for header. Supported properties:
backgroundColor
As far as I am concerned, this has changed compared to react-navigation v5.
However, we could provide a custom header component and set a specific height this way.
<Stack.Screen
options={
header: (props) =>
(
<View style={{ height: 100 }}>
...
</View>
),
}
/>
I don't have enough reputation to write a comment, but #fabriziocucci i actually right. You can edit height of header.
I created custom component for header and just passed it in header prop like this:
<Tab.Navigator
screenOptions={({route}) => ({
header: NavHeader,
})}>
<Tab.Screen name="myComponent" component={myComponent}/>
</Tab.Navigator>
and then in styles:
style={{width: '100%', maxHeight: 20}}
David's answer is not entirely correct. Even though the V6 doc doesn't mention it, I just tested that you can actually set the header height as follows:
<Stack.Screen
component={MyScreen}
name="TripScreen"
options={() => ({
headerStyle: { height: 96 }
})}
/>
Related
I'm working on a React native project, in which I use #react-navigation/bottom-tabs: v 6.3.1, for navigation control.
// Navigations.js
<Tab.Screen
name='ExerciseTabScreen'
component={ExerciseStack}
options={( {route, navigation} ) =>({
title : 'Entrenamientos',
headerStyle: {backgroundColor: '#efb810', borderBottomLeftRadius: 6, borderBottomRightRadius: 6},
headerTitleStyle: {color: 'whitesmoke'},
headerShown: 'ExerciseTabScreen' === route.name ? console.log(true) : console.log(false),
headerRight: () => (
<TouchableOpacity onPress={ () => navigation.navigate('<')}>
<Text>Home</Text>
</TouchableOpacity>
),
})}
/>
I can't access the name of the ExerciseTabScreen I swear I've spent a lot of research on it, I even tried to use a Switch and the only thing I get from the console is a True when I change to any of the routes. I already tried wrapping the route.name in square brackets:
headerShown: 'ExerciseTabScreen' === [route.name] ? console.log(true) :
console.log(false),
However I get false when changing to any of the routes. How can I dynamically access the headerShown?
I am using gestureResponseDistance to increase the swipe back area, but it's not working, and it shows me No overload matches this call.
<HomeStack.Navigator
screenOptions={{
gestureResponseDistance: {vertical: 200, horizontal: 150},
}}>
<HomeStack.Screen
options={{
headerTitle: 'Home',
headerStyle: styles.header,
headerTitleStyle: styles.headerTitle,
}}
name="HomeScreen"
component={HomeScreen}
/>
//...........
</HomeStack.Navigator>
any clue what's the problem? or maybe solutions?
gestureResponseDistance accepts a number in 5.x, not an object.
https://reactnavigation.org/docs/upgrading-from-5.x/#the-gestureresponsedistance-option-is-now-a-number-instead-of-an-object
But I also see you're using createNativeStackNavigator which doesn't have this option. Only createStackNavigator supports gestureResponseDistance.
I have a Viewinside a SafeAreaView in a screen which has postion:absolute. When I include the view, a TouchableOpacity rendered in the header no longer responds in ANDROID (but always works fine in iOS).
Home screen:
render() {
return (
<SafeAreaView style={styles.SafeAreaContainer}>
<View style={styles.homeBackgroundContainer}> {/* <--- offending view! */}
<BlueCircle style={styles.homeBackgroundSvg} />
</View>
<View style={styles.homeView}>
<View style={styles.homeGreetingContainer}>
<Title style={styles.homeGreeting}>Hi, </Title>
<Title style={styles.homeGreetingName}>{username}</Title>
</View>
// Other components
</View>
</SafeAreaView>
);
}
styles.homeBackgroundContainer:
homeBackgroundContainer: {
borderColor: COLOR.transparent,
position: 'absolute',
top: '-50%',
left: '-25%',
right: 0,
bottom: 0,
},
The header is declared in the drawer navigator screen options. Note the TouchableOpacity in the header - this is used to open the drawer.
works in iOS
works from the "Content" screen
works when the homeBackgroundContainer(and its children) are commented out (Home Screen)
DOES NOT WORK IN ANDROID when homeBackgroundContainer is rendered (Home Screen).
Drawer Navigation & Header:
function DrawerContainer() {
return (
<Drawer.Navigator
screenOptions={({navigation}) => ({
headerLeft: titleLogo,
headerStyle: {
// colors only
},
headerTitle: () => {},
headerRight: () => (
<TouchableOpacity
style={styles.hamburgerIconButton}
onPress={() => navigation.toggleDrawer()}>
<Image source={require('../assets/hamburger.png')} />
</TouchableOpacity>
),
})}>
<Drawer.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: true,
// more options
}}
/>
<Drawer.Screen
name="Content"
component={ContentScreen}
options={{
headerShown: true,
}}
/>
</Drawer.Navigator>
);
}
styles.hamburgerIconButton:
hamburgerIconButton: {
marginRight: 20,
},
Other questions on SO have shown that absolute positioning can affect TouchableOpacity. I have tried setting the zIndex of the TouchableOpacity to 1, and also tried setting a positive elevation value but there is no change in behaviour.
Visually, I can see the header colors and content is rendered on top of the view which is the desired state. So if the header is rendered over the view, why isn't the TouchableOpacity responding?
To get the TouchableOpacityin a navigation header to respond on android when there's a view on the screen which has postion: absolute, I had to bring the headerStyle(not the touchable opacity style) forward on the z-axis.
screenOptions={() => ({
headerStyle: {
zIndex: 1,
},
})};
I have a application in React Native, and I'm applying some rotation effects to my drawer, in my application running on the phone, everything works perfectly, but when I migrate to react-native-web it doesn't work correctly, as you can see in the image below, the difference which stays on the screens when it runs on a cell phone and when it runs on the web.
In the web, when the drawer is closed, it still applies the rotation effect, that's doesn't could happen. I put my project into codesandbox.io
To correct this problem, I tried to use Animated.concat(), but it still didn't work:
<Animated.View
style={[
styles.animatedView,
{
borderRadius: "50px",
transform: [
{ rotate: Animated.concat("-8deg") },
{ translateX: Animated.concat("70px") },
{ translateY: Animated.concat("20px") }
]
}
]}
>
<Stack.Navigator
screenOptions={{
headerTransparent: true,
headerTitle: null,
headerTitleAlign: "left",
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.openDrawer()}>
<View style={styles.screenOptionsView}>
<Image
source={require("../assets/images/menu.png")}
style={styles.screenOptionsImage}
/>
<Text style={styles.screenOptionsText}>START</Text>
</View>
</TouchableOpacity>
)
}}
>
<Stack.Screen name="Start" component={Start} />
<Stack.Screen name="Cart" component={Cart} />
<Stack.Screen name="Favorites" component={Favorites} />
<Stack.Screen name="Orders" component={Orders} />
</Stack.Navigator>
</Animated.View>
Do you know how I can make it work on the web as well as it works on mobile?
Thank you very much in advance!!!!
I am having a stack navigator that consists of 7 different screens and a cart icon is placed on the every screen header. I want to navigate by pressing that cart icon to the cart screen/page. I tried to put onPress function on the icon and in the header option also but all in vain.
Also, I want to know how the cart system will work.
Below is my single stack navigator screen
<HomeStack.Screen name="EARRINGS" component={Earring}
options={{headerRight:() => <ShoppingCartIcon /> }}
/>
Below is my ShoppingCartIcon code:
const ShoppingCartIcon = () => {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View style={{position: 'absolute', top: -20, right: 0, width: 70, height: 70, alignItems:"center",justifyContent:"center", zIndex:2000 }}>
<Text style={{fontSize:20,fontWeight:"bold"}}>0</Text>
</View>
<AntDesign name="shoppingcart" color="black" size={24} style={{marginRight:10}} />
</View>
)
}
export default (ShoppingCartIcon)
Please help me.
You can pass the navigation prop like below
<HomeStack.Screen
name="EARRINGS"
component={Earring}
options={({ navigation }) => ({
headerRight: () => (<ShoppingCartIcon navigation={navigation}/> )
})}
/>
And you can use the navigation prop to navigate to any screen you need
const ShoppingCartIcon = ({navigation}) => {
//other code
navigation.navigate('Cartscreen')
}