Skip to content

Commit

Permalink
refactor: switch to tamagui (#16)
Browse files Browse the repository at this point in the history
  • Loading branch information
renbaoshuo authored Oct 29, 2024
1 parent 8bdae65 commit ba4ebd5
Show file tree
Hide file tree
Showing 16 changed files with 3,078 additions and 178 deletions.
6 changes: 4 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@ expo-env.d.ts

.idea/

nativewind-env.d.ts

# Build generated files
/ios
/android

# Tamagui
.tamagui/
/tamagui-web.css
3 changes: 1 addition & 2 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
{
"plugins": [
"prettier-plugin-organize-imports",
"prettier-plugin-tailwindcss"
"prettier-plugin-organize-imports"
],
"arrowParens": "avoid",
"bracketSpacing": true,
Expand Down
3 changes: 1 addition & 2 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
"visualstudioexptteam.vscodeintellicode",
"visualstudioexptteam.intellicode-api-usage-examples",
"esbenp.prettier-vscode",
"ms-ceintl.vscode-language-pack-zh-hans",
"bradlc.vscode-tailwindcss"
"ms-ceintl.vscode-language-pack-zh-hans"
]
}
27 changes: 17 additions & 10 deletions app/+not-found.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,25 @@
import { Link, Stack } from 'expo-router';
import { Text } from 'react-native';
import { Stack } from 'expo-router';
import { H1, View } from 'tamagui';

import { ThemedView } from '@/components/ThemedView';
import { LinkButton } from '@/components/Link';

export default function NotFoundScreen() {
return (
<>
<Stack.Screen options={{ title: 'Oops!' }} />
<ThemedView className="flex items-center justify-center p-5">
<Text>This screen doesn't exist.</Text>
<Link href="/" className="mt-4 py-4">
Go to home screen!
</Link>
</ThemedView>
<Stack.Screen options={{ headerShown: false }} />
<View
display="flex"
alignItems="center"
justifyContent="center"
gap="$6"
minHeight="100vh"
>
<H1>页面不存在</H1>

<LinkButton href="/" variant="outlined">
返回首页
</LinkButton>
</View>
</>
);
}
19 changes: 14 additions & 5 deletions app/_layout.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,21 @@
import { Platform } from 'react-native';
import { Stack } from 'expo-router';
import { TamaguiProvider } from 'tamagui';

import '../global.css';
import tamaguiConfig from '../tamagui.config';

if (Platform.OS === 'web') {
require('@tamagui/core/reset.css');
require('../tamagui-web.css');
}

export default function RootLayout() {
return (
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" />
</Stack>
<TamaguiProvider config={tamaguiConfig}>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" />
</Stack>
</TamaguiProvider>
);
}
15 changes: 12 additions & 3 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
module.exports = function (api) {
api.cache(true);
return {
presets: [
['babel-preset-expo', { jsxImportSource: 'nativewind' }],
'nativewind/babel',
presets: [['babel-preset-expo', { jsxRuntime: 'automatic' }]],
plugins: [
[
'@tamagui/babel-plugin',
{
components: ['tamagui'],
config: './tamagui.config.ts',
logTimings: true,
disableExtraction: process.env.NODE_ENV === 'development',
},
],
'react-native-reanimated/plugin',
],
};
};
16 changes: 16 additions & 0 deletions components/Link.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Link as RouterLink, type Href } from 'expo-router';
import { Button, styled, type ButtonProps, type GetProps } from 'tamagui';

export const Link = styled(RouterLink);

export type LinkProps = GetProps<typeof Link>;

export const LinkButton: React.FC<
React.PropsWithChildren<
Omit<ButtonProps, 'href' | 'hrefAttrs'> & { href: Href }
>
> = ({ href, children, ...props }) => (
<RouterLink href={href} asChild>
<Button {...props}>{children}</Button>
</RouterLink>
);
7 changes: 0 additions & 7 deletions global.css

This file was deleted.

11 changes: 7 additions & 4 deletions metro.config.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');
const { withTamagui } = require('@tamagui/metro-plugin');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, {
input: './global.css',
inlineRem: false,
config.resolver.sourceExts.push('mjs')

module.exports = withTamagui(config, {
components: ['tamagui'],
config: './tamagui.config.ts',
outputCSS: './tamagui-web.css',
});
1 change: 0 additions & 1 deletion nativewind-env.d.ts

This file was deleted.

11 changes: 7 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.9",
"@tailwindcss/typography": "^0.5.15",
"@tamagui/config": "^1.116.9",
"@tamagui/metro-plugin": "^1.116.9",
"expo": "~51.0.28",
"expo-constants": "~16.0.2",
"expo-font": "~12.0.9",
Expand All @@ -29,20 +31,21 @@
"expo-status-bar": "~1.12.1",
"expo-system-ui": "~3.0.7",
"expo-web-browser": "~13.0.3",
"nativewind": "^4.1.21",
"react": "18.2.0",
"react-dom": "18.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-native": "0.74.5",
"react-native-gesture-handler": "~2.16.1",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"react-native-web": "~0.19.10",
"tailwindcss": "^3.4.14"
"tailwindcss": "^3.4.14",
"tamagui": "^1.116.9"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@react-native/eslint-config": "^0.75.4",
"@tamagui/babel-plugin": "^1.116.9",
"@types/jest": "^29.5.12",
"@types/react": "~18.2.45",
"@types/react-test-renderer": "^18.0.7",
Expand Down
13 changes: 0 additions & 13 deletions tailwind.config.js

This file was deleted.

Loading

0 comments on commit ba4ebd5

Please sign in to comment.