Theming Ignite

When it comes to styling we acknowledge the popularity and effectiveness of libraries like styled-components, emotion.js and unistyles. Our boilerplate is designed to work seamlessly with these styling solutions, offering you the flexibility to choose the one that aligns with your preferences and project requirements.

The theming system in Ignite Boilerplate is crafted to be adaptable and easy to customize. By simply replacing colors and fonts through the designated theme files, you can tailor the look and feel of your application.

Using Emotion

1. Add Emotion to your app:

Yarn

yarn add @emotion/react @emotion/native

npm

npm install @emotion/react @emotion/native

pnpm

pnpm install @emotion/react @emotion/native

2. Add the Emotion ThemeProvider

Find and open the AppNavigator.tsx file in your project and add the import:

import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";

Add the following functional component:

const EmotionJSThemeProvider = (props: React.PropsWithChildren) => {
  const { theme } = useAppTheme();
  return <EmotionThemeProvider theme={theme}>{props.children}</EmotionThemeProvider>;
};

Add the new EmotionJSThemeProvider component just inside the <ThemeProvider> component in the AppNavigator.

return (
  <ThemeProvider value={{ themeScheme, setThemeContextOverride }}>
+    <EmotionJSThemeProvider>
      <NavigationContainer ref={navigationRef} theme={navigationTheme} {...props}>
        <AppStack />
      </NavigationContainer>
+    </EmotionJSThemeProvider>
  </ThemeProvider>
);

3. Create and use your first Emotion component using the new theme:

import styled from "@emotion/native";

const MyTextComponent = styled.Text`
  margin: 10px;
  color: ${({ theme }) => theme.colors.text};
  background-color: ${({ theme }) => theme.colors.background};
`;

export const MyScreen = (props) => {
  return (
    <MyTextComponent>
      This text color and background will change when changing themes.
    </MyTextComponent>
  );
};

4. Tell Emotion.js about the shape of your theme:

Create a new file in you Ignited app's types folder called emotion.d.ts with the following content:

// Override Theme to get accurate typings for your project.
import type { Theme as AppTheme } from "app/theme";
import "@emotion/react";

declare module "@emotion/react" {
  export interface Theme extends AppTheme {}
}

Complete!

You can now use Emotion integrated into the Ignite theme engine. To swap themes provide the user a switch or toggle button:

const { setThemeContextOverride, themeContext } = useAppTheme();

return (
  <Button
    onPress={() => {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition
      setThemeContextOverride(themeContext === "dark" ? "light" : "dark");
    }}
    text={`Switch Theme: ${themeContext}`}
  />
);