Skip to content

Commit 37f5be1

Browse files
theoribbitheoribbi
committed
Merge branch 'hotfix' of https://github.com/nativeui-org/ui into hotfix
2 parents 3960f71 + 6425466 commit 37f5be1

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
@@ -297,14 +297,14 @@ module.exports = {
297297
</div>
298298

299299
<div className="space-y-4">
300-
<h3 className="text-xl font-semibold mt-8">4. Create theme File</h3>
300+
<h3 className="text-xl font-semibold mt-8">4. Create Theme File</h3>
301301
<p className="text-sm text-muted-foreground mb-4">
302-
Create theme.ts in /lib directory:
302+
Create /lib directory and create theme.ts in it:
303303
</p>
304304
<CodeBlock
305-
language="css"
305+
language="typescript"
306306
collapsible
307-
title="theme.ts"
307+
title="lib/theme.ts"
308308
code={`import { vars } from "nativewind";
309309
310310
export const themes = {
@@ -400,7 +400,85 @@ export const themes = {
400400
</div>
401401

402402
<div className="space-y-4">
403-
<h3 className="text-xl font-semibold mt-8">5. Create global.css</h3>
403+
<h3 className="text-xl font-semibold mt-8">5. Create Theme Provider</h3>
404+
<p className="text-sm text-muted-foreground mb-4">
405+
Create the theme provider in lib/theme-context.tsx:
406+
</p>
407+
<CodeBlock
408+
language="typescript"
409+
collapsible
410+
title="lib/theme-context.tsx"
411+
code={`import { useColorScheme as useNativewindColorScheme } from 'nativewind';
412+
import React, { createContext, useContext, useEffect, useState } from 'react';
413+
import { useColorScheme as useNativeColorScheme } from 'react-native';
414+
import { themes } from './theme';
415+
416+
type ThemeType = 'light' | 'dark';
417+
418+
interface ThemeContextType {
419+
theme: ThemeType;
420+
setTheme: (theme: ThemeType) => void;
421+
activeTheme: any;
422+
}
423+
424+
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
425+
426+
export function ThemeProvider({
427+
children,
428+
defaultTheme = 'system'
429+
}: {
430+
children: React.ReactNode;
431+
defaultTheme?: 'light' | 'dark' | 'system';
432+
}) {
433+
const systemColorScheme = useNativeColorScheme() as ThemeType || 'light';
434+
const [theme, setTheme] = useState<ThemeType>(
435+
defaultTheme === 'system' ? systemColorScheme : defaultTheme as ThemeType
436+
);
437+
const { setColorScheme } = useNativewindColorScheme();
438+
439+
useEffect(() => {
440+
setColorScheme(theme);
441+
}, [theme, setColorScheme]);
442+
443+
const activeTheme = themes[theme];
444+
445+
return (
446+
<ThemeContext.Provider value={{ theme, setTheme, activeTheme }}>
447+
{children}
448+
</ThemeContext.Provider>
449+
);
450+
}
451+
452+
export function useTheme() {
453+
const context = useContext(ThemeContext);
454+
if (context === undefined) {
455+
throw new Error('useTheme must be used within a ThemeProvider');
456+
}
457+
return context;
458+
}`}
459+
/>
460+
</div>
461+
462+
<div className="space-y-4">
463+
<h3 className="text-xl font-semibold mt-8">6. Create Utility Functions</h3>
464+
<p className="text-sm text-muted-foreground mb-4">
465+
Create utils.ts in /lib directory for class merging utilities:
466+
</p>
467+
<CodeBlock
468+
language="typescript"
469+
collapsible
470+
title="lib/utils.ts"
471+
code={`import { type ClassValue, clsx } from "clsx";
472+
import { twMerge } from "tailwind-merge";
473+
474+
export function cn(...inputs: ClassValue[]) {
475+
return twMerge(clsx(inputs));
476+
}`}
477+
/>
478+
</div>
479+
480+
<div className="space-y-4">
481+
<h3 className="text-xl font-semibold mt-8">7. Create global.css</h3>
404482
<p className="text-sm text-muted-foreground mb-4">
405483
Create global.css in /app directory:
406484
</p>
@@ -415,7 +493,7 @@ export const themes = {
415493
</div>
416494

417495
<div className="space-y-4">
418-
<h3 className="text-xl font-semibold mt-8">6. Configure TypeScript</h3>
496+
<h3 className="text-xl font-semibold mt-8">8. Configure TypeScript</h3>
419497
<p className="text-sm text-muted-foreground mb-4">
420498
Create a new declaration file for NativeWind types:
421499
</p>
@@ -428,7 +506,7 @@ export const themes = {
428506
</div>
429507

430508
<div className="space-y-4">
431-
<h3 className="text-xl font-semibold mt-8">7. Configure TypeScript Paths</h3>
509+
<h3 className="text-xl font-semibold mt-8">9. Configure TypeScript Paths</h3>
432510
<p className="text-sm text-muted-foreground mb-4">
433511
Update your tsconfig.json:
434512
</p>
@@ -459,7 +537,7 @@ export const themes = {
459537
</div>
460538

461539
<div className="space-y-4">
462-
<h3 className="text-xl font-semibold mt-8">8. Configure Babel</h3>
540+
<h3 className="text-xl font-semibold mt-8">10. Configure Babel</h3>
463541
<p className="text-sm text-muted-foreground mb-4">
464542
Update or create babel.config.js:
465543
</p>
@@ -483,7 +561,7 @@ export const themes = {
483561
</div>
484562

485563
<div className="space-y-4">
486-
<h3 className="text-xl font-semibold mt-8">9. Configure Metro</h3>
564+
<h3 className="text-xl font-semibold mt-8">11. Configure Metro</h3>
487565
<p className="text-sm text-muted-foreground mb-4">
488566
Create metro.config.js:
489567
</p>
@@ -499,13 +577,13 @@ const { withNativeWind } = require('nativewind/metro');
499577
const config = getDefaultConfig(__dirname);
500578
501579
module.exports = withNativeWind(config, {
502-
input: './global.css',
580+
input: './app/global.css',
503581
});`}
504582
/>
505583
</div>
506584

507585
<div className="space-y-4">
508-
<h3 className="text-xl font-semibold mt-8">10. Update App Entry</h3>
586+
<h3 className="text-xl font-semibold mt-8">12. Update App Entry</h3>
509587
<p className="text-sm text-muted-foreground mb-4">
510588
Update _layout.tsx:
511589
</p>
@@ -514,9 +592,7 @@ module.exports = withNativeWind(config, {
514592
collapsible
515593
title="app/_layout.tsx"
516594
code={`import { View } from 'react-native';
517-
import { useState } from 'react';
518-
import { themes } from "@/lib/theme";
519-
import { ThemeProvider, useTheme } from '@/lib/ThemeProvider';
595+
import { ThemeProvider, useTheme } from '@/lib/theme-context';
520596
import './global.css';
521597
522598
export default function RootLayout() {
@@ -539,7 +615,7 @@ function AppContent() {
539615
</div>
540616

541617
<div className="space-y-4">
542-
<h3 className="text-xl font-semibold mt-8">11. Configure app.json</h3>
618+
<h3 className="text-xl font-semibold mt-8">13. Configure app.json</h3>
543619
<p className="text-sm text-muted-foreground mb-4">
544620
Update app.json:
545621
</p>
@@ -558,7 +634,7 @@ function AppContent() {
558634
</div>
559635

560636
<div className="space-y-4">
561-
<h3 className="text-xl font-semibold mt-8">12. Configure shadcn</h3>
637+
<h3 className="text-xl font-semibold mt-8">14. Configure components.json</h3>
562638
<p className="text-sm text-muted-foreground mb-4">
563639
Create components.json in your project root:
564640
</p>
@@ -595,12 +671,12 @@ function AppContent() {
595671
</div>
596672

597673
<div className="space-y-4">
598-
<h3 className="text-xl font-semibold mt-8">13. Start Development</h3>
674+
<h3 className="text-xl font-semibold mt-8">14. Start Development</h3>
599675
<InstallationTabs command="expo start" />
600676
</div>
601677

602678
<div className="space-y-4">
603-
<h3 className="text-xl font-semibold mt-8">14. Test Your Setup</h3>
679+
<h3 className="text-xl font-semibold mt-8">15. Test Your Setup</h3>
604680
<p className="text-sm text-muted-foreground mb-4">
605681
Add this code in any of your components to test that everything is working:
606682
</p>

0 commit comments

Comments
 (0)