Skip to content

Instantly share code, notes, and snippets.

@rocbear
Last active April 8, 2023 09:26
Show Gist options
  • Save rocbear/ad885648726f1c7f2c54 to your computer and use it in GitHub Desktop.
Save rocbear/ad885648726f1c7f2c54 to your computer and use it in GitHub Desktop.
React Native Stylesheet mixins
'use strict'
import React, {
Component,
StyleSheet,
View,
Text
} from 'react-native'
import { padding } from './styles/mixins'
export default class MixinExample extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.label}>Example Text!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
label: {
backgroundColor: 'black',
color: 'white',
...padding(20, 50)
}
});
function dimensions(t, r = t, b = t, l = r, property) {
let styles = {};
styles[`${property}Top`] = t;
styles[`${property}Right`] = r;
styles[`${property}Bottom`] = b;
styles[`${property}Left`] = l;
return styles;
}
export function margin(t, r, b, l) {
return dimensions(t, r, b, l, 'margin');
}
export function padding(t, r, b, l) {
return dimensions(t, r, b, l, 'padding');
}
@coreybyrum7
Copy link

This is awesome 👍 I worked with another dev years ago that implemented something like this when we moved over to NextJS but somehow it escaped my memory.

Coming from a design system background, I struggled to connect the dots between web styling and react-native. It makes a lot of sense to see mixins written as JS functions again. I think I'd implement with an object parameter, ex. padding({ y, x, t, r, b, l }) to allow flexibility when using the function(s).

Thanks for sharing - glad I came across.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment