React Native Stylesheet mixins

MixinExample.js

'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)
  }
});

mixins.js

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');
}

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.