-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(recpie): Adds Theming Ignite recipes
- Loading branch information
1 parent
76ccb7f
commit 0433ff8
Showing
2 changed files
with
272 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}`} | ||
/> | ||
); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}`} | ||
/> | ||
); | ||
``` |