Customization

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.

Copy
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