Skip to content

Commit 64f23e8

Browse files
minkyumdevminkyumdev
committed
Initial commit: React Native Switch library
1 parent 4b2286a commit 64f23e8

21 files changed

Lines changed: 1506 additions & 170 deletions

‎.npmignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# React Native
2+
android/
3+
ios/
4+
__tests__/
5+
*.log
6+
*.lock
7+
8+
# Development
9+
App.tsx
10+
index.js
11+
node_modules/
12+
.vscode/
13+
.idea/
14+
15+
# Build artifacts (we want to include dist/)
16+
# dist/ is included in package.json files
17+
18+
# Misc
19+
.DS_Store
20+
*.pem
21+

‎App.tsx‎

Lines changed: 84 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,100 @@
1-
/**
2-
* Sample React Native App
3-
* https://github.com/facebook/react-native
4-
*
5-
* @format
6-
*/
7-
8-
import { NewAppScreen } from '@react-native/new-app-screen';
9-
import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
10-
import {
11-
SafeAreaProvider,
12-
useSafeAreaInsets,
13-
} from 'react-native-safe-area-context';
1+
import React, { useState } from 'react';
2+
import { StyleSheet, Text, View } from 'react-native';
3+
import { SafeAreaProvider } from 'react-native-safe-area-context';
4+
import Switch from './dist';
145

156
function App() {
16-
const isDarkMode = useColorScheme() === 'dark';
7+
const [switch1, setSwitch1] = useState(false);
8+
const [switch2, setSwitch2] = useState(true);
9+
const [switch3, setSwitch3] = useState(false);
10+
const [switch4, setSwitch4] = useState(false);
1711

1812
return (
1913
<SafeAreaProvider>
20-
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
21-
<AppContent />
22-
</SafeAreaProvider>
23-
);
24-
}
14+
<View style={styles.container}>
15+
<Text style={styles.title}>React Native Switch</Text>
2516

26-
function AppContent() {
27-
const safeAreaInsets = useSafeAreaInsets();
17+
<View style={styles.example}>
18+
<Text style={styles.label}>
19+
Basic Switch: {switch1 ? 'ON' : 'OFF'}
20+
</Text>
21+
<Switch value={switch1} onValueChange={setSwitch1} />
22+
</View>
2823

29-
return (
30-
<View style={styles.container}>
31-
<NewAppScreen
32-
templateFileName="App.tsx"
33-
safeAreaInsets={safeAreaInsets}
34-
/>
35-
</View>
24+
<View style={styles.example}>
25+
<Text style={styles.label}>
26+
Custom Colors: {switch2 ? 'ON' : 'OFF'}
27+
</Text>
28+
<Switch
29+
value={switch2}
30+
onValueChange={setSwitch2}
31+
activeColor="#FF3B30"
32+
inactiveColor="#C7C7CC"
33+
/>
34+
</View>
35+
36+
<View style={styles.example}>
37+
<Text style={styles.label}>Large Size: {switch3 ? 'ON' : 'OFF'}</Text>
38+
<Switch
39+
value={switch3}
40+
onValueChange={setSwitch3}
41+
size="large"
42+
activeColor="#007AFF"
43+
/>
44+
</View>
45+
46+
<View style={styles.example}>
47+
<Text style={styles.label}>
48+
Custom Width: {switch4 ? 'ON' : 'OFF'}
49+
</Text>
50+
<Switch
51+
value={switch4}
52+
onValueChange={setSwitch4}
53+
width={100}
54+
height={50}
55+
/>
56+
</View>
57+
</View>
58+
</SafeAreaProvider>
3659
);
3760
}
3861

