Retrieving theme values
If you need theme values at runtime, its best to retrieve them directly from tailwind or your tailwind.config.js
. Tailwind CSS has documentation on referencing theme values in Javascript.
import colors from "tailwindcss/colors";
export function MyActivityIndicator(props) {
return <ActivityIndicator size="small" color={colors.blue.500} {...props} />;
}
Or adding your custom colors into a shared file
// colors.js
module.exports = {
'tahiti': {
100: '#cffafe',
200: '#a5f3fc',
300: '#67e8f9',
400: '#22d3ee',
500: '#06b6d4',
600: '#0891b2',
700: '#0e7490',
800: '#155e75',
900: '#164e63',
},
}
// tailwind.config.js
const colors = require("./colors")
module.exports = {
theme: {
extend: {
colors
}
},
}
// MyActivityIndicator.js
import colors from "./colors";
export function MyActivityIndicator(props) {
return <ActivityIndicator size="small" color={colors.tahiti.500} {...props} />;
}