skip to Main Content

i’m trying to make a grid using react native that’s responsive to multiple screen sizes but having troubles drawing the lines in (the sides of the box can’t have a stroke).
this is a small snippet:

  <View style={styles.boxContainer}>

        <View style={styles.box}>
          <Text style={styles.boxText}> X </Text>
        </View>

        <View style={styles.box}>
          <Text style={styles.boxText}> O </Text>
        </View>

        <View style={styles.box}>
          <Text style={styles.boxText}> X </Text>
        </View>

        <View style={styles.box}>
          <Text style={styles.boxText}> X </Text>
        </View>

        <View style={styles.box}>
          <Text style={styles.boxText}> O </Text>
        </View>

        <View style={styles.box}>
          <Text style={styles.boxText}> O </Text>
        </View>

        <View style={styles.box}>
          <Text style={styles.boxText}> X </Text>
        </View>

        <View style={styles.box}>
          <Text style={styles.boxText}> X </Text>
        </View>

        <View style={styles.box}>
          <Text style={styles.boxText}> O </Text>
        </View>

      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },

  box: {
    alignItems: 'center',
    width: DeviceWidth*0.3,
    height: DeviceWidth*0.3,
  },


  boxContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    marginRight: DeviceWidth*0.05,
    marginLeft: DeviceWidth*0.05,
  },

i’ve tried doing a border but it covers the entire thing and i’m unsure how to clear the lines on the side 🙁 i’ve also tried adding a background color to my container and attempting to add space between the boxes but couldnt figure out how to make the background look similar in size..

4

