Skip to content

Commit b0ab1b2

Browse files
committed
feat: react-native nativewind적용
1 parent 9d2e5e8 commit b0ab1b2

File tree

8 files changed

+24
-9794
lines changed

8 files changed

+24
-9794
lines changed

packages/react-native/App.tsx

Lines changed: 11 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -5,114 +5,22 @@
55
* @format
66
*/
77

8-
import React from 'react';
9-
import type {PropsWithChildren} from 'react';
10-
import {
11-
SafeAreaView,
12-
ScrollView,
13-
StatusBar,
14-
StyleSheet,
15-
Text,
16-
useColorScheme,
17-
View,
18-
} from 'react-native';
8+
import React, {useState} from 'react';
9+
import {Text, TouchableOpacity, View} from 'react-native';
1910

20-
import {
21-
Colors,
22-
DebugInstructions,
23-
Header,
24-
LearnMoreLinks,
25-
ReloadInstructions,
26-
} from 'react-native/Libraries/NewAppScreen';
27-
28-
type SectionProps = PropsWithChildren<{
29-
title: string;
30-
}>;
31-
32-
function Section({children, title}: SectionProps): React.JSX.Element {
33-
const isDarkMode = useColorScheme() === 'dark';
11+
function App(): React.JSX.Element {
12+
const [state, setState] = useState(1);
3413
return (
35-
<View style={styles.sectionContainer}>
36-
<Text
37-
style={[
38-
styles.sectionTitle,
39-
{
40-
color: isDarkMode ? Colors.white : Colors.black,
41-
},
42-
]}>
43-
{title}
44-
</Text>
45-
<Text
46-
style={[
47-
styles.sectionDescription,
48-
{
49-
color: isDarkMode ? Colors.light : Colors.dark,
50-
},
51-
]}>
52-
{children}
14+
<View className="flex-1 items-center justify-center bg-blue-300">
15+
<Text className="text-red-300">
16+
Open up App.js to start working on your app!
17+
{state}
5318
</Text>
19+
<TouchableOpacity onPress={() => setState(prev => prev + 1)}>
20+
<Text> Click Me!</Text>
21+
</TouchableOpacity>
5422
</View>
5523
);
5624
}
5725

58-
function App(): React.JSX.Element {
59-
const isDarkMode = useColorScheme() === 'dark';
60-
61-
const backgroundStyle = {
62-
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
63-
};
64-
65-
return (
66-
<SafeAreaView style={backgroundStyle}>
67-
<StatusBar
68-
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
69-
backgroundColor={backgroundStyle.backgroundColor}
70-
/>
71-
<ScrollView
72-
contentInsetAdjustmentBehavior="automatic"
73-
style={backgroundStyle}>
74-
<Header />
75-
<View
76-
style={{
77-
backgroundColor: isDarkMode ? Colors.black : Colors.white,
78-
}}>
79-
<Section title="Step One">
80-
Edit <Text style={styles.highlight}>App.tsx</Text> to change this
81-
screen and then come back to see your edits.
82-
</Section>
83-
<Section title="See Your Changes">
84-
<ReloadInstructions />
85-
</Section>
86-
<Section title="Debug">
87-
<DebugInstructions />
88-
</Section>
89-
<Section title="Learn More">
90-
Read the docs to discover what to do next:
91-
</Section>
92-
<LearnMoreLinks />
93-
</View>
94-
</ScrollView>
95-
</SafeAreaView>
96-
);
97-
}
98-
99-
const styles = StyleSheet.create({
100-
sectionContainer: {
101-
marginTop: 32,
102-
paddingHorizontal: 24,
103-
},
104-
sectionTitle: {
105-
fontSize: 24,
106-
fontWeight: '600',
107-
},
108-
sectionDescription: {
109-
marginTop: 8,
110-
fontSize: 18,
111-
fontWeight: '400',
112-
},
113-
highlight: {
114-
fontWeight: '700',
115-
},
116-
});
117-
11826
export default App;

packages/react-native/ios/Podfile.lock

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1395,8 +1395,8 @@ SPEC CHECKSUMS:
13951395
React-utils: 4476b7fcbbd95cfd002f3e778616155241d86e31
13961396
ReactCommon: ecad995f26e0d1e24061f60f4e5d74782f003f12
13971397
SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
1398-
Yoga: 2f71ecf38d934aecb366e686278102a51679c308
1398+
Yoga: ae3c32c514802d30f687a04a6a35b348506d411f
13991399

14001400
PODFILE CHECKSUM: 720f0b2c8c70a1e08217631686bcf2531b32ecb8
14011401

1402-
COCOAPODS: 1.14.3
1402+
COCOAPODS: 1.15.2

packages/react-native/metro.config.js

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1+
const path = require('path');
12
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
2-
3-
/**
4-
* Metro configuration
5-
* https://reactnative.dev/docs/metro
6-
*
7-
* @type {import('metro-config').MetroConfig}
8-
*/
9-
const config = {};
10-
3+
const config = {
4+
watchFolders: [path.resolve(__dirname, '../../')],
5+
};
116
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="nativewind/types" />

packages/react-native/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"test": "jest"
1111
},
1212
"dependencies": {
13+
"nativewind": "^2.0.11",
1314
"react": "18.2.0",
1415
"react-native": "0.74.2",
1516
"tailwind-config": "workspace:*"
@@ -29,6 +30,7 @@
2930
"jest": "^29.6.3",
3031
"prettier": "2.8.8",
3132
"react-test-renderer": "18.2.0",
33+
"tailwindcss": "3.2.2",
3234
"typescript": "5.0.4"
3335
},
3436
"engines": {

0 commit comments

Comments
 (0)