Getting Object.freeze can only be called on Objects on Android

Question

I'm getting Object.freeze can only be called on Objects (only on Android).

After some deep research I found out that this is because I reference all my styles in a different folder and Android is not happy about it.

Github Issue

My folder structure

• src

  • actions
  • containers
    • Home.js (has style)
  • components
  • styles
    • calculateSize.js
    • index.js

• App.js

• Router.js (has style)

As you can see the simulator starts to complain at

Router.js: 9

which corresponds to

import styles from './styles'; // Line 9 in Router.js

Long story short, the problem only disappears if I create local StyleSheet variable in the file that wants to do styling which is very annoying.

Anyone has encountered this before? I couldn't find a solution :(

This is my style index, perhaps some of the methods renders undefined and I'm not aware of it

calculateSize

import { Dimensions } from 'react-native';

const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;

// Calculating ratio from iPhone breakpoints
export const ratioX = deviceWidth < 375 ? (deviceWidth < 320 ? 0.75 : 0.875) : 1 ;
export const ratioY = deviceHeight < 568 ? (deviceHeight < 480 ? 0.75 : 0.875) : 1 ;

// Set our base font size value
const base_unit = 16;

// Simulating EM by changing font size according to Ratio
const unit = base_unit * ratioX;

export default function em(value) {
  return (unit * value);
}

index.js

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

import em from './calculateSize';

const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;

export const colors = {
  gray: '#888888',
};

export default StyleSheet.create({
  //
  // STATICS
  //
  DEVICE_WIDTH: deviceWidth,
  DEVICE_HEIGHT: deviceHeight,
  RATIO_X: em.ratioX,
  RATIO_Y: em.ratioY,
  UNIT: em(1),
  PADDING: em(1.25),
  
  FONT_SIZE: em(1),
  FONT_SIZE_SMALLER: em(0.75),
  FONT_SIZE_SMALL: em(0.875),
  FONT_SIZE_TITLE: em(1.25),
  //
  // REACT-NATIVE-ROUTER-FLUX
  //
  navigationBarStyle: {
    backgroundColor: '#dd2c00',
    borderBottomWidth: 0,
  },
  navTitleStyle: {
    color: 'white',
  },
  navBarButton: {
    position: 'absolute',
    top: 10,
  },
  navBarLeftButton: {
    left: 10
  },
  navBarrightButton: {
    right: 10
  },
  //
  // GENERALS
  //
  testShit: {
    borderColor: 'red',
    borderWidth: 2
  },
  centerEverything: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  authContainer: {
    flex: 1,
    paddingTop: 50,
  },
  bitOfTransparent: {
    backgroundColor: 'rgba(0,0,0,.5)'
  },
  //
  // AUTHS
  //
  spanImage: {
    height: deviceHeight,
    width: deviceWidth,
  },
  statusBarSpan: {
    width: deviceWidth,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    top: 20,
    paddingLeft: 15,
    paddingRight: 15,
    position: 'absolute'
  },
  residentValetUpperContainer: {
    flex: .25,
    width: deviceWidth*0.8
  },
  residentValetBottomContainer: {
    flex: .75,
    width: deviceWidth,
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingBottom: 20
  },
  residentValetBottomContainerField: {
    justifyContent: 'flex-start'
  },
  residentValetText: {
    fontSize: em(1)*1.5,
    letterSpacing: 10,
    textAlign: 'center',
    color: '#fff',
    backgroundColor: 'transparent',
  },
  residentValetDesc: {
    fontSize: em(1)*1.25,
    letterSpacing: 0,
    flexWrap: 'wrap'
  },
  helLight: {
    fontFamily: 'HelveticaNeue-Light',
  },
  loginButton: {
    flexDirection: 'row',
    width: deviceWidth*0.9,
    height: 50,
    backgroundColor: 'transparent',
    borderColor: '#fff',
    borderWidth: 1,
    borderRadius: 3,
  },
  loginButtonText: {
    fontSize: em(1),
    color: '#fff',
    paddingLeft: 10,
  },
  policyText: {
    fontSize: em(0.85),
    color: '#fff',
    backgroundColor: 'transparent'
  },
  nextButtonText: {
    fontSize: em(1.25),
    fontWeight: '500',
    backgroundColor: 'transparent'
  },
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        marginTop: 64
      },
      android: {
        paddingTop: 54
      }
    })
  }
})

Answer 1

The error is due to the non-object properties you have in your StyleSheet.create call, i.e. -

//
// STATICS
//
DEVICE_WIDTH: deviceWidth,
DEVICE_HEIGHT: deviceHeight,
RATIO_X: em.ratioX,
RATIO_Y: em.ratioY,
UNIT: em(1),
PADDING: em(1.25),

FONT_SIZE: em(1),
FONT_SIZE_SMALLER: em(0.75),
FONT_SIZE_SMALL: em(0.875),
FONT_SIZE_TITLE: em(1.25),

StyleSheet.create only supports style objects and not any random property.

You get the error only in Android probably because of the difference in implementation between different versions of JSC.