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

export default function App() {
  return (
    <View style={styles.container}>
     <View style={styles.square}>
      <View style={styles.dimension}>
        <View style={[styles.dimension, styles.green]}>
          <View style={styles.dimension}>
            <View style={[styles.dimension, styles.green]}>
              <View style={styles.dimension}>
                <View style={[styles.dimension, styles.green]}>
                  <View style={styles.dimension}>
                    <View style={[styles.dimension, styles.green]}>
                      <View style={styles.dimension}>
                        <View style={[styles.dimension, styles.green]}>
                          <View style={styles.dimension}>
                            <View style={[styles.dimension, styles.green]}>
                              <View style={styles.dimension}>
                                <View style={[styles.dimension, styles.green]}></View>
                              </View>
                            </View>
                          </View>
                        </View>
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
    <View style={styles.circle}>
      <View style={styles.cDimension}>
        <View style={[styles.cDimension, styles.green]}>
          <View style={styles.cDimension}>
            <View style={[styles.cDimension, styles.green]}>
              <View style={styles.cDimension}>
                <View style={[styles.cDimension, styles.green]}>
                  <View style={styles.cDimension}>
                    <View style={[styles.cDimension, styles.green]}>
                      <View style={styles.cDimension}>
                        <View style={[styles.cDimension, styles.green]}>
                          <View style={styles.cDimension}>
                            <View style={[styles.cDimension, styles.green]}>
                              <View style={styles.cDimension}>
                                <View style={[styles.cDimension, styles.green]}></View>
                              </View>
                            </View>
                          </View>
                        </View>
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
    </View>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: "column",
    padding: 8,
  },
  square: {
    width: "100%",
    height: "50%",
    alignItems: 'center',
    justifyContent: 'center',
    padding: 8,
  },
  circle: {
    width: "100%",
    height: "50%",
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 8,
  },

  dimension: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '80%',
    height: '80%',
    borderWidth: 2,
    borderColor: 'red',
  },
  cDimension: {
    justifyContent: 'center',
    alignItems: 'center',
    width: '90%',
    height: '90%',
    borderWidth: 2,
    borderColor: 'red',
    borderRadius: 500,
  },
  green: {
    borderWidth: 2,
    borderColor: 'green'
  }
});