From df135919910b289c12080c0cea45b0a3943905d5 Mon Sep 17 00:00:00 2001 From: Willian Ribeiro Angelo Date: Tue, 3 Oct 2023 00:10:25 -0300 Subject: [PATCH] feat: tailwind dark theme --- src/app/_layout.tsx | 5 ++++ src/app/explore.tsx | 6 +++- src/app/index.tsx | 18 ++++++------ src/app/more.tsx | 6 ++-- src/components/atomic/atoms/Button/index.tsx | 2 +- src/components/navigator.tsx | 30 +++++++++----------- 6 files changed, 37 insertions(+), 30 deletions(-) diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx index e910ece..607059c 100644 --- a/src/app/_layout.tsx +++ b/src/app/_layout.tsx @@ -2,12 +2,17 @@ import '../styles/global.css' import { Slot } from 'expo-router' import Head from 'expo-router/head' +import { useDeviceContext } from 'twrnc' import { ResponsiveNavigator } from '@/components/navigator' import { storybookEnabled } from '@/config' +import { tw } from '@/lib/tailwind' export default function Layout() { + useDeviceContext(tw) + if (storybookEnabled) return + return ( <> diff --git a/src/app/explore.tsx b/src/app/explore.tsx index 575e336..bfcea2b 100644 --- a/src/app/explore.tsx +++ b/src/app/explore.tsx @@ -1,8 +1,12 @@ import { StyleSheet, Text, View } from 'react-native' +import { useDeviceContext } from 'twrnc' + +import { tailwind, tw } from '@/lib/tailwind' export default function Page() { + useDeviceContext(tw) return ( - + Explore Modify app/explore.tsx diff --git a/src/app/index.tsx b/src/app/index.tsx index 661247e..4b88f6e 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -12,17 +12,15 @@ const Index = () => { return ( - - Home - Modify app/index.tsx - {translate('welcome')} + Home + Modify app/index.tsx + {translate('welcome')} - - - - + + + ) } diff --git a/src/app/more.tsx b/src/app/more.tsx index b290f1f..0a16132 100644 --- a/src/app/more.tsx +++ b/src/app/more.tsx @@ -1,10 +1,12 @@ import { Text, View } from 'react-native' +import { useDeviceContext } from 'twrnc' -import { tailwind } from '@/lib/tailwind' +import { tailwind, tw } from '@/lib/tailwind' export default function Page() { + useDeviceContext(tw) return ( - + - {children} + {children} ) } diff --git a/src/components/navigator.tsx b/src/components/navigator.tsx index 1981610..e1f0e2d 100644 --- a/src/components/navigator.tsx +++ b/src/components/navigator.tsx @@ -44,7 +44,7 @@ function HeaderLogo() { } ]}> - + {[ { icon: 'home', id: 'index', name: 'index' }, { icon: 'explore', id: 'explore', name: 'explore' }, @@ -182,7 +189,7 @@ function TabBar({ visible }: { visible: boolean }) { {({ focused, hovered, pressed }) => ( - + ) @@ -395,15 +402,6 @@ const Colors = { const NAV_MEDIUM_WIDTH = 244 const styles = StyleSheet.create({ - nav: { - alignItems: 'center', - borderTopColor: Colors.lightGray, - borderTopWidth: 1, - flexDirection: 'row', - height: 49, - justifyContent: 'space-around', - paddingHorizontal: 16 - }, sideBar: { minWidth: 72, width: 72