In react navigation v5, when implementing a materialTopTabNavigator, how can I remove the bottom horizontal border separating the tab menu and individual tab pages?
I've tried borderWidth, borderBottomWidth, borderTopWidth in tabBarOptions.style to no avail.
screenOptions={{
tabBarStyle: {
borderTopWidth: 0
}
}
The bottom line is not a border, but a shadow (on iOS) and elevation (on Android). So the fix is:
<Tab.Navigator
tabBarOptions={{
style: {
elevation: 0, // for Android
shadowOffset: {
width: 0, height: 0 // for iOS
},
}
}}
>
// ...
In addition, on Android, when tapping the icon, an indicator line briefly appears at the bottom. Make that invisible by setting the elevation prop in indicatorStyle:
<Tab.Navigator
tabBarOptions={{
indicatorStyle: {
width: 0, height: 0, elevation: 0,
}
>
// ...
<Tab.Navigator
tabBarOptions={{
activeTintColor: "#fff",
inactiveTintColor: "#fff",
activeBackgroundColor: "#090D20",
inactiveBackgroundColor: "#192665",
style: {
backgroundColor: "#192665",
height: 60,
borderTopColor: "red", //Change Like This
},
}}
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="ContactsScreen" component={ContactsScreen} />
</Tab.Navigator>[enter image description here][1]
tabBarOptions: {
style: {
// Remove border top on both android & ios
borderTopWidth: 0,
borderTopColor: "transparent",
elevation: 0,
shadowColor : '#5bc4ff',
shadowOpacity: 0,
shadowOffset: {
height: 0,
},
shadowRadius: 0,
}
}
Related
I would like to add a outside box shadow in react-native-navigation.
The desired effect should look like this:
Currently when I apply styles the outside box shadow does not change:
import React, { FunctionComponent } from 'react'
import NavigatorProps from './NavigatorBottomTabs.type'
import { Screen } from '../../Module/Navigation/Navigation.type'
import Route from '../../Module/Navigation/Navigation.route'
import { ANY } from '../../Type/Type'
import TabBar from './NavigatorBottomTabs.TabBar'
const RenderScreen = (Tab: ANY) => (screen: Screen) =>
<Tab.Screen key={screen.name} {...screen} />
const NavigatorBottomTabs: FunctionComponent<NavigatorProps> = (props) => {
const Tab = props.Tab
return (
<>
<Tab.Navigator
tabBar={TabBar}
initialRouteName={Route.RootDabshboardProfileRouter}
tabBarOptions={{
borderWidth: 1,
borderColor: 'red',
marginTop: 10,
style: {
borderTopWidth: 0,
elevation: 8,
backgroundColor: '#d9d9d9',
shadowColor: '#000000',
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 1
}
}
}}
screenOptions={{
tabBarStyle: {
elevation: 8,
borderTopWidth: 0,
backgroundColor: '#d9d9d9',
shadowColor: '#000000',
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 1
}
}
}}
>
{props.screens.map(RenderScreen(Tab))}
</Tab.Navigator>
</>
)
}
export default NavigatorBottomTabs
I want to create a round Button for profile pic in React Native, but it did not work. The button should be round and clickable, and should have a pmg image inside it. What am I doing wrong here?
I used a blue background image, then on top op it TouchableOpacity wrapper for holding the image as button.
const Main = () => {
return (
// Container
<View style={styles.container} >
<ImageBackground
source={require('../images/background.png')}
style={styles.backgroundImage}>
<View>
<TouchableOpacity style={styles.profileButton}>
<Image source={require('../images/profilePicture/boy.png')} />
</TouchableOpacity>
</View>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
// paddingTop: '6%',
flex: 1,
},
backgroundImage: {
flex: 1,
resizeMode: "cover",
width: '100%',
height: '100%',
},
topBar: {
height: '40%',
// color : 'red',
// flex: 1,
// alignItems: 'stretch'
},
profileButton: {
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.2)',
alignItems: 'center',
justifyContent: 'center',
width: '13%',
height: 50,
// backgroundColor: '#fff',
borderRadius: 50,
},
});
export default Main;
Be sure to add image dimensions. Lol. I completely forgot that:
profileButton: {
borderWidth: 1,
// borderColor: 'rgba(0,0,0,0.2)',
width: '13%',
height: 50,
backgroundColor: '#fff',
borderRadius: 50,
padding: '1%',
margin: '1%',
},
profileImage: {
height: undefined,
width: undefined,
flex: 1
},
I'm trying to make the background of my BottomTabNavigator transparent.
I've tried setting the position to 'absolute', this makes the background transparent but now the tab bar is not clickable anymore. Does anyone knows a solution?
tabBarOptions: {
inactiveBackgroundColor : COLORS.TINTCOLOR,
activeBackgroundColor: COLORS.TINTCOLOR,
activeTintColor: COLORS.WHITE,
inactiveTintColor: COLORS.WHITE,
showLabel: false,
labelStyle: {
fontSize: 12
},
style: {
borderTopWidth: 0,
borderTopColor: COLORS.TINTCOLOR,
height: 50,
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'transparent',
borderTopLeftRadius: 25,
borderTopRightRadius: 25,
overflow: 'hidden',
},
},
listRowInsets(_:) is not working as expected when using List() and List(Data,id). in Example 1 below works perfectly with zero insets, while in Example 2 it does nothing.
Example 1:
struct ContentView: View {
var body: some View {
List {
Color.red
.listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
Color.blue
.listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
Color.yellow
.listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
}
}
}
The Result:
Example 2
struct ContentView: View {
var colors: [Color] = [.red, .blue, .yellow]
var body: some View {
List(colors, id: \.self) { color in
color.listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
}
}
}
The Result:
I assume the reason is in used constructors. The .listRowInsets by documentation effects view being placed in List (directly).
The following works
var colors: [Color] = [.red, .blue, .yellow]
var body: some View {
List {
ForEach(colors, id: \.self) { color in
color.listRowInsets(.init(top: 0, leading: 0, bottom: 0, trailing: 0))
}
}
}
In addition to Asperi's answer, if you have sections, you need to apply the listRowInsets view modifier to the section, otherwise the setting is also going to be ignored.
I tried to change the header style of the Datagrid component based on material-ui style guide. Datagrid body content is updated based on custom style but the header is not reflected the custom style changes.
the code snippet is below:
export const TableStyleProp = {
style: {
color: "#ff0000"
},
selectable: true,
headerStyle: {
color: "#ff0000"
},
bodyStyle: {}
};
const muiTheme = getMuiTheme({
table: {
backgroundColor: "#FF0000 !important"
},
thead: {
backgroundColor: "#b7cbfb"
},
tableHeader: {
borderColor: "#FF0000",
backgroundColor: "#FF0000"
},
tableHeaderColumn: {
textColor: "#FF0000",
height: 56,
spacing: 24
},
tableRow: {
hoverColor: "#FF0000",
stripeColor: "#FF0000",
selectedColor: "#FF0000",
textColor: "#FF00FF",
borderColor: "#FF0000",
height: 48
},
tableRowColumn: {
height: 48,
spacing: 24
}
});
<MuiThemeProvider muiTheme={muiTheme}>
This is described in the documentation: https://marmelab.com/admin-on-rest/List.html#custom-grid-style