Space between components in React Native styling

If you are using the map function to render your components, you can try the following code:

// Change to the number of columns in your grid
const numCols = 4;

// Change to the spacing for each item
const spacing = '1.25rem';

// Parent View
<View style={{
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  }}
>
{// List of child views to render
contents.map((content, index) => (
    // add a margin of 'spacing' to the bottom of all cards
    // will supply a left-margin to all cards in between the gap,
    // everytime a card is NOT divisible numCols, add a margin to the left
    <View style={{
      marginBottom : spacing,
      marginLeft: index % numCols !== 0 ? spacing : 0 
    }}
    >
    <Card 
      key={index}
      content={content}
      />
    </View>
  ))
}
</View>

I found that using the following code snippet will create an effect similar to gap in css grids.

Give the following styling to the parent container (Block/View).

  justifyContent: 'space-around'

OR

  justifyContent: 'space-between'

Space-around will put space between all the elements/view/items and also add space to the borders. Same as all elements get the margin. And the space-between will put the space between all items, without adding space to the borders All this stuff is explained here beautifully. Here is the link

For me, the solution, among using justify-content: 'space-between', was to explicitly give width to the parent view (in my case, width: '100%'), otherwise, 'space-between' didn't do anything.

you have 2 solutions in this case

first, use margin/padding for make air between flex element

and the other way is set justifyContent to 'space-between' || 'space-around'

but you must know about some information to use the best solution in a different case

1- (margin-padding)

in some case (more case), padding better margin

as you know, if we have a box ( means element ), you have two space,

first between content and border [ Inner space ]

second, space between the border and another foreign box element [ outer space ]

if you have an element and you want move element in your style you must use margin, because if you use padding for your element, inner space changed and in many cases, this approach creates some crash in your element, {{ if you want to use padding you must create one View and wrap all of your element and set the padding for a wrapper for you }}

and if you want to use space-between || space-around, you must know this, space-between and space-around have one diff

in space-between, space produced between elements and not create space between your element with sides

and space-around set space with elements and with sides

You can give the parent a negative margin in the same direction you use on the children.

const Comp: FC = () => {

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

const styles = StyleSheet.create({
  item: {
    // Just for visual representation:
    borderWidth: 2,
    borderColor: '#FF0000',
    height: 100,

    // Important styles:
    marginRight: 15,
    flexBasis: '40%',
    flexGrow: 1,
  },
  container: {
    // Important styles:
    marginRight: -15,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
});

export default Comp;

Try this

const Component = () => {
  return (
    <View style={styles.container}>
      <View style={styles.child}></View>
      <View style={styles.child}></View>
    </View>
  );
};

// Gap you want to achieve
const gap = 8;

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    paddingHorizontal: (gap / -2),
  },
  child: {
    marginHorizontal: gap / 2,
  },
});

        <View style={{flex:2,flexDirection:"row",flexWrap: 'wrap'}}>
            <View style={{backgroundColor:'white',flex:1,marginHorizontal:5,marginVertical:10,}}>
            </View>
            <View style={{backgroundColor:'black',flex:1,marginHorizontal:5,marginVertical:10,}}>
            </View>

        </View>

        <View style={{flex:2,flexDirection:"row",flexWrap: 'wrap'}}>
            <View style={{backgroundColor:'gray',flex:1,marginHorizontal:5,marginVertical:10,}}>
            </View>
            <View style={{backgroundColor:'yellow',flex:1,marginHorizontal:5,marginVertical:10,}}>
            </View>

        </View>

<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
          {Array(30)
            .fill({ name: "product name" })
            .map((item, key, arr) => (
              <View
                key={key}
                style={{
                  height: 200,
                  paddingTop: 15,
                  backgroundColor: "skyblue",
                  ...(key % 2 !== 0
                    ? { paddingRight: 15, paddingLeft: 15 }
                    : { paddingLeft: 15 }),
                  flexBasis: "50%",
                }}
              >
                <View
                  style={{
                    flex: 1,
                    backgroundColor: variables?.BackgroundLight,
                  }}
                >
                  <Text style={styles && { ...styles?.text }}>{item.name}</Text>
                </View>
              </View>
            ))}
        </View>

Try this out. You can better control it using array map

You can add the following in your style:

attachcontainer{
   flexDirection:  'row',
   justifyContent: 'space-between'
}