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%'
...
}}>
Related
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.
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>
I can't find if it's possible to create tabs in screen in React Native. IS there any way to do this? I mean, I already use StackNavigator and I can't understand how to add TabNavigator to screen from StackNavigator.
Update! Solution for this question is really simple, but for me, totally it wasn't obvious at all! Just set flex style to your view
Example:
<View style={{ flex: 1 }}> // <- this is main screen
<View> // <- this is screen header, you don't change this when click on Tab
Some header
</View>
<View style={{ flex: 2 }}>
<YourTabNavigator /> // <- your tabs (imported from external or same file)
</View>
</View>
Yes, you can create tabs, as it is common design used in mobile applications.
As I can't use comments to get some neccessary information.
However I'll try to provide a generic answer.
If you are using react-navigation then you can create tabs with TabNavigator provided by react-navigation. Documentation contains the neccessary code as well.
You can also use some pure JS component like react-native-tabs
And if you are using some other navigation library, you can see the corresponding documentation.
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