You can provide a custom theme to customize the colors, font sizes, border radius etc. with the Provider component. Check the default theme to see which customization options are supported.
import * as React from "react";
import { AppRegistry } from "react-native";
import { ThemeProvider } from "react-native-magnus";
import App from "./src/App";
// this is our custom theme
const theme = {
colors: {
violet100: "#e1e1e1",
},
fontSize: {
bigText100: 32,
},
spacing: {
xs: 2,
'5xl': 64
},
// components defaults can also be customized
{
components: {
Text: {
color: 'gray100'
}
}
}
};
export default function Main() {
return (
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
);
}
Checkout the demo on Snack - https://snack.expo.io/@pawankumar2901/magnus---theme-customizations