I'm doing a drawer navigation with design, but I don't know how to custom an opacity background under it.
To apply blur (like this https://www.w3schools.com/cssref/playit.asp?filename=playcss_filter&preval=blur(5px)) you need to use a third party lib since React Native doesn't support it by default. You can check if this one handles exactly what you need https://github.com/react-native-community/react-native-blur
By the print screen you posted, however, it looks like you want to make a darken background when your menu is activated. To do so, you can apply backgroundColor style to your main component with some value like rgba(0, 0, 0, 0.25). Or you can also have a component over your content that's displayed when your menu is activated. Or your menu container can hold the backgroundColor since the menu itself won't fit the whole screen (I think it's the best option).
Example:
<View style={{ backgroundColor: rgba(0, 0, 0, 0.25), flex: 1 }}>
<Menu>
...
</Menu>
</View>
Consider the code above just as an expression of the idea. You must apply the correct styles to make it
Hope it helps
You can control it by using overlayColor prop in Drawer Navigator.
<Drawer.Navigator
overlayColor="rgba(0,0,0,0.5)"
headerMode="none">
<Drawer.Screen name={ROUTES.HOME} component={HomeStack} />
</Drawer.Navigator>
See this link for more information on the customization of the drawer. https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent
Related
I am having an issue with React Native, #react-navigation/stack and headerMode='screen'. I have a screen with the header hidden. On iOS, in that specific view, when I perform some scrolling or even do the "pull gesture" from top to bottom, an extra margin / padding appears on top of the view.
This is how I define my screen in the navigation:
<Stack.Screen
name="AddressInput"
component={AddressInput}
options={{
headerShown: false,
}}
/>
My AddressInput component is like:
<SafeAreaView sx={{ flexDirection: 'column', flex: 1 }}>
<KeyboardAwareScrollView
contentContainerStyle={{
padding: theme.space[3],
flexGrow: 1,
}}
ref={scrollRef}
keyboardShouldPersistTaps="handled"
>
<Form
validationSchema={validationSchema}
initialValues={initialValues}
fields={fields}
>
<AddressFormFields/>
</Form>
</KeyboardAwareScrollView>
</SafeAreaView>
This works perfectly fine on Android. The header is hidden and the UI works as expected. But on iOS, when I perform scrolling on the view (or even pull down once from the top), an extra padding appears on top of the view and I have no idea why! I am not expecting this to happen.
I've tried dozens of various tricks and measures to find out the cause, but no success. Also referred to the official docs for hours. Any hints?
Attached images. On the second one you can see the text field has some padding compared to the other pic, but that only comes present after performing some scrolling.
(OK) after navigating to screen, but before scrolling
(NOT OK) after scrolling, some extra padding appears on top
I'm trying to change the back button size in my react native app navigation header because android is giving me a warning that the touch target size is to small (30x30px, wants it to be at least 48x48px). I'm using reactnavigation.
I've worked out you can customize the back button in the header using headerLeft and the HeaderBackButton element like so.
<Stack.Navigator
screenOptions={({route, navigation}) => ({
headerLeft: () => <HeaderBackButton style={{height: 100, width: 100}} onPress={() => navigation.goBack(null)}/>
})}>
However, the height and width styles have no effect. I've also tried fontSize with no effect. Would prefer an approach where I don't have to override headerLeft and reimplement all of the back button default behaviors as well just to change the size.
You can style Stack's original headerLeftStyle with headerBackTitleStyle={{fontSize: 100}}
If you want custom Image, use option 'headerBackImageSource'.
If you still trying custom components, onPress={()=> navigation.canGoBack() ? navigation.goBack() : null} can be used.
I am not able to fill the status bar area with component. I tried to do it by hiding the status bar using <StatusBar hidden />. But this one leaves a white space there. For example I want to fill the green image the status bar.
TLDR: working project link
On the gist link (you've provided on the comment), I can see that you are using the following structure
<SafeAreaView>
<StatusBar ... />
<ImageBackground ...></ImageBackground>
</SafeAreaView>
If you want to hide the status bar and cover the whole screen with the image you need to change SafeAreaView to just View and also remove StatusBar component.
<View>
<ImageBackground ...></ImageBackground>
</View>
Cause SafeAreaView will dynamically put some padding at the top. So although you've put style={{ height: '100%', width: '100%' }} it will respect the padding of SafeAreaView cause it is the parent component here.
Also at this point, you do not need StatusBar, cause the StatusBas already has an image as background.
Is it possible to extend the tab view (image) all the way to the top of the screen and have the tab bar overlay it? Tab bars' backgroundColor is "transparent". Using createMaterialTopTabNavigator from React Navigation v3. There seems to have been something along the lines of displayUnderTabBar option in the earlier versions but I can't seem to find it in the documentation anywhere.
What you do is create a custom component for the tabs and position it absolutely over the screens.
<Tab.Navigator tabBar={props => <MyCustomComponent {...props} />}>
{...}
</Tab.Navigator>
Check out the example of a custom tabBar component here.
In the above example, make the positioned absolutely to top. Note that if you do this, however, you will need to change TouchableOpacity to TouchableWithoutFeedback because of the problem noted in this question question.
In order to do this, following styles need to be applied to the custom Tab Bar component that's passed in to the createMaterialTopTabNavigator:
style={{
...
position: "absolute",
zIndex: 1,
width: '100%'
...
}}>
I am trying to create a tablet application, and I want my layout to have a sidebar and then content inside but I'm not able to do that I tried searching for how to create a nested navigator that will work independently of its parent and render inside its parent but wasn't able to find any help about it anyone knows how to do that or if its possible to define a fixed component for all navigator children.
I tried working on react-native-navigation, react-navigation and react-native-router-flux but none of them till now have helped me with my problem, anyone got any solution?
sorry if it wasn't clear, please ask questions in the comment if you didn't understand what I'm trying to reach
I found the solution by using React Navigation by Facebook where you can create a navigator and a view but either one that is preceeding the other won't show if you don't give it height and width
<View>
<View style={{ height: "100%", width: 150 }}>
<SideBar navigation={navigation} />
</View>
<View>
<ContentNavigator />
</View>
</View>