Skip to content

Instantly share code, notes, and snippets.

@calendee
Last active November 4, 2020 13:26
Show Gist options
  • Save calendee/8d7dc8f58fb04199eae83f0a7151fcf7 to your computer and use it in GitHub Desktop.
Save calendee/8d7dc8f58fb04199eae83f0a7151fcf7 to your computer and use it in GitHub Desktop.
react-native-styled.macro useStyles Hook Concept
//////////////////////////////////
// Start useStyles.js
import { useMemo } from "react";
import styled from "react-native-styled.macro";
import { useWindowVariant } from "react-native-styled.macro/lib";
export function useStyles(styleDefinition) {
const variants = useWindowVariant();
const styles = useMemo(() => {
const components = Object.keys(styleDefinition);
return components.reduce((accumulator, componentKey) => {
const component = component[componentKey];
accumulator[componentKey] = {
...styled(
component.utils,
component.variantsRequired ? variants : null,
),
};
}, {});
}, [styleDefinition, variants]);
return styles;
}
// End useStyles.js
//////////////////////////////////
//////////////////////////////////
// Start component1Styles.js
export const component1Styles = {
button: {
utils: [
"mx-2",
"my-4",
"border",
"rounded-full",
"border-teal-600",
"bg-teal-600",
"sm:bg-green-600",
"md:bg-teal-600",
"lg:bg-yellow-600",
"xl:bg-orange-600",
],
variantsRequired: true,
},
buttonText: {
utils: ["px-2", "py-1", "text-base", "text-white"],
variantsRequired: false,
},
container: {
utils: ["flex-1", "items-center"],
variantsRequired: false,
},
};
// End component1Styles.js
//////////////////////////////////
//////////////////////////////////
// Start component1.js
function Component1() {
import {component1Styles} from "./component1Styles.js";
const styles = useStyles(component1Styles);
return (
<View styles={...styles.container}>
<Pressable {...styles.button} onPress={handlePress}>
<Text {...styles.buttonText}>Press me</Text>
</Pressable>
</View>
);
}
// End component1.js
//////////////////////////////////
//////////////////////////////////
// Start component2Styles.js
export const component2Styles = {
button: {
utils: [
"mx-2",
"my-4",
"border",
"rounded-full",
"border-teal-600",
"bg-teal-600",
"sm:bg-green-600",
"md:bg-teal-600",
"lg:bg-yellow-600",
"xl:bg-orange-600",
],
variantsRequired: true,
},
buttonText: {
utils: ["px-2", "py-1", "text-base", "text-white"],
variantsRequired: false,
},
container: {
utils: ["flex-1", "items-center"],
variantsRequired: false,
},
};
// End component2Styles.js
//////////////////////////////////
//////////////////////////////////
// Start component2.js
function Component2() {
import {component2Styles} from "./component2Styles.js";
const styles = useStyles(component2Styles);
return (
<View styles={...styles.container}>
<Pressable {...styles.button} onPress={handlePress}>
<Text {...styles.buttonText}>Press me</Text>
</Pressable>
</View>
);
}
// End component2.js
//////////////////////////////////
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment