I am struggling with the layout in a view. I am trying to place the random picture(in this case starbucks logo) to the left of the blue view. I would like it to be aligned with left border. No matter what layout properties i use for it, it doesn't work as i would expect.
logoStyle:{
width: 210,
height: 120,
left: 0,
resizeMode: 'contain',
backgroundColor: 'blue',
},
Here is how it looks
You want put image logo on the left of background view. Here's example:
render() {
<View style={{flex: 1, backgroundColor: 'blue'}}>
<View style={{ flexDirection: 'row',
alignItems: 'flex-start', justifyContent: 'flex-start'}} >
<Image style={{width: 20, height: 20}} />
</View>
</View>
}
You can try it!
Cheer!
Related
I have image background with "3 level circle shape" (see image)
I would like to set text "hello" into center of circles. Looks like its almost imposible for all devices.
How can I do it?
Mu current code is:
return (
<ImageBackground source={background} resizeMode="cover" style={{ width: '100%', height: '100%' }}>
</ImageBackground>
I tried to use absolute position, but it is bronek on second device. Is there any trick?
Original image size (in asset folder) is 1080x2400
Thank you.
Why not create the circles manually? That way centering can be taken care of automatically. Example (you'll have to tweak values/add circles):
<View style={{ flex: 1, backgroundColor: '#F9F3EE' }}>
<View
style={{
backgroundColor: '#F6EFF2',
top: -100,
width: 700,
height: 700,
left: -(700 - Dimensions.get('window').width) / 2,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 350,
}}
>
<View
style={{
backgroundColor: '#ECE4DD',
width: 500,
height: 500,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 250,
}}
>
<View
style={{
backgroundColor: '#E2D7D0',
width: 300,
height: 300,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 150,
}}
>
<Text>Hi</Text>
</View>
</View>
</View>
</View>
I'm trying to position View elements in react native that have the position: "absolute" attribute in their parent container, but the positive and negative values seem not to be consistent. Let me show you by an example:
function Home(props) {
return (
<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
<View style={{ position: "absolute" }}>
<View style={{ backgroundColor: "blue", width: 100, height: 100 }}></View>
</View>
<View style={{ position: "absolute" }}>
<View style={{ backgroundColor: "yellow", width: 100, height: 100, marginTop: 200 }}></View>
</View>
<View style={{ position: "absolute" }}>
<View style={{ backgroundColor: "red", width: 100, height: 100, marginTop: -200 }}></View>
</View>
</View>
);
}
which produces an output that looks like this:
So I have three View elements packed in another View that has the position: "absolute" attribute. The first (blue) has no margin so it is exactly in the middle, the second (yellow) has a positive top margin of 200 and the third (red) a negative top margin of 200. It seems to be very odd why the red rectangle is further away than the yellow.
A marginTop: 200 and marginTop: -150 seem to have the same effect (in opposite directions). What is the problem here?
The reason for this is because you're using marginTop instead of top. The problem with margin and absolute positioning here is that you're actually changing the size of the parent of the colored boxes even if it doesn't look like it, instead of moving the colored boxes by a certain amount from the center.
So you're probably looking for something like this instead:
function Home(props) {
return (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
<View style={{position: 'absolute'}}>
<View style={{backgroundColor: 'blue', width: 100, height: 100}}></View>
</View>
<View style={{position: 'absolute'}}>
<View
style={{
backgroundColor: 'yellow',
width: 100,
height: 100,
top: 200,
}}></View>
</View>
<View style={{position: 'absolute'}}>
<View
style={{
backgroundColor: 'red',
width: 100,
height: 100,
top: -200,
}}></View>
</View>
</View>
);
}
To explain it differently: You're not really moving the colored boxes, but you're modifying the space on top of the colored boxes which pushes the boxes down.
If you add a borderWidth to the views around the different boxes you can see the effect that adding the margin to the box views has on the parent views.
I have a very basic modal component(using React-native-modal) which render its given child views. However, I dont want the behaviour similar to KeyBoardAvoiding view, i.e. I don't want the modal to be pushed up when keyboard opens.
<Modal
isVisible={isVisible}
onBackdropPress={onCartDismiss}
style={CartStyles.cartModal}
onSwipeEnd={this.onCartDismiss}
onSwipe={this.onCartDismiss}
swipeDirection="down"
swipeThreshold={200}
propagateSwipe
avoidKeyboard={false}
>
{this.props.children}
....
On ios it is working fine i.e. the keyboard opens over the modal component, but not on android. avoidKeyboard={false} is not working.
This is my style for the modal (position:'absolute' didn't work too)
cartModal: {
position: 'absolute',
justifyContent: 'flex-end',
bottom: 0,
left: 0,
right: 0,
zIndex: 1,
},
I have even tried changing softinputmode in android manifest to :
android:windowSoftInputMode="adjustPan"
<Modal
isVisible={modalVisible}
animationInTiming={500}
animationOutTiming={1000}
backdropTransitionInTiming={500}
backdropTransitionOutTiming={1000}
onBackdropPress={() => setModalVisible(!modalVisible)}
onBackButtonPress={() => setModalVisible(!modalVisible)}
style={{
justifyContent: 'flex-end',
margin: 0,
position:'absolute'
}}
avoidKeyboard={false}
>
try this, it works for me.
Set you model height as integer value without percentage.
<Modal
// style={{backgroundColor:'red'}}
deviceHeight={screenHeight}
deviceWidth={screenWidth}
transparent={true} visible={isVisible} animated={false}>
<View style={{
backgroundColor: 'rgba(0,0,0,.6)',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}}>
<View style={{
flexDirection: 'row',
height: 200,
width: '80%',
alignSelf: 'center'
}}>
{content}
</View>
</View>
</Modal>
Give the main view inside your modal a "fixed height value" and the containing view should have a "100%" view height. Like this:
<Modal animationType={fade} ...>
<View style={{
height: "100%",
width: "100%",
alignItems: "center",
// justifyContent: "center",
backgroundColor: "rgba(0, 0, 0, 0.4)",
}}>
<View style={{
borderRadius: 10,
marginHorizontal: width * 0.05,
marginTop: height * 0.1,
width: width * 0.9
height: height * 0.8
}}>
...`enter code here`
</View>
</View>
</Modal>
I solved the issue by removing justifyContent: "center"
I'm trying to place two (or more) components above each others, centered vertically and horizontally in a view that wraps this content (i.e., the height of this outer view should be the max height of the components inside; idem for the width).
At first, absolute positioning looked like a good idea to have all the components centered above each other. However then I don't know how to get the outer view to wrap the content.
<View style={{ backgroundColor: 'black', alignItems: 'center', justifyContent: 'center'}}>
<View style={{position: 'absolute', width: 60, height: 60, backgroundColor: 'blue'}} />
<View style={{position: 'absolute', width: 70, height: 50, backgroundColor: 'red'}} />
<View style={{position: 'absolute', width: 50, height: 70, backgroundColor: 'green'}} />
</View>
With this examples, we cannot see any of the black background of the outer View (whose size is probable 0x0), whereas I'm expecting a 70x70 black square behind the three colored rectangles.
The outermost View will not automatically adjust to its children if their position is absolute.
You would have to make the outermost View's position absolute and calculate its size and position based on its children and the screen's width and height.
Another option is to create a background View as a child with a position of relative like this:
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View style={{position: 'relative', width: 70, height: 70, backgroundColor: 'black'}} />
<View style={{position: 'absolute', width: 60, height: 60, backgroundColor: 'blue'}} />
<View style={{position: 'absolute', width: 70, height: 50, backgroundColor: 'red'}} />
<View style={{position: 'absolute', width: 50, height: 70, backgroundColor: 'green'}} />
</View>
I wish to align view toolbar to the bottom of the page without using 'space- around' of justifyContent attribute.
Below is the code how I am making this toolbar:
<View style={{ height: '100%', justifyContent: 'space-between', }}>
<View style={{ flexDirection: 'row', height: 44,
alignItems: 'center', justifyContent: 'space-around',
backgroundColor: 'yellow'}}>
<Image source={require('./resources/images/grid.png')}/>
<Image source={require('./resources/images/grid.png')}/>
<Image source={require('./resources/images/grid.png')}/>
<Image source={require('./resources/images/grid.png')}/>
<Image source={require('./resources/images/grid.png')}/>
</View>
</View>
I looked at bottom and position attributes. When I add bottom: 0, position: 'absolute' to the inner view style, then we also need to specify the width. ( Don't know why relative allow to auto take full width). But if we add { bottom: 0, position: 'absolute', width: '100%') then inner view will be aligned at bottom always. Like below
<View style={{ flexDirection: 'row', height: 44,
alignItems: 'center', justifyContent: 'space-around',
backgroundColor: 'yellow', bottom: 0, position: 'absolute', width: '100%'}}>
<Image source={require('./resources/images/grid.png')}/>
<Image source={require('./resources/images/grid.png')}/>
<Image source={require('./resources/images/grid.png')}/>
<Image source={require('./resources/images/grid.png')}/>
<Image source={require('./resources/images/grid.png')}/>
</View>
</View>