Skip to content

Instantly share code, notes, and snippets.

@FiberJW
Last active September 18, 2019 18:37
Show Gist options
  • Save FiberJW/4a341d547bbed2cd321123a5b4c63b3f to your computer and use it in GitHub Desktop.
Save FiberJW/4a341d547bbed2cd321123a5b4c63b3f to your computer and use it in GitHub Desktop.
Adding `rem` converter DSL to Number primitive for correct styling units on RN platforms.
import { Platform, StyleSheet } from 'react-native';
Object.defineProperty(Number.prototype, 'rem', {
get: function() {
switch (Platform.OS) {
case 'web':
return `${this.valueOf()}rem`;
case 'macos':
case 'windows':
case 'ios':
case 'android':
default:
return this.valueOf() * 16;
}
},
enumerable: false,
});
const styles = StyleSheet.create({
text: { fontSize: 1..rem },
textContainer: {
paddingVertical: 1..rem,
paddingHorizontal: 1.5.rem,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment