치트시트(Cheet Sheet) - React Native

화면

작성 코드

import { Dimensions, StyleSheet, View } from 'react-native';

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

const gap = 10;
const itemPerRow = 2;
const totalGapSize = (itemPerRow - 1) * gap;
const windowWidth = Dimensions.get('window').width;
const childWidth = (windowWidth - totalGapSize) / itemPerRow;
const sidePadding = 15;

const styles = StyleSheet.create({
  container: {
    flexWrap: 'wrap',
    flexDirection: 'row',
    marginVertical: -(gap / 2),
    marginHorizontal: -(gap / 2),
    paddingRight: sidePadding,
    paddingLeft: sidePadding,
  },
  child: {
    width: childWidth - sidePadding,
    height: childWidth - sidePadding,
    backgroundColor: '#12B886',
    marginVertical: gap / 2,
    marginHorizontal: gap / 2,
  },
});

export default Temp;

작성 이유

리액트 네이티브는 리액트완 다르게 gap속성을 지원하지 않는다.
그래서 어떻게 해결해야하는지 찾아봤다.

나중에도 쓸 것 같아서 또 다시 똑같이 찾는 것보다 내가 남겨놓는게 좋을 것 같아서 그냥 작성했다.