Skip to content

Commit

Permalink
chore(recpie): Adds Theming Ignite recipes
Browse files Browse the repository at this point in the history
  • Loading branch information
markrickert committed Feb 28, 2024
1 parent 76ccb7f commit 0433ff8
Show file tree
Hide file tree
Showing 2 changed files with 272 additions and 0 deletions.
130 changes: 130 additions & 0 deletions docs/recipes/Theming-StyledComponents.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
---
title: Theming Ignite with styled-components
description: Learn how to use different styling libraries to theme your Ignited app!
tags:
- Theming
- iOS
- Android
- colors
- darkmode
- styled-components
last_update:
author: Mark Rickert
publish_date: 2024-12-02
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

# Theming Ignite

## Using `styled-components`

The ignite boilerplate comes with a powerful generic theming system that you can adapt to fit the needs of your own app by replacing colors and fonts using the built-in theme files.

We recognize that many people like using pre-built components and design systems such as styled-components, emotion, and unistyles.

styled-components is a popular library for react and react-native that

### 1. Add `styled-components to your app:

<Tabs groupId="operating-systems">
<TabItem value="yarn" label="Yarn">
<CodeBlock language="jsx">yarn add styled-components</CodeBlock>
</TabItem>
<TabItem value="npm" label="NPM">
<CodeBlock language="jsx">npm install styled-components</CodeBlock>
</TabItem>
</Tabs>

### 2. Add the `ThemeProvider` to your app:

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

```ts
import { ThemeProvider as StyledThemeProvider } from "styled-components";
```

Add the following functional component:

```tsx
const StyledComponentsThemeProvider = (props: React.PropsWithChildren) => {
const { theme } = useAppTheme();
return <StyledThemeProvider theme={theme} {...props} />;
};
```

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

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

### 3. Create and use your first styled-component using the new theme:

```tsx
import styled from "styled-components/native";

const MyTextComponent = styled.Text`
margin: 1em;
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 `styled-components` about the shape of your theme:

:::info

So it's all working now, but having code completion would be nice, huh?

:::

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

```tsx
// Override DefaultTheme to get accurate typings for your project.
import type { Theme } from "app/theme";

declare module "styled-components" {
export interface DefaultTheme extends Theme {}
}

declare module "styled-components/native" {
export interface DefaultTheme extends Theme {}
}
```

## Complete!

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

```tsx
const { setThemeContextOverride, themeContext } = useAppTheme();

return (
<Button
onPress={() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); // Animate the transition
setThemeContextOverride(themeContext === "dark" ? "light" : "dark");
}}
text={`Switch Theme: ${themeContext}`}
/>
);
```
142 changes: 142 additions & 0 deletions docs/recipes/Theming-Unistyles.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
---
title: Theming Ignite with Unistyles
description: Learn how to use different styling libraries to theme your Ignited app!
tags:
- Theming
- iOS
- Android
- colors
- darkmode
- unistyles
last_update:
author: Mark Rickert
publish_date: 2024-12-02
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

# Theming Ignite

## Using `Unistyles`

The ignite boilerplate comes with a powerful generic theming system that you can adapt to fit the needs of your own app by replacing colors and fonts using the built-in theme files.

We recognize that many people like using pre-built components and design systems such as styled-components, emotion, and unistyles.

styled-components is a popular library for react and react-native that

:::warning

Unistyles includes custom native code, which means it does not support Expo Go. You'll need to use expo CNG to build your app.

To do this with an newly ignited app, run `yarn expo prebuild --clean` and then `yarn start`.

:::

### 1. Add `react-native-unistyles to your app:

<Tabs groupId="operating-systems">
<TabItem value="yarn" label="Yarn">
<CodeBlock language="bash">yarn add react-native-unistyles</CodeBlock>
</TabItem>
<TabItem value="npm" label="npm">
<CodeBlock language="bash">npm install react-native-unistyles</CodeBlock>
</TabItem>
<TabItem value="pnpm" label="pnpm">
<CodeBlock language="bash">pnpm install react-native-unistyles</CodeBlock>
</TabItem>
</Tabs>

### 2. Add define Unistyles theme types:

Create a new file in you Ignited app's `types` folder called `react-native-unistyles.d.ts` with the following content:

```tsx
// Override UnistylesThemes to get accurate typings for your project.
import type { Theme } from "app/theme";

type AppThemes = {
light: Theme;
dark: Theme;
};

declare module "react-native-unistyles" {
export interface UnistylesThemes extends AppThemes {}
}
```

### 3. Configure unistyles to use the app's Theme:

Add the following to your app's `app/App.tsx`:

```diff
+import { UnistylesRegistry } from "react-native-unistyles"
+import { darkTheme, lightTheme } from "app/theme"

SplashScreen.preventAutoHideAsync()

+UnistylesRegistry.addThemes({
+ light: lightTheme,
+ dark: darkTheme,
+}).addConfig({
+ // adaptiveThemes: true,
+ initialTheme: "light",
+})
+

function IgniteApp() {
return <App hideSplashScreen={SplashScreen.hideAsync} />
}
```

### 4. Ensure that Unistyles knows when we want to change the theme:

Open the `app/utils/useAppTheme.ts` and make the following changes:

```diff
const setThemeContextOverride = useCallback((newTheme: ThemeContexts) => {
setTheme(newTheme)
+ UnistylesRuntime.setTheme(newTheme || "light")
}, [])
```

### 5. Create and use your first Unistyles component using the new theme:

```tsx
import { createStyleSheet, useStyles } from "react-native-unistyles";

export const MyScreen = (props) => {
const { styles } = useStyles($uniStyles);
return (
<Text style={styles.text}>
This text color and background will change when changing themes.
</Text>
);
};

const $uniStyles = createStyleSheet((theme) => ({
text: {
color: theme.colors.text,
backgroundColor: theme.colors.background,
},
}));
```

## Complete!

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

```tsx
const { setThemeContextOverride, themeContext } = useAppTheme();

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

0 comments on commit 0433ff8

Please sign in to comment.