Skip to content

Commit 6425466

Browse files
theoribbitheoribbi
committed
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
1 parent 2b55032 commit 6425466

File tree

1 file changed

+94
-18
lines changed

1 file changed

+94
-18
lines changed

‎app/(site)/docs/installation/page.tsx‎

Lines changed: 94 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -250,14 +250,14 @@ module.exports = {
250250
</div>
251251

252252
<div className="space-y-4">
253-
<h3 className="text-xl font-semibold mt-8">4. Create theme File</h3>
253+
<h3 className="text-xl font-semibold mt-8">4. Create Theme File</h3>
254254
<p className="text-sm text-muted-foreground mb-4">
255-
Create theme.ts in /lib directory:
255+
Create /lib directory and create theme.ts in it:
256256
</p>
257257
<CodeBlock
258-
language="css"
258+
language="typescript"
259259
collapsible
260-
title="theme.ts"
260+
title="lib/theme.ts"
261261
code={`import { vars } from "nativewind";
262262
263263
export const themes = {
@@ -353,7 +353,85 @@ export const themes = {
353353
</div>
354354

355355
<div className="space-y-4">
356-
<h3 className="text-xl font-semibold mt-8">5. Create global.css</h3>
356+
<h3 className="text-xl font-semibold mt-8">5. Create Theme Provider</h3>
357+
<p className="text-sm text-muted-foreground mb-4">
358+
Create the theme provider in lib/theme-context.tsx:
359+
</p>
360+
<CodeBlock
361+
language="typescript"
362+
collapsible
363+
title="lib/theme-context.tsx"
364+
code={`import { useColorScheme as useNativewindColorScheme } from 'nativewind';
365+
import React, { createContext, useContext, useEffect, useState } from 'react';
366+
import { useColorScheme as useNativeColorScheme } from 'react-native';
367+
import { themes } from './theme';
368+
369+
type ThemeType = 'light' | 'dark';
370+
371+
interface ThemeContextType {
372+
theme: ThemeType;
373+
setTheme: (theme: ThemeType) => void;
374+
activeTheme: any;
375+
}
376+
377+
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
378+
379+
export function ThemeProvider({
380+
children,
381+
defaultTheme = 'system'
382+
}: {
383+
children: React.ReactNode;
384+
defaultTheme?: 'light' | 'dark' | 'system';
385+
}) {
386+
const systemColorScheme = useNativeColorScheme() as ThemeType || 'light';
387+
const [theme, setTheme] = useState<ThemeType>(
388+
defaultTheme === 'system' ? systemColorScheme : defaultTheme as ThemeType
389+
);
390+
const { setColorScheme } = useNativewindColorScheme();
391+
392+
useEffect(() => {
393+
setColorScheme(theme);
394+
}, [theme, setColorScheme]);
395+
396+
const activeTheme = themes[theme];
397+
398+
return (
399+
<ThemeContext.Provider value={{ theme, setTheme, activeTheme }}>
400+
{children}
401+
</ThemeContext.Provider>
402+
);
403+
}
404+
405+
export function useTheme() {
406+
const context = useContext(ThemeContext);
407+
if (context === undefined) {
408+
throw new Error('useTheme must be used within a ThemeProvider');
409+
}
410+
return context;
411+
}`}
412+
/>
413+
</div>
414+
415+
<div className="space-y-4">
416+
<h3 className="text-xl font-semibold mt-8">6. Create Utility Functions</h3>
417+
<p className="text-sm text-muted-foreground mb-4">
418+
Create utils.ts in /lib directory for class merging utilities:
419+
</p>
420+
<CodeBlock
421+
language="typescript"
422+
collapsible
423+
title="lib/utils.ts"
424+
code={`import { type ClassValue, clsx } from "clsx";
425+
import { twMerge } from "tailwind-merge";
426+
427+
export function cn(...inputs: ClassValue[]) {
428+
return twMerge(clsx(inputs));
429+
}`}
430+
/>
431+
</div>
432+
433+
<div className="space-y-4">
434+
<h3 className="text-xl font-semibold mt-8">7. Create global.css</h3>
357435
<p className="text-sm text-muted-foreground mb-4">
358436
Create global.css in /app directory:
359437
</p>
@@ -368,7 +446,7 @@ export const themes = {
368446
</div>
369447

370448
<div className="space-y-4">
371-
<h3 className="text-xl font-semibold mt-8">6. Configure TypeScript</h3>
449+
<h3 className="text-xl font-semibold mt-8">8. Configure TypeScript</h3>
372450
<p className="text-sm text-muted-foreground mb-4">
373451
Create a new declaration file for NativeWind types:
374452
</p>
@@ -381,7 +459,7 @@ export const themes = {
381459
</div>
382460

383461
<div className="space-y-4">
384-
<h3 className="text-xl font-semibold mt-8">7. Configure TypeScript Paths</h3>
462+
<h3 className="text-xl font-semibold mt-8">9. Configure TypeScript Paths</h3>
385463
<p className="text-sm text-muted-foreground mb-4">
386464
Update your tsconfig.json:
387465
</p>
@@ -412,7 +490,7 @@ export const themes = {
412490
</div>
413491

414492
<div className="space-y-4">
415-
<h3 className="text-xl font-semibold mt-8">8. Configure Babel</h3>
493+
<h3 className="text-xl font-semibold mt-8">10. Configure Babel</h3>
416494
<p className="text-sm text-muted-foreground mb-4">
417495
Update or create babel.config.js:
418496
</p>
@@ -436,7 +514,7 @@ export const themes = {
436514
</div>
437515

438516
<div className="space-y-4">
439-
<h3 className="text-xl font-semibold mt-8">9. Configure Metro</h3>
517+
<h3 className="text-xl font-semibold mt-8">11. Configure Metro</h3>
440518
<p className="text-sm text-muted-foreground mb-4">
441519
Create metro.config.js:
442520
</p>
@@ -452,13 +530,13 @@ const { withNativeWind } = require('nativewind/metro');
452530
const config = getDefaultConfig(__dirname);
453531
454532
module.exports = withNativeWind(config, {
455-
input: './global.css',
533+
input: './app/global.css',
456534
});`}
457535
/>
458536
</div>
459537

460538
<div className="space-y-4">
461-
<h3 className="text-xl font-semibold mt-8">10. Update App Entry</h3>
539+
<h3 className="text-xl font-semibold mt-8">12. Update App Entry</h3>
462540
<p className="text-sm text-muted-foreground mb-4">
463541
Update _layout.tsx:
464542
</p>
@@ -467,9 +545,7 @@ module.exports = withNativeWind(config, {
467545
collapsible
468546
title="app/_layout.tsx"
469547
code={`import { View } from 'react-native';
470-
import { useState } from 'react';
471-
import { themes } from "@/lib/theme";
472-
import { ThemeProvider, useTheme } from '@/lib/ThemeProvider';
548+
import { ThemeProvider, useTheme } from '@/lib/theme-context';
473549
import './global.css';
474550
475551
export default function RootLayout() {
@@ -492,7 +568,7 @@ function AppContent() {
492568
</div>
493569

494570
<div className="space-y-4">
495-
<h3 className="text-xl font-semibold mt-8">11. Configure app.json</h3>
571+
<h3 className="text-xl font-semibold mt-8">13. Configure app.json</h3>
496572
<p className="text-sm text-muted-foreground mb-4">
497573
Update app.json:
498574
</p>
@@ -511,7 +587,7 @@ function AppContent() {
511587
</div>
512588

513589
<div className="space-y-4">
514-
<h3 className="text-xl font-semibold mt-8">12. Configure shadcn</h3>
590+
<h3 className="text-xl font-semibold mt-8">14. Configure components.json</h3>
515591
<p className="text-sm text-muted-foreground mb-4">
516592
Create components.json in your project root:
517593
</p>
@@ -548,12 +624,12 @@ function AppContent() {
548624
</div>
549625

550626
<div className="space-y-4">
551-
<h3 className="text-xl font-semibold mt-8">13. Start Development</h3>
627+
<h3 className="text-xl font-semibold mt-8">14. Start Development</h3>
552628
<InstallationTabs command="expo start" />
553629
</div>
554630

555631
<div className="space-y-4">
556-
<h3 className="text-xl font-semibold mt-8">14. Test Your Setup</h3>
632+
<h3 className="text-xl font-semibold mt-8">15. Test Your Setup</h3>
557633
<p className="text-sm text-muted-foreground mb-4">
558634
Add this code in any of your components to test that everything is working:
559635
</p>

0 commit comments

Comments
 (0)