From 64254663dc7707fdca5fc6f0735a5902d7daba02 Mon Sep 17 00:00:00 2001 From: Theo Ribbi Date: Sat, 19 Jul 2025 22:33:21 +0200 Subject: [PATCH 1/2] docs(installation): update installation guide with theme provider and utils Add detailed steps for creating theme context provider and utility functions Update file paths and improve code examples for better clarity --- app/(site)/docs/installation/page.tsx | 112 +++++++++++++++++++++----- 1 file changed, 94 insertions(+), 18 deletions(-) diff --git a/app/(site)/docs/installation/page.tsx b/app/(site)/docs/installation/page.tsx index d4f49cb..c594d8f 100644 --- a/app/(site)/docs/installation/page.tsx +++ b/app/(site)/docs/installation/page.tsx @@ -250,14 +250,14 @@ module.exports = {
-

4. Create theme File

+

4. Create Theme File

- Create theme.ts in /lib directory: + Create /lib directory and create theme.ts in it:

-

5. Create global.css

+

5. Create Theme Provider

+

+ Create the theme provider in lib/theme-context.tsx: +

+ void; + activeTheme: any; +} + +const ThemeContext = createContext(undefined); + +export function ThemeProvider({ + children, + defaultTheme = 'system' +}: { + children: React.ReactNode; + defaultTheme?: 'light' | 'dark' | 'system'; +}) { + const systemColorScheme = useNativeColorScheme() as ThemeType || 'light'; + const [theme, setTheme] = useState( + defaultTheme === 'system' ? systemColorScheme : defaultTheme as ThemeType + ); + const { setColorScheme } = useNativewindColorScheme(); + + useEffect(() => { + setColorScheme(theme); + }, [theme, setColorScheme]); + + const activeTheme = themes[theme]; + + return ( + + {children} + + ); +} + +export function useTheme() { + const context = useContext(ThemeContext); + if (context === undefined) { + throw new Error('useTheme must be used within a ThemeProvider'); + } + return context; +}`} + /> +
+ +
+

6. Create Utility Functions

+

+ Create utils.ts in /lib directory for class merging utilities: +

+ +
+ +
+

7. Create global.css

Create global.css in /app directory:

@@ -368,7 +446,7 @@ export const themes = {
-

6. Configure TypeScript

+

8. Configure TypeScript

Create a new declaration file for NativeWind types:

@@ -381,7 +459,7 @@ export const themes = {
-

7. Configure TypeScript Paths

+

9. Configure TypeScript Paths

Update your tsconfig.json:

@@ -412,7 +490,7 @@ export const themes = {
-

8. Configure Babel

+

10. Configure Babel

Update or create babel.config.js:

@@ -436,7 +514,7 @@ export const themes = {
-

9. Configure Metro

+

11. Configure Metro

Create metro.config.js:

@@ -452,13 +530,13 @@ const { withNativeWind } = require('nativewind/metro'); const config = getDefaultConfig(__dirname); module.exports = withNativeWind(config, { - input: './global.css', + input: './app/global.css', });`} />
-

10. Update App Entry

+

12. Update App Entry

Update _layout.tsx:

@@ -467,9 +545,7 @@ module.exports = withNativeWind(config, { collapsible title="app/_layout.tsx" code={`import { View } from 'react-native'; -import { useState } from 'react'; -import { themes } from "@/lib/theme"; -import { ThemeProvider, useTheme } from '@/lib/ThemeProvider'; +import { ThemeProvider, useTheme } from '@/lib/theme-context'; import './global.css'; export default function RootLayout() { @@ -492,7 +568,7 @@ function AppContent() {
-

11. Configure app.json

+

13. Configure app.json

Update app.json:

@@ -511,7 +587,7 @@ function AppContent() {
-

12. Configure shadcn

+

14. Configure components.json

Create components.json in your project root:

@@ -548,12 +624,12 @@ function AppContent() {
-

13. Start Development

+

14. Start Development

-

14. Test Your Setup

+

15. Test Your Setup

Add this code in any of your components to test that everything is working:

From 3960f7146cceb77b004cec5ff1c2ae62ce0fce2a Mon Sep 17 00:00:00 2001 From: theoribbi Date: Mon, 21 Jul 2025 09:39:05 +0200 Subject: [PATCH 2/2] fix(docs): add loading skeleton for installation page Improve user experience by adding a loading skeleton while the installation page resources are being loaded. This prevents layout shift and provides visual feedback during loading. Also includes minor content updates to installation commands and test component example. --- app/(site)/docs/installation/page.tsx | 148 ++++++++++++++++---------- 1 file changed, 94 insertions(+), 54 deletions(-) diff --git a/app/(site)/docs/installation/page.tsx b/app/(site)/docs/installation/page.tsx index d4f49cb..6bcf9de 100644 --- a/app/(site)/docs/installation/page.tsx +++ b/app/(site)/docs/installation/page.tsx @@ -6,46 +6,93 @@ import { InstallationTabs } from "@/components/docs/installation-tabs"; import Image from "next/image"; import { useTheme } from "next-themes"; -export default function InstallationPage() { - const [selectedPlatform, setSelectedPlatform] = React.useState("expo"); - const { resolvedTheme } = useTheme(); - const [mounted, setMounted] = React.useState(false); - - React.useEffect(() => { - setMounted(true); - }, []); +const InstallationPageSkeleton = () => { + return ( +
+ {/* Header skeleton */} +
+
+
+
+
+
- if (!mounted) { - return ( -
-
-

Installation

-

- How to install dependencies and structure your app. -

+ {/* Info banner skeleton */} +
+
+
+
+
+
+ + {/* Platform selection skeleton */} +
-
+
-
- Expo +
+
+
+
-
-

Expo (Recommended)

-

- Quick setup with better developer experience -

+
+
+
+
+
+
+
+
+ + {/* Installation steps skeleton */} +
+
+
+
+
+
+ + {/* Multiple step skeletons */} + {Array.from({ length: 6 }).map((_, i) => ( +
+
+
+
+
+ ))} +
- ); +
+ ); +}; + +export default function InstallationPage() { + const [selectedPlatform, setSelectedPlatform] = React.useState("expo"); + const { resolvedTheme } = useTheme(); + const [mounted, setMounted] = React.useState(false); + const [isLoading, setIsLoading] = React.useState(true); + + React.useEffect(() => { + const loadResources = async () => { + setIsLoading(true); + + // Simulate loading time for theme and resources + await new Promise(resolve => setTimeout(resolve, 800)); + + setMounted(true); + setIsLoading(false); + }; + + loadResources(); + }, []); + + if (isLoading || !mounted) { + return ; } return ( @@ -136,7 +183,7 @@ export default function InstallationPage() {

1. Create Expo Project

- +
@@ -558,41 +605,34 @@ function AppContent() { Add this code in any of your components to test that everything is working:

- Click me - -);`} +export default function TestComponent() { + return ( + + + NativeUI is working! 🎉 + + + ); +}`} />
) : ( -
-

React Native CLI Support

-

- Support for React Native CLI is coming soon. We recommend using Expo for now. +

+

React Native CLI

+

+ Support for React Native CLI is coming soon. Stay tuned!

)}
- -
-

Next Steps

-

- Now that you have set up your project, you can start adding components from our collection. - Visit the components section to explore available components and learn how to use them. -

-
); } \ No newline at end of file