I have a responsive photo grid built within a RN app -
I'd like 3 images to fit across the screen with the respective margin guttering. All images are squares.
I'm after some tips on the best way to achieve this - i'd use percentages in a web build for each image square but understand this isnt a possibility in RN..
This is what I have so Far:
The code basically pulls images out of an array via a map function and adds the grey image upload button at the same size after them as below:
<View style={PhotoStyles.imgThumbnailWrap}>
{this.state.ADImageArray.map((prop, key) => {
return (
<Image
source={{uri: prop, isStatic: true}}
style={PhotoStyles.imgThumbnail}
/>
);
})}
<TouchableOpacity onPress={this.photoAdditional} >
<View style={PhotoStyles.imgThumbAddMore}>
<Image source={require('../images/icons/ico-upload-
photo.png')} style={PhotoStyles.imgThumbnailBtn} />
</View>
</View>
Heres the Styles:
imgThumbnailWrap: {
flex:1,
flexDirection: 'row',
justifyContent: 'flex-start',
flexWrap:'wrap',
},
imgThumbnail: {
backgroundColor:'#f79431',
width:100,
height:100,
margin:8,
},
imgThumbAddMore: {
width:100,
height:100,
margin:8,
backgroundColor: '#e9e9e9',
alignItems:'center',
justifyContent: 'center',
},
As you can see the two image classes (imgThumbnail and imgThumbAddMore) have fixed widths in the above example - i'd like to make them fit in a row of 3 width percentage widths and height based on the width of the parent container (imgThumbnailWrap). Any advice?
You can divide the width of the device and subtract the margin on the outside
import { Dimensions } from "react-native";
const padding = 10
const itemWidth = (Dimensions.get('window').width / 3) - (padding * 4)
Use the itemWidth with both the width and height so you get perfect squares.
This problem can easily solve by using paddingTop, width, and position. Just try the below code.
<View style={{width:'100%',paddingTop:'100%'}}>
<Image source={{uri:url}} style={{position:'absolute',left:0,bottom:0,right:0,top:0,resizeMode:'contain'}} />
</View>
Related
I have something like this:
These are two different breakpoints. When container is stretched by form, map fills its container, but when flex changes direction to row it does not. How do I fix this without giving fixed value for map height?
I am using Chakra UI lib but it does not really matter, pure css solution is also fine.
<Stack mt="2" direction={{ base: 'column', md: 'row' }}>
<Box
flex={{ md: 1, sm: 1, lg: 2 }}
bg="white"
p="2"
shadow="sm"
borderRadius="4"
>
<CreateDeviceMap
zoom={10}
style={{ height: '100%' }}
center={[51.472829664858644, -0.06935119628906251]}
/>
</Box>
<Stack
flex="1"
bg="white"
shadow="sm"
p="4"
spacing="2"
borderRadius="4"
>
... form
</Stack>
</Stack>
UPDATE:
If I put height:100vh to container map shows and it is fine on small breakpoint but it destroys bigger breakpoints, they become streched. So I just need to find sweet spot between them.
I am trying to make a background using two View to look , but I am falling to set the "start" of the radius on the left size.
The result I get using :
borderBottomLeftRadius: '20%',
borderBottomRightRadius: '40%',
Is this:
But I want this:
I want the "radius" start more vertically
Any tips how I get this effect?
Thank you
Exact shaping like this through radius is probably not possible, I achieved this by use of transform: [{ scale }]
Here is the code
const { width } = useWindowDimensions();
<View
style={{
backgroundColor: '#00ffff',
borderBottomLeftRadius: width / 3,
borderBottomRightRadius: width / 2,
borderWidth: 2,
borderColor: 'black',
height: width / 2,
width: width,
transform: [{ scale: 1.4 }],
}}
/>
Here what it looks like, is this workable for you?
you can tweak the values a little bit to meet your requirement.
I am trying to understand why the below layouts work differently.
Can someone explain how the internal layout process happen, in terms of rules? And why below examples behave differently. Except just saying that this is how it is.
Example1:
return (
<View style = {{borderWidth : 1, borderColor : 'red'}}>
<View style = {{borderWidth : 1, borderColor : 'black'}}>
<Text>TestText</Text>
</View>
</View>
)
This renders the red box around the black box around the Text. Which means that View resizes based on its content. inner view resizes to consider the text, outer view considers inner view(which already has considered inner text to determine its dimensions), hence everything is as expected.
Example2:
return (
<View style = {{borderWidth : 1, borderColor : 'red'}}>
<View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
<Text>TestText</Text>
</View>
</View>
)
The text now comes outside both the Views. The inner view still rests inside the outer view though.
Now i tried a little different variation:
Example3:
return <View style = {{borderWidth:1, borderColor:'red', height:10}}>
<View style = {{flex:1, borderWidth:1, borderColor:'black'}}>
<Text>HelloWorld</Text>
</View>
</View>
This one renders a little better, i.e the text atleast seems to start inside both the views. But still not as expected.
Questions i have:
1) in case #2 above, Why does the text flow outside both the views? Whereas inner View still stays inside outer?
Can some content ever go beyond the bounds of its parent View? Shouldn't the parent View expand to contain it, as long as we haven't provided specific dimensions to it?
2)In case #3, things behave a little bit as expected..Text is inside the views somewhat, but still overflows..
3)How does this rendering happen in ReactNative internally & how does it determine the effective heights of these views above?
Example with flex
flex: 1, obligates child to follow parent's height, "Black view" will fill all the space available of the "Red view", which is height:60.
<View style={{ borderColor: "red", height: 60 }}>
<View style={{ borderColor: "black", flex: 1 }}>
<Text>HelloWorld</Text>
...
</View>
</View>
Example without flex:1
Here without flex, "Black view" will occupy all space of its children, it won't matter height of the parent ("Red view").
<View style={{ borderColor: "red", height: 60 }}>
<View style={{ borderColor: "black" }}>
<Text>HelloWorld</Text>
...
</View>
</View>
The thing is in simple terms the outline misbehaves in case of 2nd one , i.e :
<View style = {{borderWidth : 1, borderColor : 'red'}}>
<View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
<Text>TestText</Text>
</View>
</View>
Is because the parent View component doesnt have a flex property so it doesnt take up whole the space and since you have added flex:1 in the child View it tries to take up as whole space as its alloted , hence black border Dominates and TestText is below it.
But if you provide flex:1 , to parent View you will see the same structure as it was with no flex given at all. Try :
<View style = {{flex:1,borderWidth : 1, borderColor : 'red'}}>
<View style = {{flex:1,borderWidth : 1, borderColor : 'black'}}>
<Text>TestText</Text>
</View>
</View>
Hope it helps . feel free for doubts
I'm making an React Native App in which i have 2 buttons/ TouchableOpacity's. When styling these buttons, they both get double border even when explicitly stating 'solid' borderstyle in the respective stylesheets. ( On the attached screenshot the middle button is all white, but when I make the border a different color it is a double one as well ). No where in the whole file have I defined a double borderstyle.
bottom left button stylesheet:
roomsbutton: {
alignItems: 'center',
backgroundColor: '#009DDC',
padding: 5,
borderRadius: 2,
borderWidth: 1,
borderStyle: "solid",
borderColor: 'white',
color: 'white',
}
and its parent view:
<View style={styles.bottom}>
<TouchableOpacity
style={styles.roomsbutton}
onPress={() => Alert.alert('more rooms')}
>
<Text style={styles.roomsbutton} >FIND MORE FREE ROOMS</Text>
</TouchableOpacity>
</View>
You are passing the styles to the <TouchableOpacity> and the <Text> components. So they are both surrounded by the border
You pass style={styles.roomsbutton} to both the TouchableOpacity and the Text components. Each have a solid white border
this is happining because you apply className .roomsbutton two times in a button. once in TouchableOpacity and once in Text.
just remove style={styles.roomsbutton} form Text like below..
<Text>FIND MORE FREE ROOMS</Text>
I have a view with 50% width, its' parent having the whole width of the phone, i want to make it circle though, this is my code that does not work:
clockContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width:Dimensions.get('window').width
},
clock: {
width: '50%',
borderRadius: '100%', // divide this by 2?
backgroundColor: 'red'
},
i looked around and it says you divide its' width by 2, but i don't know how to implement it in this case. Help?
React Native only allows for numeric inputs in its CSS values, not percentages.
You'll want to calculate the borderRadius the same way that you calculate the parent width, and then simply divide by two:
borderRadius: Dimensions.get('window').width / 2
Or:
borderRadius: Dimensions.get('window').width * 0.5