Merge pull request #2 from martinezguillaume/nativewind

Add NativeWind 🔥

.github/workflows/deploy.yml

@@ -0,0 +1,17 @@
+name: test
+
+on:
+ push:
+ branches:
+ - 'main'
+
+jobs:
+ test:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - uses: oven-sh/setup-bun@v1
+ with:
+ bun-version: latest
+ - run: bun install
+ - run: bun run deploy

app.json

@@ -33,7 +33,8 @@
  "expo-router"
  ],
  "experiments": {
- "typedRoutes": true
+ "typedRoutes": true,
+ "baseUrl": "/portfolio"
  }
  }
 }

app/_layout.tsx

@@ -1,88 +1,70 @@
-import AsyncStorage from '@react-native-async-storage/async-storage'
-import {DarkTheme, DefaultTheme, ThemeProvider} from '@react-navigation/native'
+import {
+ DarkTheme,
+ DefaultTheme,
+ ThemeProvider,
+ useTheme,
+} from '@react-navigation/native'
 import {useAssets} from 'expo-asset'
-import {loadAsync, useFonts} from 'expo-font'
+import {useFonts} from 'expo-font'
 import {Slot, SplashScreen} from 'expo-router'
-import * as SystemUI from 'expo-system-ui'
-import {
- INativebaseConfig,
- NativeBaseProvider,
- StorageManager,
- useColorMode,
- useColorModeValue,
-} from 'native-base'
 import {ReactNode, useEffect} from 'react'
-import Ionicons from '@expo/vector-icons/Ionicons'
-import {useColorScheme} from 'nativewind'
+import * as SystemUI from 'expo-system-ui'
+import Feather from '@expo/vector-icons/Feather'
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
 import {View} from 'react-native'
 
-import {useAppStore} from '@/store'
+import {useColorSchemeStore, useLocalStore} from '@/stores'
 import {ICONS, IMAGES} from '@/assets'
-import {theme} from '@/theme'
 import {ThemeName, themes} from '@/themes'
 import '../global.css'
 