Answers


  1. How about this,

    import * as React from 'react';
    import {Dimensions, SafeAreaView, StyleSheet, Text, View} from 'react-native';
    
    const DeviceWidth = Dimensions.get('window').width;
    
    export default function App() {
      const [showModal, setShowModal] = React.useState(false);
    
      const xo = ['X', 'O', 'X', 'O', 'X', 'O', 'O', 'X', 'O'];
    
      return (
        <SafeAreaView>
          <View style={styles.boxContainer}>
            {xo.map((value, index) => {
              const row = index % 3;
              return (
                <View
                  style={[
                    styles.box,
                    {
                      borderRightColor: row < 2 ? 'black' : 'transparent',
                      borderLeftColor: row >= 1 ? 'black' : 'transparent',
                      borderTopColor: index > 2 ? 'black' : 'transparent',
                      borderBottomColor: index < 6 ? 'black' : 'transparent',
                    },
                  ]}>
                  <Text style={styles.boxText}>{value}</Text>
                </View>
              );
            })}
          </View>
        </SafeAreaView>
      );
    }
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      },
    
      boxText: {
        fontSize: 90,
      },
    
      box: {
        alignItems: 'center',
        width: DeviceWidth * 0.3,
        height: DeviceWidth * 0.3,
        borderWidth: 1,
        borderColor: 'transparent',
      },
    
      boxContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        marginRight: DeviceWidth * 0.05,
        marginLeft: DeviceWidth * 0.05,
      },
    });
    

    result:

    enter image description here

    Login or Signup to reply.
  2. Try breaking the grid into 3 rows and 3 columns (boxes). Create styles for each individual column/row demo:

    import * as React from 'react';
    import { Text, View, StyleSheet, useWindowDimensions } from 'react-native';
    import Constants from 'expo-constants';
    
    const Box = ({ char, style }) => {
      const { width, height } = useWindowDimensions();
      const size = Math.min(width, height) / 3;
      return (
        <View
          style={[
            {
              width: size,
              height: size,
              alignItems: 'center',
              justifyContent: 'center',
            },
            style,
          ]}>
          <Text>{char}</Text>
        </View>
      );
    };
    export default function App() {
      return (
        <View style={styles.container}>
          <View style={styles.row1}>
            <Box char="1" style={styles.col1} />
            <Box char="2" style={styles.col2} />
            <Box char="3" style={styles.col3} />
          </View>
          <View style={styles.row2}>
            <Box char="4" style={styles.col1} />
            <Box char="5" style={styles.col2} />
            <Box char="6" style={styles.col3} />
          </View>
          <View style={styles.row3}>
            <Box char="7" style={styles.col1} />
            <Box char="8" style={styles.col2} />
            <Box char="9" style={styles.col3} />
          </View>
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
        padding: 8,
      },
      row1: {
        flexDirection: 'row',
        borderBottomWidth: 1,
        alignItems: 'center',
      },
      row2: {
        flexDirection: 'row',
        width: '100%',
      },
      row3: {
        flexDirection: 'row',
        width: '100%',
        borderTopWidth: 1,
      },
      col1: {
        borderRightWidth: 1,
      },
      col2: {
        borderRightWidth: 1,
      },
      col3:{
        
      }
    });
    
    Login or Signup to reply.
  3. import { Dimensions, FlatList, Text, View } from 'react-native';
    import styled from 'styled-components';
    
    
    const { width } = Dimensions.get('window');
    
    const BORDER_WIDTH = 4;
    
    const Test = () => {
    
        const data = ['x', 'o', 'x', 'x', 'o', 'x', 'x', 'o', 'x',];
    
        return (
            <Container>
                <Content>
                    <FlatList
                        data={data}
                        keyExtractor={(_, index) => index.toString()}
                        numColumns={3}
                        renderItem={({ item }) => <Cell>
                            <CellValue>{item}</CellValue>
                        </Cell>}
                        bounces={false}
                    />
                    <RemoveBorder />
                </Content>
            </Container>
        )
    }
    
    export default Test;
    
    const Container = styled(View)`
        flex: 1;
        background-color: white;
        align-items: center;
        justify-content: center;
    `
    
    const Content = styled(View)`
        width: ${width}px;
        height: ${width}px;
    `
    
    const RemoveBorder = styled(View)`
        position: absolute;
        border-width: ${BORDER_WIDTH / 2}px;
        border-color: white;
        width: 100%;
        height: 100%;
    `
    
    const Cell = styled(View)`
        width: ${width / 3}px;
        height: ${width / 3}px;
        align-items: center;
        justify-content: center;
        border-width: ${BORDER_WIDTH / 2}px;
    `
    
    const CellValue = styled(Text)`
        font-size: 40px;
        color: black;
    `
    
    Login or Signup to reply.
  4.     <SafeAreaView style={styles.container}>
          <View style={[styles.boxContainer, {borderBottomWidth: 2}]}>
            <View style={[styles.box, {borderRightWidth: 2}]}>
              <Text style={{}}> X </Text>
            </View>
            <View style={[styles.box, {borderRightWidth: 2}]}>
              <Text style={{}}> O </Text>
            </View>
            <View style={styles.box}>
              <Text style={{}}> X </Text>
            </View>
          </View>
          <View style={[styles.boxContainer, {borderBottomWidth: 2}]}>
            <View style={[styles.box, {borderRightWidth: 2}]}>
              <Text style={{}}> X </Text>
            </View>
            <View style={[styles.box, {borderRightWidth: 2}]}>
              <Text style={{}}> O </Text>
            </View>
            <View style={styles.box}>
              <Text style={{}}> O </Text>
            </View>
          </View>
          <View style={styles.boxContainer}>
            <View style={[styles.box, {borderRightWidth: 2}]}>
              <Text style={{}}> X </Text>
            </View>
            <View style={[styles.box, {borderRightWidth: 2}]}>
              <Text style={{}}> X </Text>
            </View>
            <View style={styles.box}>
              <Text style={{}}> O </Text>
            </View>
          </View>
        </SafeAreaView>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1, alignItems: 'center', justifyContent: 'center',
      },
      boxContainer: {
        flexDirection: 'row', alignItems: 'center',
      },
      box: {
        width: width*0.3, height: width*0.3, alignItems: 'center', justifyContent: 'center',
      }
    })
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search