I have these balls that I want to join together. They should like stick together.
Code for the orange squares.
style={{
backgroundColor: 'orange',
display: 'flex',
borderRadius: width
}}
Code for the pink area.
bubbleViewWrapper: {
flexWrap: 'wrap',
backgroundColor: 'pink',
},
refer to image below as stack overflow doesn't allow me upload image
what does it look right now
https://ibb.co/T8L56ZF
What I want
https://ibb.co/5R4hLCV
Html structure
<ScrollView
horizontal={true}
contentContainerStyle={Style.contentContainerStyle}
showsHorizontalScrollIndicator={false}
>
<View style={Style.bubbleViewWrapper}>
{/ {BubbleStore.map((item, index) => { /}
{store.map((item, index) => {
More detailed version of Css
contentContainerStyle: {
height: CONTAINER_SIZE,
padding: wp(2),
paddingHorizontal: wp(4),
// backgroundColor: 'yellow'
},
bubbleViewWrapper: {
width: 'auto',
flexWrap: 'wrap',
alignSelf: 'flex-start',
backgroundColor: 'yellow',
},
circle: {
justifyContent: 'center',
alignItems: 'center',
borde
I have tried flex: wrap and some other properties but nothing seems to work.
Related
I want to put a space between two dash borders, but I don't know how to put it in a styled component.
Is there anyone who can solve my problem?
const LogoBox = styled(Box)(({ theme }) => ({
width: '145px',
height: '145px',
display: 'flex',
borderRadius: '10px',
marginBottom: '24px',
border: '1px dashed',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: theme.palette.info.main,
borderColor: theme.palette.primary.main,
}));
<LogoBox>
<Button>
<Plus size={24} />
</Button>
<BoxTitleText>Max 100x100 px</BoxTitleText>
</LogoBox>
In my React Native app, I'm having trouble with making the children the same width as the parent. Please see image below:
I want the black and the green View to take the whole screen width, therefore get rid of the white background caused by the parent.
How can I achieve this? For example, I tried to apply width: 100% to the children, doesn't work. Several solutions like this, this and this don't work here.
Here is the code:
<View style={styles.containerWholePage}>
<View>
<View style={styles.upper}></View>
<View style={styles.lower}></View>
</View>
</View>
const styles = StyleSheet.create({
containerWholePage: {
alignItems: 'center',
},
lower: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'green',
flex: 6,
width: '100%', // doesn't work
},
upper: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'black',
flex: 3,
width: '100%', // doesn't work
},
});
Do you have an idea what I'm doing wrong?
This work for me as you want.
<View style={styles.containerWholePage}>
{/* <View> */}
<View style={styles.upper}></View>
<View style={styles.lower}></View>
{/* </View> */}
</View>
const styles = StyleSheet.create({
containerWholePage: {
alignItems: 'center',
flex:1,
},
lower: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'green',
// height:100,
flex: 6,
width: '100%', // doesn't work
},
upper: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'black',
flex: 3,
//height:200,
width: '100%', // doesn't work
},
});
I want to vertically center my text inside a view with an explicit height.
Center text vertically in react-native did not fully answer my question because they don't use explicit height.
When I use
<View style={styles.rightContainer}>
<Text style={styles.label2}>
Centered
</Text>
</View>
rightContainer: {
marginRight: 10,
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
},
label2: {
height: 40,
backgroundColor: 'green',
textAlignVertical: 'center',
},
If I take away the explicit height,
label2: {
backgroundColor: 'green',
textAlignVertical: 'center',
},
it works.
I need to set the explicit height because I will convert this View to a tappable button.
How do I make this work?
What am I misunderstanding about react-native layout?
It's because the 'textAlignVertical' property is Android-only. Check the documentation on Text.
You could add an extra container wrapping the text:
export default class FlexDirectionBasics extends Component {
render() {
return (
<View style={styles.rightContainer}>
<View style={styles.labelContainer}>
<Text style={styles.label}>Centered</Text>
</View>
</View>
);
}
}
const styles = {
rightContainer: {
marginRight: 10,
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
},
labelContainer: {
height: 40,
backgroundColor: 'green',
alignItems: 'center',
justifyContent: 'center',
},
label2: {},
};
In react-native I am using FlatList component for rendering a grid-like list of data that looks like:
However, I want to make the first row (or header) with bold text stylesheet. Do I need to renderHeader as another FlatList or is there any better solution for this?
My code for this table:
<View style={stylesCustom.container}>
<FlatList
data={ data }
renderItem={({item}) =><View style={stylesCustom.GridViewBlockStyle}>
<Text style={styles.description} > {item.key} </Text></View>}
numColumns={5}
/>
</View>
const stylesCustom = StyleSheet.create({
container: {
justifyContent: 'center',
flex:1,
marginTop: 20
},
GridViewBlockStyle: {
justifyContent: 'center',
flex: 1,
alignItems: 'center',
backgroundColor: '#00BCD4',
borderWidth: 1,
borderColor: 'black'
},
GridViewInsideTextItemStyle: {
color: '#fff',
padding: 10,
fontSize: 18,
justifyContent: 'center',
},
}
Lets assume that we have those react native styles:
var styles = StyleSheet.create({
parentView:{
width: 400,
height:150
},
containerView:{
flex:1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor:'black'
},
child1:{
backgroundColor: 'red',
alignSelf: 'flex-start'
},
child2: {
backgroundColor: 'yellow'
}
}
and that we have this render function:
render: function(){
return(
<View style={styles.parentView}>
<View style={styles.containerView}>
<Text style={styles.child1}>Child1</Text>
<Text style={styles.child2}>Child2</Text>
</View>
</View>
);
}
This code produces this image:
but what I want to achieve is this image:
VERY VERY IMPORTANT: I want child2 to be TOTALLY centered within the containerView, and not a bit far to the right because of the space that child1 occupies.
How can I achieve that in react-native?*
p.s.: Keep in mind that this will run on many resolutions (many screens with different aspect ratios) thus, it cannot be set in an absolute way that would result on it only working on "some" screens but not on others.
not sure if this is the best way to do it, but it works for me
render() {
return(
<View style={styles.parentView}>
<View style={styles.containerView}>
<View style={styles.rowContainer}>
<View style={styles.rowItem}>
<Text style={styles.child1}>Child1</Text>
</View>
<View style={styles.rowItem}>
<Text style={styles.child2}>Child2</Text>
</View>
</View>
</View>
</View>
);
const styles = StyleSheet.create({
parentView:{
width: 400,
height:150
},
containerView:{
flex:1,
flexDirection: 'row',
alignItems: 'center',
backgroundColor:'black'
},
rowContainer: {
flex: 1,
flexDirection: 'column',
},
rowItem:{
flex: 1
},
child1:{
backgroundColor: 'red',
position: 'absolute',
},
child2: {
alignSelf: 'center',
backgroundColor: 'yellow'
}
});