-// Native Base config
-const colorModeManager: StorageManager = {
- get: async () => {
- try {
- const val = await AsyncStorage.getItem('@color-mode')
- return val === 'dark' ? 'dark' : 'light'
- } catch (e) {
- return 'dark'
- }
- },
- set: async value => {
- try {
- if (value) {
- await AsyncStorage.setItem('@color-mode', value)
- }
- } catch (e) {
- console.log(e)
- }
- },
-}
-const config: INativebaseConfig = {
- strictMode: 'error',
- theme,
-}
-
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync()
 
 export default function RootLayout() {
- const [fontsLoaded, error] = useFonts({
- ...Ionicons.font,
+ const [fontsLoaded, fontsError] = useFonts({
+ ...Feather.font,
+ ...MaterialCommunityIcons.font,
  })
 
- const [assets] = useAssets([
+ const [assets, assetsError] = useAssets([
  ...Object.values(IMAGES),
  ...Object.values(ICONS),
  ])
 
+ const isLoading = !fontsLoaded || !assets
+
  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
- if (error) {
- throw error
+ if (assetsError) {
+ throw assetsError
+ }
+ if (fontsError) {
+ throw fontsError
  }
- }, [error])
+ }, [assetsError, fontsError])
 
  useEffect(() => {
- loadAsync(Ionicons.font)
- if (fontsLoaded && assets) {
+ if (!isLoading) {
  SplashScreen.hideAsync()
  }
- }, [assets, fontsLoaded])
+ }, [isLoading])
 
- if (!fontsLoaded || !assets) {
+ if (isLoading) {
  return null
  }
 
  return <RootLayoutNav />
 }
 
 function Theme({name, children}: {name: ThemeName; children: ReactNode}) {
- const {colorScheme} = useColorScheme()
+ const {colorScheme} = useColorSchemeStore()
+ const {colors} = useTheme()
+
+ useEffect(() => {
+ SystemUI.setBackgroundColorAsync(colors.background)
+ }, [colorScheme, colors.background])
+
  return (
  <View className="flex-1" style={themes[name][colorScheme]}>
  {children}
@@ -91,24 +73,14 @@ function Theme({name, children}: {name: ThemeName; children: ReactNode}) {
 }
 
 function RootLayoutNav() {
- const locale = useAppStore(state => state.locale)
- const {colorMode} = useColorMode()
- const backgroundColor = useColorModeValue(
- DefaultTheme.colors.background,
- DarkTheme.colors.background,
- )
-
- useEffect(() => {
- SystemUI.setBackgroundColorAsync(backgroundColor)
- }, [backgroundColor])
+ const locale = useLocalStore(state => state.locale)
+ const {colorScheme} = useColorSchemeStore()
 
  return (
- <Theme name="twitter">
- <ThemeProvider value={colorMode === 'dark' ? DarkTheme : DefaultTheme}>
- <NativeBaseProvider colorModeManager={colorModeManager} config={config}>
- <Slot key={locale} />
- </NativeBaseProvider>
- </ThemeProvider>
- </Theme>
+ <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+ <Theme name="twitter">
+ <Slot key={locale} />
+ </Theme>
+ </ThemeProvider>
  )
 }

app/index.tsx

@@ -1,104 +1,58 @@
-import {Box, Divider, Text} from 'native-base'
-import {useCallback, useState, ReactElement} from 'react'
-import {LayoutChangeEvent, ListRenderItem, StyleSheet} from 'react-native'
-import Animated, {useSharedValue} from 'react-native-reanimated'
-import {Route} from 'react-native-tab-view'
-import {useTheme} from '@react-navigation/native'
+import {useState, ReactElement} from 'react'
+import {View} from 'react-native'
+import {useSharedValue} from 'react-native-reanimated'
 
 import {
  Header,
  LocaleFab,
- ListItem,
  TabView,
  TabViewProps,
  ColorModeFab,
  Background,
+ ListHeader,
 } from '@/components'
-import {data, DataItem} from '@/data'
-import {useValues} from '@/hooks'
+import {data} from '@/data'
 import {i18n} from '@/i18n'
+import {Text} from '@/components/base'
 
 export default function Home(): ReactElement {
- const theme = useTheme()
  const scrollY = useSharedValue(0)
- const [headerHeight, setHeaderHeight] = useState(0)
- const {appWidth} = useValues()
 
- const onHeaderLayout = useCallback(({nativeEvent}: LayoutChangeEvent) => {
- setHeaderHeight(nativeEvent.layout.height)
- }, [])
-
- const [routes] = useState([
- {key: 'projects', title: i18n.t('home.projects')},
- {key: 'experiences', title: i18n.t('home.experiences')},
- ])
-
- const getDataKey = useCallback((item: DataItem) => item.id.toString(), [])
- const renderData = useCallback<ListRenderItem<DataItem>>(
- ({item}) => <ListItem data={item} />,
- [],
- )
- const renderScene = useCallback<TabViewProps<Route>['renderScene']>(
- ({route, listProps}) => {
- return (
- <Animated.FlatList
- {...listProps}
- keyExtractor={getDataKey}
- data={route.key === 'experiences' ? data.experiences : data.projects}
- renderItem={renderData}
- ItemSeparatorComponent={Divider}
- />
- )
+ const [routes] = useState<TabViewProps['routes']>(() => [
+ {
+ key: 'projects',
+ title: i18n.t('home.projects'),
+ data: data.projects,
  },
- [getDataKey, renderData],
- )
+ {
+ key: 'experiences',
+ title: i18n.t('home.experiences'),
+ data: data.experiences,
+ },
+ ])
 
  return (
  <>
  <Background />
 
- <Box
- flex={1}
- _web={{
- width: appWidth,
- alignSelf: 'center',
- borderRightWidth: 1,
- borderLeftWidth: 1,
- }}>
- <Header scrollY={scrollY} onLayout={onHeaderLayout} />
+ <View className="flex-1 max-w-screen-sm web:sm:self-center sm:border-x border-divider">
+ <Header scrollY={scrollY} />
 
  <TabView
  routes={routes}
- renderScene={renderScene}
- style={styles.tabView}
+ ListHeaderComponent={<ListHeader scrollY={scrollY} />}
  scrollY={scrollY}
- paddingTop={headerHeight}
  />
 
  <LocaleFab />
  <ColorModeFab />
- </Box>
- <Box
- position={{md: 'absolute'}}
- bottom={0}
- right={0}
- borderWidth={{sm: 1, md: 0}}>
- <Text
- textAlign="center"
- fontWeight={700}
- fontSize={8}
- bg={theme.colors.background}
- px={1}>
+ </View>
+
+ <View className="sm:absolute bottom-0 right-0 border-t sm:border-x sm:border border-divider sm:bg-background">
+ <Text className="!text-[8px] font-bold text-center p-1 leading-none">
  Cette app est cross-platform (iOS + Android + Web) ❤️
  </Text>
- </Box>
+ </View>
  </>
  )
 }
-
-const styles = StyleSheet.create({
- tabView: {
- zIndex: 2,
- ...StyleSheet.absoluteFillObject,
- },
-})

assets/images/index.ts

@@ -1,6 +1,6 @@
 export const IMAGES = {
  cover: require('./cover.webp'),
- avatar: require('./avatar.webp'),
+ avatar: require('./avatar.jpeg'),
  totem: require('./totem.webp'),
  t2m: require('./t2m.jpg'),
  faks: require('./faks.webp'),

components/Background.tsx

@@ -1,6 +1,5 @@
 import {memo, useEffect} from 'react'
-import {StyleSheet} from 'react-native'
-import {Box, useColorMode} from 'native-base'
+import {ViewProps} from 'react-native'
 import Animated, {
  interpolateColor,
  useAnimatedStyle,
@@ -9,17 +8,17 @@ import Animated, {
 } from 'react-native-reanimated'
 import {DarkTheme, DefaultTheme} from '@react-navigation/native'
 
-const AnimatedBox = Animated.createAnimatedComponent(Box)
+import {useColorSchemeStore} from '@/stores'
 
-type Props = {}
+type Props = ViewProps
 
-export const Background = memo<Props>(() => {
- const {colorMode} = useColorMode()
- const colorProgress = useSharedValue(0)
+export const Background = memo<Props>(({className, style, ...props}) => {
+ const {colorScheme} = useColorSchemeStore()
+ const colorProgress = useSharedValue(colorScheme === 'light' ? 0 : 1)
 
  useEffect(() => {
- colorProgress.value = withTiming(colorMode === 'light' ? 0 : 1)
- }, [colorMode, colorProgress])
+ colorProgress.value = withTiming(colorScheme === 'light' ? 0 : 1)
+ }, [colorProgress, colorScheme])
 
  const contentStyle = useAnimatedStyle(() => {
  return {
@@ -31,14 +30,11 @@ export const Background = memo<Props>(() => {
  }
  })
 
- return <AnimatedBox style={[styles.content, contentStyle]} flex={1} />
-})
-
-const styles = StyleSheet.create({
- gradient: {
- ...StyleSheet.absoluteFillObject,
- },
- content: {
- ...StyleSheet.absoluteFillObject,
- },
+ return (
+ <Animated.View
+ className={`flex-1 absolute top-0 bottom-0 left-0 right-0 ${className}`}
+ style={[contentStyle, style]}
+ {...props}
+ />
+ )
 })