Styling issues with TouchOpacity on web

[xyreryp]

• syr-cli version: latest
• syr version: latest

Problem:

When customizing the style for TouchOpacity, it works on iOS but not web.

relevant code:

const styles = {
    squares: {
      width: PixelRatio.getPixelSizeForLayoutSize(610),
      height: PixelRatio.getPixelSizeForLayoutSize(610),
      borderColor: '#421794',
      
      borderWidth: PixelRatio.getPixelSizeForLayoutSize(10),
      left: (Dimensions.get("window").width / 2) - PixelRatio.getPixelSizeForLayoutSize(300), 
      top: (Dimensions.get("window").height / 2) - PixelRatio.getPixelSizeForLayoutSize(300),
    },
squareLocation: function(number) {
      const row = Math.floor(number / 3) - (number % 3 ? 0 : 1);
      const col = number % 3 ? number % 3 : 3; // 0, 1, 2
      const width = PixelRatio.getPixelSizeForLayoutSize(600) / 3;
      const height = PixelRatio.getPixelSizeForLayoutSize(600) / 3;
      const left = (col - 1) * width ;
      const top = row * height ;
      var borderLeftWidth =  PixelRatio.getPixelSizeForLayoutSize(3), borderRightWidth = PixelRatio.getPixelSizeForLayoutSize(3), borderBottomWidth = PixelRatio.getPixelSizeForLayoutSize(3), borderTopWidth =  PixelRatio.getPixelSizeForLayoutSize(3)
      if (number == 1 || number == 4 || number == 7) {
        borderLeftWidth = 0;
        borderTopWidth = 0;
      } else if (number == 3 || number == 6 || number == 9) {
        borderRightWidth = 0;
        borderTopWidth = 0;
      } else if (number == 2) {
          borderTopWidth = 0;
      }

      if (number == 7 || number == 8 || number == 9) {
        borderBottomWidth = 0
      }
      
      return {
        height: height,
        width: width,
        left: left,
        top: top,
        borderColor: '#253B80',
        borderLeftWidth: borderLeftWidth,
        borderRightWidth: borderRightWidth,
        borderBottomWidth: borderBottomWidth,
        borderTopWidth: borderTopWidth,
      };
    }
}

<View style={styles.squares}>
          <TouchableOpacity onPress={() => this.ontilePress(0,0)}  style={styles.squareLocation(1)}>
                {this.renderIcon(0,0)}
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.ontilePress(0,1)}  style={styles.squareLocation(2)}>
                {this.renderIcon(0,1)}
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.ontilePress(0,2)}  style={styles.squareLocation(3)}>
                {this.renderIcon(0,2)}
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.ontilePress(1,0)}  style={styles.squareLocation(4)}>
                {this.renderIcon(1,0)}
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.ontilePress(1,1)}  style={styles.squareLocation(5)}>
                {this.renderIcon(1,1)}
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.ontilePress(1,2)}  style={styles.squareLocation(6)}>
                {this.renderIcon(1,2)}
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.ontilePress(2,0)}  style={styles.squareLocation(7)}>
                {this.renderIcon(2,0)}
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.ontilePress(2,1)}  style={styles.squareLocation(8)}>
                {this.renderIcon(2,1)}
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.ontilePress(2,2)}  style={styles.squareLocation(9)}>
                {this.renderIcon(2,2)}
          </TouchableOpacity>
        </View>

Web verison:

iOS version