I am learning react-native and the flexbox layouts don't seem to be consistent. In the code snippet below all I am trying to do is have a divider in the middle of the screen but it always align to the left:
<View style={styles.row}>
<View
style={{
flex: 0.8,
justifyContent:'center',
borderColor: '#1abc9c',
borderWidth: 1
}}
/>
</View>
</View>
let styles = StyleSheet.create({
row: {
flexDirection: 'row',
marginHorizontal: 6,
marginVertical: 6,
},
});
Can somebody please let me know what I am doing wrong here?
Try this:
<View
style={{
flex: 1, // << look at this // Occupy the entire container
flexDirection: "row",
marginHorizontal: 6,
marginVertical: 6,
justifyContent: "center" // center the children horizontally -
//since flexDirection: 'row'
}}
>
<View
style={{
flex: 0.5,
justifyContent: "center",
borderColor: "#1abc9c",
borderWidth: 1
}}
/>
</View>
Related
I am quite new with React native and I'm not sure how to implement this design:
Grid layout
I have 20px horizontal padding around the whole app and I want to size these squares so they would form like a large rectangle with these gaps in between. I don't really want to hardcode these sizes.
I managed to get the design without any gaps by dividing the total width by 3 and then giving the big square 2/3 and the small squares 1/3. But how can I do this with the gaps ?
const themedStyles = useThemedStyles();
const width = Dimensions.get('window').width - 40;
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<ThemedText style={themedStyles.subHeader}>Trending</ThemedText>
<ThemedText style={[themedStyles.accentText, {fontWeight: 'bold'}]}>
See all
</ThemedText>
</View>
<View style={styles.cardContainer}>
<View
style={{
width: (width / 3) * 2,
height: (width / 3) * 2,
backgroundColor: 'white',
borderWidth: 2,
}}></View>
<View>
<View
style={{
width: width / 3,
height: width / 3,
backgroundColor: 'white',
borderWidth: 2,
}}></View>
<View
style={{
width: width / 3,
height: width / 3,
backgroundColor: 'white',
borderWidth: 2,
}}></View>
</View>
</View>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
},
textContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
},
cardContainer: {
flexDirection: 'row',
},
});
See below Code maybe it will help you:
import React from 'react';
import { View, Image, StyleSheet,Dimensions } from 'react-native';
const width = Dimensions.get('window').width - 40;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
padding:20
},
textContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
flex:1,
backGroundColor:'red'
},
cardContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
},
});
const DisplayAnImage = () => {
return (
<View style={styles.container}>
<View style={styles.cardContainer}>
<View
style={{
width: (width / 3) * 2,
height: (width / 3) * 2,
backgroundColor: 'white',
borderWidth: 2,
}}></View>
<View style={{justifyContent: 'space-between'}}>
<View
style={{
width: width / 3.5,
height: width / 3.5,
backgroundColor: 'white',
borderWidth: 2,
}}></View>
<View
style={{
width: width / 3.5,
height: width / 3.5,
backgroundColor: 'white',
borderWidth: 2,
}}></View>
</View>
</View>
</View>
);
}
export default DisplayAnImage;
I'm trying to center two separate texts in their components, I'm using react-native and native-base. I cannot center the text vertically and horizontally within the Text component itself. I have divided into colors to see the problem graphically.
The elements:
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red'
}}>
<Text uppercase={false} style={styles.buttonTextLeft}>
{title}
</Text>
<Text uppercase={false} style={styles.buttonTextLeftGreen}>
{subTitle}
</Text>
</View>
The styles:
buttonTextLeft: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
color: '#005f99',
flex: 1,
flexDirection: 'row',
backgroundColor: 'yellow'
},
buttonTextLeftGreen: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
color: '#94cf1c',
flex: 1,
flexDirection: 'row',
backgroundColor: 'green'
},
what you see commented are all the tests I did. certainly, it is stupid but I have not yet solved, do you have any idea? Thanks.
SOLUTION
For those who had the same problem, I enter the code of my correct and clean current situation (without the backgroundColor):
JS
<View
style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
}}
>
<Text uppercase={false} style={styles.buttonTextLeft}>
{title}
</Text>
<Text uppercase={false} style={styles.buttonTextLeftGreen}>
{subTitle}
</Text>
</View>
Styles
buttonTextLeft: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
flex: 1,
flexDirection: 'row',
lineHeight: normalize(20),
paddingVertical: normalize(4),
color: '#005f99',
},
buttonTextLeftGreen: {
fontFamily: 'Cuprum-Bold',
fontSize: normalize(20),
flex: 1,
flexDirection: 'row',
lineHeight: normalize(20),
paddingVertical: normalize(4),
color: '#94cf1c',
},
Maybe I didn't understand your problem truly, I guess your problem is inside green and yellow area.
I had same issue and for handling this issue I used line-height: 20 and paddingVertical: 5. the 20 and 5 numbers are sample and for my project design. you put your numbers instead of them.
Setting the line height of the text to be the desired height of the box should work. For example if you want the yellow box to be 50 tall you would set lineHeight: 50 on the text.
Hope that helps.
I have tried using both KeyboardAvoidingView and ScrollView to prevent my content from being squished (pushed up) when the keyboard is present. I have tried using padding, height, and position for my behavior but nothing is working. Can someone please tell me how I can force my content to ignore the keyboard and not get pushed up??
return (
<View style={{height: '100%', backgroundColor: '#D6D6D6', position: 'relative'}}>
<View style={styles.wrapper}>
<View style={{height:'100%', borderRadius: 7}}>
<View style={styles.container}>
<ScrollView style={{borderRadius: 7}}
horizontal
showsHorizontalScrollIndicator={false}
scrollEventThrottle={10}
pagingEnabled
onScroll={
Animated.event(
[{nativeEvent: {contentOffset: {x: this.animVal}}}]
)
}
>
{imageArray}
</ScrollView>
<View style={styles.listViewContainer}>
<TouchableOpacity style={styles.listView} onPress={() => Actions.pop()}>
<View style={{flex: 1, flexBasis: 22}}>{listIcon}</View>
<View style={{flex: 2, flexBasis: 57}}><Text style={{color: '#fff'}}>List View</Text></View>
</TouchableOpacity>
</View>
<View style={styles.circleContainer}>
{circleArray}
</View>
</View>
<View style={styles.productsSection}>
<Text style={styles.title}>{prodDesc}</Text>
<Text style={styles.desc}>{prodBrand}</Text>
<Text style={styles.desc}>Item: {prodId || ''}</Text>
<Text style={[styles.desc, {marginBottom: 15}]}>Category: {prodCat}</Text>
<Table borderStyle={{borderWidth: 0}}>
<Rows data={rows}/>
</Table>
</View>
<View style={styles.bodyFooter}>
<QuantityCounter style={{width: '100%', display: 'block', marginRight: 20}} data={{productId: prodId}} />
</View>
</View>
</View>
<View style={styles.footer}>
<View style={styles.cartContainer}>
{cartIcon}
<Text style={{color: '#3A3A3A', fontSize: 14}}>18 items</Text>
</View>
<TouchableOpacity style={styles.viewCartButtonContainer} onPress={() => this.cartRedirect() }>
<Text style={{color: '#fff', fontSize: 15, marginTop: '5%'}}>View Cart</Text>
</TouchableOpacity>
</View>
<Header/>
</View >
);
here are my main styles for this:
var styles = StyleSheet.create({
wrapper: {
backgroundColor: '#E6E6E6',
marginVertical: 15,
marginHorizontal: 10,
borderRadius: 7,
elevation: 3,
maxHeight: '80%',
flexShrink: 1,
zIndex: 0,
marginTop: 75
},
container: {
flex: 1.7,
justifyContent: 'space-between',
alignItems: 'center',
height: '50%',
borderRadius: 7
},
footer: {
justifyContent:'space-between',
alignItems: 'center',
height: '10%',
backgroundColor: '#E6E6E6',
paddingVertical: 15,
paddingHorizontal: 17,
flexDirection: 'row',
borderStyle: 'solid',
borderTopColor: '#8E8E93',
borderTopWidth: 1
},
cartContainer: {
flexDirection: 'row',
width: '35%'
},
viewCartButtonContainer: {
backgroundColor: '#356FAF',
height: '90%',
width: '45%',
padding: 20,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 3
},
bodyFooter: {
backgroundColor: '#F6F6F6',
justifyContent: 'center',
flex: 0.45,
borderTopColor: '#D6D6D6',
borderTopWidth: 1,
borderStyle: 'solid',
borderBottomRightRadius: 7,
borderBottomLeftRadius: 7
},
circleContainer: {
position: 'absolute',
zIndex: 2,
bottom: 10,
left: 10,
flexDirection: 'row',
},
listViewContainer: {
position: 'absolute',
zIndex: 10,
top: 0,
right: 0,
justifyContent: 'center'
},
listView: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderTopRightRadius: 3,
backgroundColor: '#000',
paddingVertical: 5,
paddingHorizontal: 10
},
What it looks like without the keyboard:
What it looks like with the keyboard:
Handling View behavior when toggling a keyboard can be a tricky thing in React Native. There are multiple possible solutions to questions like this, but in this case the solution was this:
Instead of using style={{height:'100%'}} on your components that get pushed up, try using Dimensions:
import {Dimensions} from 'react-native';
const { height } = Dimensions.get('window');
and specify style={{ height }} in the right components.
Another thing that might be worth a try if someone else stumbles on this question:
React Native for Android has some default settings defined in the Android manifest. If you are not using Expo (or CRNA), you can change the behavior of the keyboard in AndroidManifest.xml by changing the windowSoftInputMode rule.
Try changing android:windowSoftInputMode="adjustResize" to android:windowSoftInputMode="adjustPan" or to android:windowSoftInputMode="adjustNothing". You can try to play around with some other options (See here) if this doesn't give you the desired effect.
You should use try behavior as "none" for android and if you don't want to getting small, you can set android:windowSoftInputMode="adjustPan" in manifest file.
and if still face any error checkout react-native-keyboard-aware-scrollview
here on npm.
I went through a similar problem and solved it by changing
android:windowSoftInputMode="adjustPan”
In android manifest.
Also clean and rebuild. This might work
remove the position absolute it will works just fine trust me
for some cases if you want keep defualt manifest
you can move your elements inside a Scrollview it may help.
issue solved for me in this way
Hi I'm new in react native. I would like to ask how to fixed the position of these three colors, because every time i tried to click the search text input and the keyboard goes up those three colors will also goes up. I tried position: 'fixed' but it didnt work.
Screenshot
Here is also the code:
render(){
return(
<View style={{flex: 1}}>
<View style={{flex: 3, backgroundColor: '#E1F1FE'}}>
<View style={styles.form}>
<TextInput
style={styles.input}
placeholder = "Search"
returnKeyType="go"
underlineColorAndroid={'rgba(0,0,0,0)'}
/>
<Icon name="search" size={20} color="#900" style={styles.label} />
</View>
</View>
<View style={{flex: 1, backgroundColor: '#77D3F8'}}>
</View>
<View style={{flex: 1, backgroundColor: '#AEEAF2'}}>
</View>
<View style={{flex: 1, backgroundColor: '#39CFDE'}}>
</View>
</View>
);
}
and the styles
import {StyleSheet} from 'react-native';
module.exports = StyleSheet.create({
navBar: {
backgroundColor: '#EAEAEC',
},
title: {
color: '#rgba(0, 0, 0, 0.65)',
},
buttonText: {
color: '#rgba(0, 0, 0, 0.45)',
},
style3:{
fontSize: 35,
color: '#fff',
padding: 10,
alignContent:'center',
justifyContent: 'center',
},
style2: {
flexDirection: 'row',
alignContent: 'center',
alignItems: 'center',
flex:1
},
buttonstyle: {
flex: 1
},
form:{
flexDirection: 'row',
borderBottomWidth:1,
borderColor: '#00BBD1',
marginTop:80,
marginRight: 40,
marginLeft: 40,
alignContent: 'center',
alignItems: 'center',
},
input: {
height: 40,
borderWidth: 0,
flex: 1
},
label:{
alignContent:'center',
justifyContent: 'center',
marginRight: 10,
color: '#00BBD1'
},
});
Thank you in advance :)
It will not going to be stick to position when keyboard activated. You may need to use keyboardavoidingview or another package like react-native-keyboard-aware-scroll-view So design may not disturb when keyboard activated.
I'm trying to put a white dot over a green square like below.
But no matter how I try I still get this. The background color and margin of the white dot is gone.
Here's the code.
<View style={backgroundColor: 'white', zIndex: 1, margin: 2, borderRadius: 10, borderWidth: 2} >
<View style={backgroundColor: 'green', zIndex: 0} />
</View>
I though zIndex will solve my problem but it doesn't. I've also tried swapping the order but it just give me a plain green square. Help?
<View style={backgroundColor: 'green', zIndex: 0}>
<View style={backgroundColor: 'white', zIndex: 1, margin: 2, borderRadius: 10, borderWidth: 2} />
</View>
I don't think you need/want to use z-index for this. z-index is used for depth, to layer items that occupy the same space.
Read up on it here: CSS Tricks - z-index
I'd agree that you want to make use of flexbox if you're trying to keep everything aligned.
Here's an example:
<View style={styles.container}>
<View style={styles.holder}>
<View style={styles.circleHolder}>
<View style={styles.circle} />
</View>
<View style={styles.square} />
</View>
</View>
and the styling:
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
circleHolder: {
width: 200,
height: 200,
justifyContent: 'center',
alignItems: 'center'
},
circle: {
backgroundColor: 'white',
width: 150,
height: 150,
borderRadius: 75,
borderWidth: 2
},
square: {
backgroundColor: 'green',
width: 200,
height: 200,
},
});
RNPlay: https://rnplay.org/apps/k5DbDQ
<View>
<View style={
backgroundColor: 'white',
zIndex: 1,
margin: 2,
borderRadius: 10,
borderWidth: 2
}/>
<View style={backgroundColor: 'green', zIndex: 0}/>
</View>
Try this. You shouldn't be nesting them, because they are related to each other as a parent and child. By the way you might need to use flex to align them correctly :)