I'm just starting with react native so my apologies for the dumb question.
Trying the change the header colour and add a gradient, not sure what I'm doing wrong.
Everything compiles but header stays white.
const defaultHeaderOptions = {
headerBackground: <LinearGradient
start={{x: -0.01,y: 0.51,}}
end={{x: 1.01,y: 0.49,}}
locations={[0, 1]}
colors={['black', "rgb(139, 27, 140)"]}
style={{ flex: 0 }}/>,
headerTintColor: 'black',
headerLargeTitle: true,}
Assuming you are working with react-navigation v5, headerBackground has to be a function:
headerBackground: () => <LinearGradient {...your props} />,
see the docs on headerBackground
Related
I'm trying to add some background shade to the toggle button and also increase the size a little more, but I'm unable to find the right prop that targets the button.
Here's my code.
<Drawer.Navigator screenOptions={(navigation) => ({
drawerStyle:{width:280},
drawerItemStyle: {
borderRadius: 0,
width: '100%',
marginVertical: 0,
marginLeft: 0,
},
drawerLabelStyle: {
fontFamily: 'sans-serif',
fontWeight:'100'
},
drawerActiveTintColor: '#288df9',
drawerInactiveTintColor: '#444'
})}>
...
</Drawer.Navigator>
Any help on how to style the toggle button will be rightly appreciated.
If you check the implementation of this Drawer you can find that this button is an Image hardcoded inside: https://github.com/react-navigation/react-navigation/blob/b91c9b05ff96727f5fa6ef0bec51b5d7eac06600/packages/drawer/src/views/DrawerToggleButton.tsx#L37
export default function DrawerToggleButton({ tintColor, ...rest }: Props) {
const navigation = useNavigation<DrawerNavigationProp<ParamListBase>>();
return (
<PlatformPressable
{...rest}
accessible
accessibilityRole="button"
android_ripple={{ borderless: true }}
onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
style={styles.touchable}
hitSlop={Platform.select({
ios: undefined,
default: { top: 16, right: 16, bottom: 16, left: 16 },
})}
>
<Image
style={[styles.icon, tintColor ? { tintColor } : null]}
source={require('./assets/toggle-drawer-icon.png')}
fadeDuration={0}
/>
</PlatformPressable>
);
}
I think what you can do is replace the image in your node_modules and using patch-package save it as a patch in your local repository.
Another way is to implement your own Button and use openDrawer/closeDrawer methods to control the drawer.
Pretty simple question and concept here, I am using the react UI Kitten Framework for a React Native Project, and for the life of me I cannot change the styling on the TabBar's Tab components. I've looked at the documentation, and this is where it had lead me...
<View style={LandingPageStyles.container}>
<View style={LandingPageStyles.tabBarContainer}>
<TabBar
indicatorStyle={{color: '#ffffff !important', borderColor: '#ffffff !important'}}
tabBarStyle={LandingPageStyles.loginTab}
style={LandingPageStyles.tabBar}
selectedIndex={selectedIndex}
onSelect={index => setSelectedIndex(index)}
>
<Tab
title="Login"
tabBarStyle={LandingPageStyles.loginTab}
indicatorStyle={{color: '#ffffff !important', borderColor: '#ffffff !important'}}
tabBarStyle={LandingPageStyles.loginTab}/>
<Tab
title='Sign Up'
tabBarStyle={LandingPageStyles.signUpTab}
indicatorStyle={{color: '#ffffff !important', borderColor: '#ffffff !important'}}
tabBarStyle={LandingPageStyles.loginTab}/>
</TabBar>
</View>
<View>
{determineRender()}
</View>
</View>
And I have the following styleSheets...
const LandingPageStyles = StyleSheet.create({
container: {
width: maxWidth,
height: maxHeight,
},
tabBarContainer: {
marginTop: maxHeight * 0.045,
marginLeft: maxWidth * 0.075,
marginBottom: maxHeight * 0.06,
// borderWidth: 1,
// borderColor: 'black',
// width: maxWidth * 0.85,
},
tabBar: {
backgroundColor: 'rgba(52, 52, 52, 0.3) !important',
},
loginTab: {
borderBottomColor: "white",
color: 'white',
},
signUpTab: {
borderBottomColor: "white",
color: 'white',
}
})
Notice that I'm attempting to style the tabs themselves in anyway possible, adding style tabBarStyle and indicatorStyle anywhere it would be relevant. Unfortunately it does nothing and the text color is still some faded blue/grey instead of white, and the borderBottomColor of the selected tab is just blue. Am I shit out of luck an unable to style Kitten elements or is there something I'm missing?
For Changing certain styles in the react native ui kitten library, you would need to use something known as customize mappings.
You can follow the guide here:
Custom Component Mapping
Customizing mappinghttps://akveo.github.io/react-native-ui-kitten/docs/design-system/customize-mapping#customize-component-mapping
The tabview styles are very limited, your styles are ignored/overridden.
Customize component mapping is very cumbersome, lack of documentation, moreover you can't change the layout.
You have to render the components by yourself to fully control the styling
<TabView indicatorStyle={yourStyle} tabBarStyle={yourStyle}>
<Tab style={yourTabStyle}
/* instead of passing the string, you pass the function to render the title */
title={() => <Text style={yourTitleStyle}>Tab1</Text>}
/* same for icon */
icon={() => <Icon name='star' style={yourIconStyle}/>}
>
</TabView>
I've been trying to add a linear gradient as a background to my react native app.
Here is my initial code:
<NavigationContainer theme={MyTheme}>
<Stack.Navigator
initialRouteName="Camera"
screenOptions={{
headerStyle: { elevation: 0 },
}}
>
And here my attempt at adding the gradient:
const MyTheme = {
colors: {
primary: "rgb(255, 45, 85)",
background: () => <LinearGradient colors={["red", "blue"]} />,
},
};
Now, when I console.log(MyTheme.colors) I get background: [Function background
Any idea how I can make this work?
You can try this, may help below code.
<LinearGradient
colors={["red", "blue"]}
start={{x: "Your postition", y: "Your postition"}}
end={{x: "Your postition", y: "Your postition"}}
/>
<View style={{flex:1}}>
<LinearGradient style={{ position: "absolute",
left:0,right: 0, top: 0,bottom: 0,
}}
colors={["#120318", "#221a36"]}
/>
</View>
If you set the LinearGradient's position to absolute, and set left,right,top,bottom as 0, LinearGradient will take up entire space's of its parent element.
I am using React Navigation v5. I try to add some vertical margins for my header. This is what I tried:
navigation.setOptions({
headerStyle: {
backgroundColor: '#f4511e',
marginVertical: 10
},
headerTitleContainerStyle: {
marginVertical: 10,
},
headerTitleStyle: {
marginVertical: 10,
},
})
I hoped at least one of the above style options can have some effect, but my header has no vertical margin still. How to add vertical margin to my navigation header?
Another question is that I would like to show a bottom line of my header, how to do that?
First, You need to increase the header height then you can add margin into the header content. Please try the following code.
this.props.navigation.setOptions({
headerStyle: {
backgroundColor: '#6ff',
height:100,
marginVertical: 10
},
headerTitleContainerStyle: {
backgroundColor:'red'
},
headerTitleStyle: {
backgroundColor:'yellow',
marginVertical: 20,
},
})
You can get default header height in React V5 by using the following code and then you can add more height as per the requirement:-
React navigation V5
import { useHeaderHeight } from '#react-navigation/stack';
const headerHeight = useHeaderHeight()+ `HeightYouWant`;
For the Bottom Line, your can use borderBottomColor and borderBottomWidth style inside headerStyle
headerStyle: {
backgroundColor: '#6ff',
height:100,
marginVertical: 10,
borderBottomColor:"#FF00FF",
borderBottomWidth:5
},
I don't think it is possible to add margin or padding to default navigation options, but there is one thing we can do, is create a custom Header component and pass to navigationOptions such as,
navigation.setOptions({
header:props => <HeaderComponent {...props} />,
})
and our Header Component
export function HeaderComponent(props) {
return(
<View style = {{
height:80,
backgroundColor: '#f4511e',
borderBottomWidth:1,
borderBottomColor:'black',
marginVertical:10,
borderBottomWidth:5,
}}>
<View style={{flex:1, justifyContent:'center'}}>
<Text style={{fontSize:20, textAlign:'center'}}>{props.scene.route.name}</Text>
</View>
</View>
)
}
Also you can use React-Native-Elements , It is easy to use highly customizeable.
https://reactnativeelements.com/docs/header
I am using a tab bar navigator with SafeAreaView.
If I comment out the tab bar nav the parent view covers the entire screen. However when I add a Tab bar it shows a small white view under the tab bar section.
const App = () => {
return (
<SafeAreaView style={styles.droidSafeArea}>
<View style={{ backgroundColor: "red", flex: 1 }}>
<TabNavigator key="MainTabNav" />
</View>
</SafeAreaView>
);
};
export default App;
const styles = StyleSheet.create({
droidSafeArea: {
flex: 1,
backgroundColor: "#2F3438",
}
});
Try this
screenOptions={{
tabBarStyle: {
paddingBottom:0,
},
}}
Please use the tab bar outside the safeAreaView else the safe area view will calculate the notch and will render the tab bar above the notch.
2.If you are using tab bar inside the safe area view use the force inset property of safe area view : <SafeAreaView forceInset = {bottom : 'never} this will make the safeareaview collide with bottom area and your tab bar will render properly.
Note : by using this method you would have to be a bit accurate in providing the styles.
const App = () => {
return (
<SafeAreaView style={styles.droidSafeArea} forceInset = {bottom : 'never'}>
<View style={{ backgroundColor: "red", flex: 1 }}>
<TabNavigator key="MainTabNav" />
</View>
</SafeAreaView>
);
};
export default App;
const styles = StyleSheet.create({
droidSafeArea: {
flex: 1,
backgroundColor: "#2F3438",
}
});
I had the exact same issue and what I did is not use SafeAreaView at all around the tab bar, but simply assigning the color I want the white space to have as the background color for the tab bar.
In your example that would be:
return (
<View>
<TabNavigator style={{ backgroundColor: "#2F3438" }} key="MainTabNav" />
</View>
);
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
activeTintColor: Colors.tabIconSelected,
inactiveTintColor: Colors.tabIconDefault,
style: styles.container
}}/>
</NavigationContainer>
const styles = StyleSheet.create({
container: {
backgroundColor: Colors.darkBackgroundColor,
borderTopWidth: 0
}
});
Note : borderTopWidth: 0 worked for me
For react native navigation V5
<Tab.Navigator
tabBarOptions={{
style: {
borderTopWidth: 0
}
}}
>
<Tab.Screen/>
<Tab.Navigator>
Note: this is for bottom tab
When I was implementing floating button on bottomTabNavigation followed this post, I faced similar issue that tabBar has dirty white space with shadow(I used shadow in style of component).
I used React navigation v6.
issue image1, issue image2 (Sorry, It's my first Answer I post, I can't embed image yet)
I tried to remove it with borderWidth: 0, but not worked.
My case, below is worked for me.
Try this
borderRadius: 25 // some much number that near tabbar height
on
<Tab.Navigator
tabBar={(props) => (
<View style={styles.navigatorContainer}>
<BottomTabBar {...props} />
{isIphoneX() && (
<View
style={[
styles.xFillLine,
{ backgroundColor: "#fff" },
]}
/>
)}
</View>
)}
screenOptions={{
headerShown: false,
tabBarShowLabel: false,
tabBarStyle: {
borderRadius: 25, // add here
borderTopWidth: 0,
borderRadius: 25,
backgroundColor: "transparent",
elevation: 30,
},
tabBarItemStyle: { backgroundColor: "#fff" },
}}
>
...
Then result image is this.
I don't understand why It was worked, but I hope it works for someone.
I had this issue when i was using the TabBarIcon property within the Tab.Screen
Tab being const Tab = createBottomTabNavigator()
I couldn't solve the issue no matter how i used the SafeAreaView.
I solved it by not using the TabBarIcon property and instead making a custom component for the tabBar property on the higher level Tab.Navigator as outlined in the react native docs https://reactnavigation.org/docs/bottom-tab-navigator/
When i created the custom tabBar component it all worked as expected, no funky use of SafeAreaView.