I'm facing a little problem with the header included with the stackNavigator in react-native.
The header title default style seems to be set as alignSelf: start, however, i can't change it to center in my application.[![Header is not centered][1]][1]
https://i.stack.imgur.com/1Ih7Q.png
Here is the code for my routes section:
import * as React from 'react';
import {createStackNavigator} from '#react-navigation/stack';
import {NavigationContainer} from '#react-navigation/native';
import Main from './pages/Main';
import User from './pages/User';
const Stack = createStackNavigator();
export default function Routes() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerStyle: {backgroundColor: '#7159c1'},
headerTintColor: '#fff',
headerTitleStyle: {
alignSelf: 'center',
alignItems: 'center',
color: '#fff',
},
}}>
<Stack.Screen name="Home" component={Main} />
<Stack.Screen
name="User"
component={User}
options={({route}) => ({title: route.params.user.name})}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
I don't know exactly why what you did doesn't work, but try to add headerTitleAlign: 'center' property to screenOptions (not to headerTitleOptions inside screenOptions)
In my case I was using react-navigation version 4 EXPO, So I use
headerTitleStyle : { marginTop: Platform.OS == 'ios'? 12:5, textAlign: 'center', width: '90%' },
I use textAlign: 'center' and width: '90%' under headerTitleStyle.
And it works Fine for me.
I am not sure that it will work for with others versions.
Related
This question already has answers here:
CSS Grid - 2x2 grid always taking up the full width when possible
(1 answer)
How to set up a dynamic grid based on flex or grid
(1 answer)
Closed yesterday.
I want to create a dynamic grid in the flatlist, but it is not dynamic when data increases, my data is an array of object which has images and other information too.
I am using
columnWrapperStyle={{flexWrap: 'wrap', flex: 1 / 2}}
width: "100%",
height: height / 2.3,
I want to create something like this
if there is one image the grid should cover full width and if two images it should take half of width,
now the main issue I want to do something when there are three images the first height should be full and others will divide the height in half, same for the last one.
thanks.
You should use or get inspired by this package - https://www.npmjs.com/package/react-native-fb-image-grid
import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import FbGrid from "react-native-fb-image-grid";
class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.inner_container}>
<FbGrid
images={[
"https://facebook.github.io/react-native/docs/assets/favicon.png",
]}
/>
</View>
<View style={styles.inner_container}>
<FbGrid
images={[
"https://facebook.github.io/react-native/docs/assets/favicon.png",
"https://facebook.github.io/react-native/docs/assets/favicon.png",
]}
/>
</View>
<View style={styles.inner_container}>
<FbGrid
images={[
"https://facebook.github.io/react-native/docs/assets/favicon.png",
"https://facebook.github.io/react-native/docs/assets/favicon.png",
"https://facebook.github.io/react-native/docs/assets/favicon.png",
]}
/>
</View>
<View style={styles.inner_container}>
<FbGrid
images={[
"https://facebook.github.io/react-native/docs/assets/favicon.png",
"https://facebook.github.io/react-native/docs/assets/favicon.png",
"https://facebook.github.io/react-native/docs/assets/favicon.png",
"https://facebook.github.io/react-native/docs/assets/favicon.png",
"https://facebook.github.io/react-native/docs/assets/favicon.png",
"https://facebook.github.io/react-native/docs/assets/favicon.png",
]}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#eee",
},
inner_container: {
width: "100%",
height: "20%",
},
});
export default App;
Live Demo - https://snack.expo.dev/#emmbyiringiro/c182c6
When using react-native-pdf and the example uri provided it does not appear in my app. A loading bar is only displayed. Does anyone know what may be causing this issue?
Loading bar displayed underneath messages:
Code below:
return <SafeAreaView style={{ flex: 1}}>{chat}
<View style={styles.container}>
<Pdf
source={{uri:'https://samples.leanpub.com/thereactnativebook-sample.pdf',cache:true}}
onLoadComplete={(numberOfPages,filePath)=>{
console.log(`number of pages: ${numberOfPages}`);
}}
onPageChanged={(page,numberOfPages)=>{
console.log(`current page: ${page}`);
}}
onError={(error)=>{
console.log(error);
}}
onPressLink={(uri)=>{
console.log(`Link presse: ${uri}`)
}}
style={styles.pdf}/>
</View>
</SafeAreaView>;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
marginTop: 25,
},
pdf: {
flex:1,
width:Dimensions.get('window').width,
height:Dimensions.get('window').height,
}
});
I am using the native-base button and trying to download the image by pressing the button. It's is working perfectly fine in IOS but not working in Android. Here is my code
<View
style={{
marginVertical: hp("2%"),
marginHorizontal: wp("15%"),
textAlign: "center",
width: "100%",
}}
>
<Button
onPress={() => downloadFile()}
style={{
backgroundColor: "#fff",
width: "60%",
borderRadius: 0,
}}
block
>
<Text
style={{
color: "black",
fontSize: RFPercentage(2.1),
fontFamily: "BalsamiqSansBold",
}}
>
ADD TO PHOTOS
</Text>
</Button>
</View>
The downloadFile() function is called in IOS when the button is being pressed but it's not working in the case of Android.
I also tried console logging on press like this
<Button
onPress={() => console.log("Button Clicked")}
style={{
backgroundColor: "#fff",
width: "60%",
borderRadius: 0,
}}
block
>
It's working in IOS but not in the case of Android.
Also if I directly call the function on onPress like this in Android it automatically logs Button Clicked without being pressed. I tried to figure all the possible ways to resolve it but I am not getting the exact cause of this issue.
<Button
onPress={console.log("Button Clicked")}
style={{
backgroundColor: "#fff",
width: "60%",
borderRadius: 0,
}}
block
>
Maybe you are facing an issue regarding TouchableOpacity in android.
You can import ToucahableOpacity from 'react-native-gesture-handler' and hopefully this will help a lot.
You can import like this
import {TouchableOpacity} from 'react-native-gesture-handler'
import {TouchableOpacity } from 'react-native'
<TouchableOpacity
style={styles.button}
onPress={handleSaveLimitValue}
>
<Text
color={colors.white}
weight={TextWeight.DEMI_BOLD}
size={16}
style={styles.buttonText}
>
Save
</Text>
</TouchableOpacity>
Using TouchableOpacity of native module worked for me instead of using import {BaseButton} from react-native-gesture-handler
Hope my answer may help you.
I am trying to achieve dynamic padding top and bottom. I am aware that paddingTop and paddingBottom with % will use the width of the container and I am fine with that.
Unfortunately when I do set the paddingTop to any value with %, it sets the paddingBottom to the same value. Basically paddingTop: '5%', paddingBottom: '0%' will give me equal 5% paddings on both sides.
If I set paddingBottom to any % value - it's just being added to the value that came form the top. So: paddingTop: '5%', paddingBottom: '10%' results in paddingBottom equal to 15%...
I checked the same solution in a web project and there it works as expected.
The snack presenting the problem:
https://snack.expo.io/BJ9-2t8LB
The problem is on both Android and iOS.
How to solve it?
Apply the value to the child container to be applied, not to the parent container.
I have modified the answer according to the conditions you want. You should send Bottom's territory to the parent's container. Because they interact with each other in their child's container, they must be independent.
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.wrapper}>
<View style={styles.inner}>
<View style={{ backgroundColor: 'yellow' }}>
<Text>TOP</Text>
</View>
</View>
<View style={{ backgroundColor: 'red', }}><Text>BOTTOM</Text></View>
</View>
);
}
}
const styles = StyleSheet.create({
wrapper: {
flex:1,
paddingLeft: 24,
paddingRight: 24,
backgroundColor: 'green',
paddingBottom:"5%"
},
inner: {
flex:1,
justifyContent: 'space-between',
backgroundColor: 'blue',
marginTop:"10%"
},
});
That is strange behavior, you should bring it up as an issue to react-native.
In the meantime, a workaround would be applying marginTop and marginBottom to the inner View, instead of paddingTop and paddingBottom to the wrapper View.
const styles = StyleSheet.create({
ayz:{
marginTop:"15%",
backgroundColor:'pink',
alignItems:'center',
justifyContent:'center',
},
asd:{
color:'white',
fontSize:50,
fontWeight:'bold'
}
});
I'm trying to align Views in React Native, and I want that every View is 50% of the screen. Something like :
My state is :
this.state = {
companies: [
{logo_url: require("../../../img/company_logos/ald.png")},
{logo_url: require("../../../img/company_logos/arval.png")},
{logo_url: require("../../../img/company_logos/businesslease.png")},
{logo_url: require("../../../img/company_logos/dieterenusedcars.png")},
{logo_url: require("../../../img/company_logos/psa.png")},
{logo_url: require("../../../img/company_logos/remarketing_center.png")},
{logo_url: require("../../../img/company_logos/vdfin.png")}
]
}
And then in the render method :
render(){
return (
<View style={{flex: 1, flexDirection: 'row'}}>
{this.state.companies.map(company => {
return (
<View style={{width: Dimensions.get('window').width * 0.5, height: 150}}>
<Image source={company.logo_url} style={{width: Dimensions.get('window').width * 0.5, height: 100}}/>
</View>
);
})}
</View>
)
}
But I see only first two logos.
All items are probably shown in one row instead of going to second row if there is no more place on the screen.
Any advice?
In case somebody else has the same problem.
I solved it by adding flexWrap: "wrap" to the parent View
<View style={{flex: 1, flexDirection: 'row', flexWrap: "wrap"}}>