I use the Navigator.NavigationBar component to make a navbar, but the text not vertical centering.
Like this:
How can I solve this?
I just ran into this issue too. The solution:
<Navigator.NavigationBar
routeMapper={{
Title: (route, navigator, index, navState) =>
{
return (
<View style={{
justifyContent: 'center',
flex: 1
}}>
<Text style={{color: 'white'}}>Candidates</Text>
</View>
);
},
}}
/>
So basically make sure there's a parent wrap on your navbar elements filling the navbars height (the flex: 1 rule) and vertically center its contents with justifyContent: 'center'.
I've done the styles inline for this example, but of course it'd be more efficient to get those from a StyleSheet object.
Related
I'm trying to make a basic tab application with React Navigation and so I have three pages with plain text. They centre vertically but not horizontally on the tabs. This is using alignContent and justifyContent in conjunction with each other (which has worked for me in the past).
At first I suspected the flex was only flexing vertically and so I applied a contrasting colour. However it seems to span the tab. I have also tried textAlign, but neither cases seem to work.
This is an example of one of the screens:
export class ExampleScreen extends Component {
render() {
return(
<View style={styles.container}>
<Text>Example!</Text>
</View>
)
}
}
And here is the StyleSheet:
export const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFF',
alignContent: 'center',
justifyContent: 'center'
}
})
There are no error messages. However I would expect the text to centre horizontally but all I get is this:
Your text is not horizontally center because Text is taking full width of the screen,
you need to center content inside Text
<Text style={{ textAlign: 'center' }}>Example!</Text>
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.
I am having a lot of trouble working with a scroll view and flex dimensions. Basically the initial screen of the app should show a top side "banner" while the bottom is the "content".
The content is going to contain many "cards" that each contain information, and users will be able to scroll down to see the next card, and the next, and etc.
However, the flex property does not seem to be working at all, and I am not even able to create the proper sizes for the "banner" section and the "content" section.
This is my code:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
ScrollView,
TextInput
{ from 'react-native';
import RestaurantCard from './common/RestaurantCard';
export default class MemberArea extends Component<Props> {
constructor(props){
super(props);
this.state = {
searchText: ''
}
}
render() {
return (
<ScrollView contentContainerStyle = {styles.contentContainer}>
<View style={styles.banner}>
<TextInput style={styles.search}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Search for Restaurants"
textAlign= 'center'
textAlignVertical='center'
returnKeyType="search"
/>
</View>
<Text style={styles.dropdown}>
{"What's nearby V"}
</Text>
<View style={styles.cards}>
<RestaurantCard />
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
contentContainer:{
flexGrow: 1,
flexDirection: 'column'
},
cards:{
flex:3,
backgroundColor:'#000000'
},
banner: {
flex:15,
backgroundColor: '#F36B45',
paddingBottom: 80
},
search:{
marginTop: 20,
paddingBottom: 5,
paddingTop: 5,
height: 30,
marginHorizontal: 40,
borderRadius: 20,
backgroundColor: 'rgb(255,255,255)'
},
dropdown:{
color: 'black',
fontWeight:'900',
fontSize:24,
margin:30
}
});
UPDATE: As seen in the comments below, I surrounded my scrollview with another view. I gave the Parent view Flex:1. The problem I run into now is as follows:
If I give the scrollview contentcontainerstyle flexGrow: 1, then the scrolling works as normal, but I cannot give the children sections of the scrollview space dimensions with flex values. However, if I give the scrollview flex:1 (rather than flexGrow), then I can give space dimensions to the children sections, but the scrolling function is disabled. Any help would be greatly appreciated!
Issue you have is you set content inside memberArea to grow according to the content but outside the memberArea, it's fixed. Add flex: 1 style to View in App.
<View style={{flex: 1}}> // App
Then you don't need to set contentContainerStyle for the ScrollView
Why do you set flex: 15? Check the doc first.
Here's the codesandbox
Read the React-Native Docs on Flexbox properly.
[https://facebook.github.io/react-native/docs/flexbox.html][1]
You cannot set Higher values to child Views of the Parent Views.
If you want to divide the Parent's Flex: 1, into 2 children - you can do Flex:0.5 and Flex:0.5 to the two children.
If you want every child to have their own space, assign Flex: 1 to each of them.
Check the Docs and other articles on it for more details.
I would like to create Views with dynamic content that should have some kind of footer that should normally (if there is enough space) look like they are sticked to the bottom.
Before I introduced ScrollViews my code looked like this:
<View style={{flex: 1, justifyContent: 'space-between'}}>
<View>{content}</View>
<View>{stickyFooter}</View>
</View>
After introducing the ScrollView I had to remove flex: 1 because otherwise the ScrollView is not scrollable at all. After that justifyContent became useless because the height of the flex-container is not set to 100%. Therefore both Views just appear next to each other.
To make clear what my view should look like in general:
The button should not be sticked to the bottom, but it should appear at the bottom (if possible).
This is an old question now, but for the benefit of those who end up here from a google search like I did, I paste the solution that worked for me below.
Markup
render = () => {
return (
<View>
<ScrollView style={styles.container}>
...
</ScrollView>
<TouchableOpacity style={styles.floatingActionButton}>
<RkButton
rkType='stretch'>
<RkText>Do stuff</RkText>
</RkButton>
</TouchableOpacity>
</View>
)
}
Styles
const styles = StyleSheet.create(theme => ({
floatingActionButton: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
bottom: 10,
left: 10,
right: 10,
borderRadius: 10,
}
}));
I have used ScrollView in other apps adding just a style={styles.container} with the styles. However in this app I am creating in my styles I have alignItems:'flex-start' which throws an error with just style={styles.container} and instead you need to pass in alignItems:'flex-start' through contentContainerStyle={styles.container}.
Error: Invariant Violation: ScrollView child layout (["alignItems"]) must by applied through the contentContainerStyle prop.
However when I add contentContainerStyle when scrolling down in the view, once the finger is lifted off the phone (or release of the mouse in simulator), the scroll automatically goes back to the top. If I just use style={styles.container} and take out the alignItems:'flex-start' it scrolls correctly, but my items in the UI are not laid out how I need them. What is causing it to scroll back to the top with contentContainerStyle and is there a fix?
render:
var _that = this;
var iconsToShow = icons.map(function (icon, i){
if(i < 81){
return (
<TouchableHighlight
onPress={() => _that.changeIcon(indexToChange, icon)}
underlayColor='#F7F7F7'
key={i}>
<Text style={styles.iconText}><IonIcons name={icon} size={30} color="#555" /></Text>
</TouchableHighlight>
);
}
});
return (
<Carousel width={SCREEN_WIDTH} animate={false} indicatorColor="#444" inactiveIndicatorColor="#999" indicatorAtBottom={false} indicatorOffset={16}>
<View>
<ScrollView contentContainerStyle={styles.container}>{iconsToShow}</ScrollView>
</View>
<View>
//next page for carousel
</View>
</Carousel>
);
I figured out how to get it to scroll. Instead of having the View wrapping the ScrollView and the ScrollView having any flex styling or alignItems:'flex-start' with contentContainerStyle={styles.container}, put that on the View which is a child of the ScrollView and just use style= instead of contentContainerStyle=.
render:
<ScrollView style={styles.container}>
<Text style={styles.goalName}>{goal}</Text>
<View style={styles.viewContainer}>
{iconsToShow}
</View>
</ScrollView>
Styling:
var styles = StyleSheet.create({
container: {
backgroundColor: 'transparent',
paddingLeft:20,
paddingRight:20
},
viewContainer:{
flexDirection:'row',
flexWrap: 'wrap',
alignItems: 'flex-start',
flex: 1
},
iconText:{
paddingLeft:15,
paddingRight:15,
paddingTop:15,
paddingBottom:15
},
goalName:{
textAlign:'center',
marginTop:40,
marginBottom:10,
fontSize:20
}
});
If someone still couldn't fix the problem, try put {flex: 1} into "all" parents of the ScrollView