CODEWITHSUNDEEP
reactjsreact-native
yarin Cohen
yarin Cohen

Reputation: 1142

React how to place images in a row

Hey I'm struggling to place two images right next to each other with some space between them After a long search the closest I got was this:

enter image description here

As you can see there's no space between the images and I tried to change that with marginRight or paddingRight however nothing seems to change it.. Here's my code:

let stylereg_na = { alignItems: "center", flex: 1, height: hp('7%'), width: wp('7%')};
let stylereg_eu = {height: hp('10%'), width: wp('9%')};

return (
<View style={styles.container}>

<View style={{flexDirection: "row", justifyContent: "space-between"}}>

<View style={{alignItems: "center", flex: 1, paddingTop: 15, paddingBottom : 15}}>
<img style={stylereg_na} src ={na}>
</View>

<View style={{ alignItems: "center", paddingTop: 15, paddingBottom : 15 }}>
<img style={stylereg_eu} src ={eu}/>
</View>

</View>
</View>
);

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#D8D8D8',
alignItems: 'center',
justifyContent: 'center',
},
});

Upvotes: 1

Views: 1864

Answers (3)

newdeveloper
newdeveloper

Reputation: 1451

https://codesandbox.io/s/image-with-space-evenly-xojsy

Try adding padding:15 to your view that wraps the image as shown below

  <View style={{padding: 15}}>
        <Image style={stylereg_na} source={na} />
      </View>

Upvotes: 1

Yoel
Yoel

Reputation: 7985

add paddingLeft:15 or paddingRight:15 to style

Upvotes: 0

Mark
Mark

Reputation: 1679

Make sure you are using the Image component provided by React Native https://reactnative.dev/docs/image. Also, your parent container is utilizing justify-content space-between so you should not neet to use padding or margin as long as you want flex to figure out the spacing for you.

import React from "react";
import { View, Image } from "react-native";

const ViewBoxesWithColorAndText = () => {
let stylereg_na = { height: 50, width: 50};
let stylereg_eu = { height: 50, width: 50};

  return (
    <View style={{flexDirection: "row", justifyContent: "space-between"}}>

      <View style={{alignItems: "center", flex: 1, paddingTop: 15, paddingBottom : 15}}>
        <Image style={stylereg_na} source={na} />
      </View>

      <View style={{ alignItems: "center", paddingTop: 15, paddingBottom : 15 }}>
        <Image style={stylereg_eu} source={eu}/>
      </View>

    </View>
  );
};

export default ViewBoxesWithColorAndText;

Upvotes: 1

Related Questions