3962
const styles = StyleSheet.create({
4063
container: {
4164
flex: 1,
65+
justifyContent: 'center',
66+
alignItems: 'center',
67+
backgroundColor: '#F5F5F5',
68+
padding: 20,
69+
},
70+
title: {
71+
fontSize: 24,
72+
fontWeight: 'bold',
73+
marginBottom: 40,
74+
color: '#000',
75+
},
76+
example: {
77+
flexDirection: 'row',
78+
alignItems: 'center',
79+
justifyContent: 'space-between',
80+
width: '100%',
81+
marginBottom: 30,
82+
padding: 20,
83+
backgroundColor: '#FFFFFF',
84+
borderRadius: 10,
85+
shadowColor: '#000',
86+
shadowOffset: {
87+
width: 0,
88+
height: 2,
89+
},
90+
shadowOpacity: 0.1,
91+
shadowRadius: 3.84,
92+
elevation: 5,
93+
},
94+
label: {
95+
fontSize: 16,
96+
color: '#000',
97+
marginRight: 20,
4298
},
4399
});
44100

‎DEPLOYMENT.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# NPM 배포 가이드
2+
3+
## 배포 전 체크리스트
4+
5+
### 1. NPM 패키지 이름 확인
6+
현재 패키지 이름: `react-native-switch`
7+
8+
NPM에서 중복 확인:
9+
```bash
10+
npm info react-native-switch
11+
```
12+
13+
만약 이미 존재한다면 `package.json`의 `name` 필드를 변경해야 합니다.
14+
15+
### 2. GitHub 저장소 설정
16+
`package.json`의 `repository` 필드를 업데이트하세요:
17+
```json
18+
"repository": {
19+
"type": "git",
20+
"url": "https://github.com/your-username/react-native-switch.git"
21+
}
22+
```
23+
24+
### 3. Author 정보 추가
25+
`package.json`의 `author` 필드를 업데이트하세요:
26+
```json
27+
"author": "Your Name <your.email@example.com>"
28+
```
29+
30+
### 4. 빌드 확인
31+
```bash
32+
npm run build
33+
```
34+
35+
빌드가 성공하면 `dist/` 폴더에 다음 파일들이 생성됩니다:
36+
- `index.js`
37+
- `index.d.ts`
38+
- `index.js.map`
39+
- `index.d.ts.map`
40+
41+
### 5. 테스트
42+
앱에서 라이브러리를 테스트:
43+
```bash
44+
npm run ios
45+
# 또는
46+
npm run android
47+
```
48+
49+
## 배포 단계
50+
51+
### 1. NPM 로그인
52+
```bash
53+
npm login
54+
```
55+
56+
### 2. 패키지 이름 중복 확인
57+
```bash
58+
npm search react-native-switch
59+
```
60+
61+
### 3. 배포
62+
```bash
63+
npm publish
64+
```
65+
66+
**참고**: `prepublishOnly` 스크립트가 자동으로 빌드를 실행합니다.
67+
68+
### 4. 공개 범위 설정 (필요시)
69+
만약 스코프 패키지로 배포하려면:
70+
```bash
71+
npm publish --access public
72+
```
73+
74+
## 버전 업데이트
75+
76+
### 패치 버전 (0.1.0 → 0.1.1)
77+
```bash
78+
npm version patch
79+
npm publish
80+
```
81+
82+
### 마이너 버전 (0.1.0 → 0.2.0)
83+
```bash
84+
npm version minor
85+
npm publish
86+
```
87+
88+
### 메이저 버전 (0.1.0 → 1.0.0)
89+
```bash
90+
npm version major
91+
npm publish
92+
```
93+
94+
## 배포 후 확인
95+
96+
1. NPM 페이지 확인: https://www.npmjs.com/package/react-native-switch
97+
2. 설치 테스트:
98+
```bash
99+
npm install react-native-switch
100+
```
101+
102+
## 문제 해결
103+
104+
### 패키지 이름이 이미 존재하는 경우
105+
`package.json`의 `name` 필드를 고유한 이름으로 변경하세요.
106+
107+
### 권한 오류
108+
NPM 계정에 올바른 권한이 있는지 확인하세요.
109+
110+
### 배포 후 수정이 필요한 경우
111+
버전을 업데이트하고 다시 배포하세요.
112+

‎LICENSE‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
MIT License
2+
3+
Copyright (c) 2024 minkyumdev
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.
22+

0 commit comments

Comments
 (0)