I'm playing around with Flexbox, but I can't seem to figure out why FlexDirection doesn't work when set to 'row'.
export default function WorkoutScreen() {
return (
<SafeAreaView style={styles.container}>
<AppText>Heading</AppText>
<View style={styles.sets}>
<AppText>Reps</AppText>
<FontAwesome name="minus-square" size={48} color="purple" />
<AppText>9</AppText>
<FontAwesome name="plus-square" size={48} color="pink" />
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
sets: {
flex: 1,
**flexDirection: "row",**
justifyContent: "space-between",
alignItems: "center",
marginTop: 100,
},
});
I've been scratching my head about what I'm doing wrong, any tip to fix this would be greatly appreciated! I'm trying an ios simulator on Iphone pro 12 max.
OK I finally figured this out. If you check the [Text documentation][1], it says
The element is unique relative to layout: everything inside is
no longer using the Flexbox layout but using text layout. This means
that elements inside of a are no longer rectangles, but wrap
when they see the end of the line.
So basically I had to wrap the texts inside View tags.
[1]: https://reactnative.dev/docs/text
Related
I'm currently trying to dynamically display different rows of buttons that are evenly spaced out from each other. In my code, two rows have five buttons each, and the third row has only two buttons. Since both buttons are being created using the same component, I was wondering if there was any CSS to help me do this properly.
Currently, here is the code for my the button component:
const NodesOptionButton = (props) => {
const styles = StyleSheet.create({
bold: {
fontWeight: '800',
},
textWrapper: {
width: 60,
height: 60,
borderWidth: 1,
borderStyle: 'solid',
borderColor: '#000',
padding: 12,
marginVertical: 8,
backgroundColor: props.isActive ? '#000' : '#fff',
alignItems: 'center',
justifyContent: 'center',
},
activeTextColor: {
color: '#fff',
}
});
And I'm rendering the three rows of button through this code:
const NPage = (props) => {
const styles = StyleSheet.create({
nodeOptionsContainer: {
flexDirection:'row',
backgroundColor:'red',
display: 'flex',
justifyContent: 'space-evenly',
},
});
//lots of code with logic
return (
<React.Fragment>
<View style={styles.nodeOptionsContainer}>
{nodeNumberOptions}
</View>
<View style={styles.nodeOptionsContainer}>
{clincallyOccultOptions}
</View>
<View style={styles.nodeOptionsContainer}>
{MSIOptions}
</View>
</React.Fragment>
)
Is there any suggestions, or would I have to create a new component for that specific button? Thanks!
You want the two last buttons to take up the whole row? You can always try to add:
flex-grow: 1
to your button component.
If you want your buttons to always take up the whole row, you should just need to add flex: 1 to your Button component root View, and you don't need space-evenly in the parent.
If that's not the case, maybe you should post a pic of the desired design and the current design with problem. It helps understand.
p.s: another tip for performance...define your style outside your component.
I am trying to center an Image within a View both horizontally and vertically the problem is that no matter what I put in the code it still seems to be in the same position all the time. I have this code for another View from another screen and it's exactly how I need it to be, however for the other pages it's not responding.
Here is my code:
<View style={styles.header}>
<Icon
raised
name='chevron-left'
type='octicon'
color='#f50'
onPress={() => this.props.navigation.goBack()}
containerStyle={{ alignSelf:'flex-end', marginRight:20, marginTop:-60 }}/>
<Image source={Logo} style={{resizeMode:'stretch', width:50, height:50, alignItems:'center', marginTop:30, position:'absolute'}}/>
</View>
const styles = StyleSheet.create({
header:{
backgroundColor:'#ff4714',
height:SCREEN_HEIGHT/8,
flexDirection: 'row'
}
});
EDIT: I've removed all the styling for the <Image> except for width and height and the image stays at the same place. I don't know what to make of this
Here is an expo snack https://snack.expo.io/SyCO!ree8
You need to add justifyContent:'center' and alignSelf:'center' to your image style,
Just check the code :
<View style={{
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
}}>
<Image source={{uri:'https://source.unsplash.com/random'}} style={{height:50,width:50,alignSelf:'center'}} />
</View>
And this is expo snack : expo-snack
UPDATE:
HERE IS MY UPDATED EXPO SNACK:
check here
Hope it helps
Try adding:
alignItems: 'center',
justifyContent: 'center'
to your header style
You might also need to add flex:1, depending on the state of your View
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 use percentage value for margin style attribute on my React Native project but it seems to reduce the height of one of my View component. If I replace percentage value by an absolute value, there is no more issue and it works fine. Did you try to use percentage value as margin in React Native ? Here is a little sample of code to reproduce this issue:
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.scene}>
<View style={styles.card}>
<View style={styles.container}>
<Text>Hello World</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
scene: {
backgroundColor: '#F9E8D5',
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'column'
},
card: {
backgroundColor: '#E6D5C3',
flex: 0.2,
flexDirection: 'column',
marginTop: '20%' // Replace by 20
},
container: {
backgroundColor: '#FFFFFF',
flex: 1,
flexDirection: 'column',
justifyContent: 'center'
}
});
Thank you very much !
A component's height and width determine its size on the screen.
The simplest way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.
Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.
Use flex in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use flex: 1.
The following references will be use for styling
https://facebook.github.io/react-native/docs/height-and-width.html
https://medium.com/the-react-native-log/tips-for-styling-your-react-native-apps-3f61608655eb
https://facebook.github.io/react-native/docs/layout-props.html#paddingtop
Use Dimensions to calculate to get the height and width of the screen.
var {height, width} = Dimensions.get('window');
To specify percentage by getting the screen size and convert it into percentage.
Sample example:
const { height } = Dimensions.get('window');
paddingTop: height * 0.1 // 10 percentage of the screen height
This is a real bug but Facebook does not care.
https://github.com/facebook/react-native/issues/19164
I am trying to align the social icon texts under each image like so:
However, I am getting these results:
I placed each row as a separate view
<View style={styles.socialIcons}>
<Image source={require("social/facebook-icon.png")} />
<Image source={require("social/twitter-icon.png")} />
<Image source={require("social/mail-icon.png")} />
<Image source={require("social/message-icon.png")} />
</View>
<View style={styles.socialIconsText}>
<Text style={styles.socialIconText}>Facebook</Text>
<Text style={styles.socialIconText}>Twitter</Text>
<Text style={styles.socialIconText}>Email</Text>
<Text style={styles.socialIconText}>Message</Text>
</View>
followed by their styles:
socialIcons: {
alignItems: 'center',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 40,
paddingRight: 40,
},
socialIconsText: {
backgroundColor: 'transparent',
alignItems: 'center',
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 40,
paddingRight: 40,
},
I think what I should be doing instead is to place the text inside the image tags but, when I do that the images height cuts off any text under it. Is there a way to get the image heights and increase the height in the styles?
Or is there a better way to align the text underneath the images?
i think the padding interferes with the text.
also try to make every image and text element 25% in width + box-sizing: border-box; and center text.
İnstead of seperating image and text of facebook, twitter ... Covering them in a special wiew is better idea. In this way you will have much more control on your views and you can make a dynamic implementation.
<View style = {{flex:1}}>
<View style={{height:80, width:80}}>
<Image style ={{flex:1}}>
...
</Image>
<Text style={{flex:1}}>
</Text>
</View>
.
.
.
</View>
Creating a function for returning special views will save you from repeating codes.
getSpecView(uri,text)//use this params to specify your images and texts
{
return(
...
);
}
And now you just have to do is calling this function
<View style = {{flex:1}}>
getSpecView(*faceuri, *facetext)
getSpecView(*twitter, *twittertext)
.
.
</View>
You can even get rid of calling this function several times for every couple by creating an Json array and calling map function
couples = [{ name:'facebook', uri:'faceuri' }, { name:'twitter', uri:'twitter uri'}]
and now you just have a three lines of codes + a function and a json array.
<View style = {{flex:1}}>
couples.map(this.getSpecView(name,uri))// not sure about syntax
</View>
If you have trouble with images you can use resizeModes
resizeMode PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
https://facebook.github.io/react-native/docs/image.html