Skip to content

Commit 1b8b983

Browse files
katsuhira02Danil
katsuhira02
and
Danil
authored
size fix and mini fix's some component (#102)
* size fix * + some changes Co-authored-by: Danil <[email protected]>
1 parent a98b765 commit 1b8b983

51 files changed

Lines changed: 936 additions & 1223 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎ios/eCommerce.xcodeproj/project.pbxproj‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -555,6 +555,7 @@
555555
PRODUCT_NAME = eCommerce;
556556
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
557557
SWIFT_VERSION = 5.0;
558+
TARGETED_DEVICE_FAMILY = "1,2";
558559
VERSIONING_SYSTEM = "apple-generic";
559560
};
560561
name = Debug;
@@ -579,6 +580,7 @@
579580
PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
580581
PRODUCT_NAME = eCommerce;
581582
SWIFT_VERSION = 5.0;
583+
TARGETED_DEVICE_FAMILY = "1,2";
582584
VERSIONING_SYSTEM = "apple-generic";
583585
};
584586
name = Release;

‎ios/eCommerce/Images.xcassets/AppIcon.appiconset/Contents.json‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,52 @@
22
"images" : [
33
{
44
"idiom" : "iphone",
5-
"size" : "29x29",
6-
"scale" : "2x"
5+
"scale" : "2x",
6+
"size" : "20x20"
77
},
88
{
99
"idiom" : "iphone",
10-
"size" : "29x29",
11-
"scale" : "3x"
10+
"scale" : "3x",
11+
"size" : "20x20"
1212
},
1313
{
1414
"idiom" : "iphone",
15-
"size" : "40x40",
16-
"scale" : "2x"
15+
"scale" : "2x",
16+
"size" : "29x29"
1717
},
1818
{
1919
"idiom" : "iphone",
20-
"size" : "40x40",
21-
"scale" : "3x"
20+
"scale" : "3x",
21+
"size" : "29x29"
2222
},
2323
{
2424
"idiom" : "iphone",
25-
"size" : "60x60",
26-
"scale" : "2x"
25+
"scale" : "2x",
26+
"size" : "40x40"
2727
},
2828
{
2929
"idiom" : "iphone",
30-
"size" : "60x60",
31-
"scale" : "3x"
30+
"scale" : "3x",
31+
"size" : "40x40"
32+
},
33+
{
34+
"idiom" : "iphone",
35+
"scale" : "2x",
36+
"size" : "60x60"
37+
},
38+
{
39+
"idiom" : "iphone",
40+
"scale" : "3x",
41+
"size" : "60x60"
42+
},
43+
{
44+
"idiom" : "ios-marketing",
45+
"scale" : "1x",
46+
"size" : "1024x1024"
3247
}
3348
],
3449
"info" : {
35-
"version" : 1,
36-
"author" : "xcode"
50+
"author" : "xcode",
51+
"version" : 1
3752
}
38-
}
53+
}

‎ios/eCommerce/Info.plist‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -36,21 +36,7 @@
3636
</dict>
3737
</dict>
3838
<key>NSLocationWhenInUseUsageDescription</key>
39-
<string/>
40-
<key>UILaunchStoryboardName</key>
41-
<string>LaunchScreen</string>
42-
<key>UIRequiredDeviceCapabilities</key>
43-
<array>
44-
<string>armv7</string>
45-
</array>
46-
<key>UISupportedInterfaceOrientations</key>
47-
<array>
48-
<string>UIInterfaceOrientationPortrait</string>
49-
<string>UIInterfaceOrientationLandscapeLeft</string>
50-
<string>UIInterfaceOrientationLandscapeRight</string>
51-
</array>
52-
<key>UIViewControllerBasedStatusBarAppearance</key>
53-
<false/>
39+
<string></string>
5440
<key>UIAppFonts</key>
5541
<array>
5642
<string>Metropolis-Bold.otf</string>
@@ -74,5 +60,20 @@
7460
<string>Zocial.ttf</string>
7561
<string>Fontisto.ttf</string>
7662
</array>
63+
<key>UILaunchStoryboardName</key>
64+
<string>LaunchScreen</string>
65+
<key>UIRequiredDeviceCapabilities</key>
66+
<array>
67+
<string>armv7</string>
68+
</array>
69+
<key>UISupportedInterfaceOrientations</key>
70+
<array>
71+
<string>UIInterfaceOrientationPortrait</string>
72+
<string>UIInterfaceOrientationLandscapeLeft</string>
73+
<string>UIInterfaceOrientationLandscapeRight</string>
74+
<string>UIInterfaceOrientationPortraitUpsideDown</string>
75+
</array>
76+
<key>UIViewControllerBasedStatusBarAppearance</key>
77+
<false/>
7778
</dict>
7879
</plist>

‎src/UI.tsx‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React, { useState } from 'react'
1+
import React, { useState, useRef } from 'react'
22
import { StyleSheet, View, ScrollView } from 'react-native'
3-
import { BLACK, WHITE } from './constants'
3+
import { Modalize } from 'react-native-modalize'
4+
import { BLACK, WHITE, PRIMARY, DARK } from './constants'
45
import {
56
Space,
67
Text,
@@ -27,10 +28,11 @@ import {
2728
Search,
2829
Selector,
2930
Switch,
30-
TabBar,
3131
Tag,
32-
ExampleForm
32+
Fumi,
33+
Header
3334
} from './components'
35+
import Ionicons from 'react-native-vector-icons/Ionicons'
3436

3537
const styles = StyleSheet.create({
3638
container: {
@@ -42,6 +44,12 @@ const styles = StyleSheet.create({
4244
},
4345
textStyle: {
4446
color: WHITE
47+
},
48+
labelStyle: {
49+
color: PRIMARY
50+
},
51+
fumiStyle: {
52+
flex: 1
4553
}
4654
})
4755

@@ -51,7 +59,7 @@ interface HomeT {
5159
}
5260

5361
function Home({ navigation, route }: HomeT) {
54-
const { container, textStyle, layoutContainer } = styles
62+
const { container, textStyle, layoutContainer, labelStyle } = styles
5563
const [isEnabled, setIsEnabled] = useState(false)
5664
const [redCheckBoxValue, setRedCheckBoxValue] = useState(false)
5765
const [whiteCheckBoxValue, setWhiteCheckBoxValue] = useState(false)
@@ -184,11 +192,7 @@ function Home({ navigation, route }: HomeT) {
184192
<Space height={10} />
185193
<Filter onPressFilter={() => {}} onPressApps={() => {}} onPressPrice={() => {}} />
186194
<Space height={25} />
187-
<Text title="FilterBottom" h1 textStyle={textStyle} />
188-
<Space height={10} />
189-
<FilterBottom />
190-
<Space height={25} />
191-
<Text title="FilterBottom" h1 textStyle={textStyle} />
195+
<Text title="Labels" h1 textStyle={textStyle} />
192196
<Space height={10} />
193197
<Labels isSaleOrNew={true} title={'-30%'} />
194198
<Space height={15} />
@@ -220,7 +224,7 @@ function Home({ navigation, route }: HomeT) {
220224
<Space height={25} />
221225
<Text title="Switch" h1 textStyle={textStyle} />
222226
<Space height={10} />
223-
<Switch />
227+
<Switch onValueChange={toggleSwitch} isValue={isEnabled} />
224228
<Space height={25} />
225229
<Text title="Tag" h1 textStyle={textStyle} />
226230
<Space height={10} />
@@ -232,10 +236,6 @@ function Home({ navigation, route }: HomeT) {
232236
<Space height={10} />
233237
<Tag title={'Tag'} isOutline={false} isSmall={true} isWhiteText={false} />
234238
<Space height={25} />
235-
<Text title="TextInputs" h1 textStyle={textStyle} />
236-
<Space height={10} />
237-
<ExampleForm />
238-
<Space height={25} />
239239
<Text title="SuccessScreen" h1 textStyle={textStyle} />
240240
<Space height={10} />
241241
<Button onPress={openSuccess} title={'Open SuccessScreen!'} />
@@ -252,6 +252,28 @@ function Home({ navigation, route }: HomeT) {
252252
<Space height={10} />
253253
<Button title={'Open MyProfile!'} onPress={openMyProfile} />
254254
<Space height={25} />
255+
<Text title="Fumi" h1 textStyle={textStyle} />
256+
<Space height={10} />
257+
</View>
258+
<Fumi label="Email" iconName={'mail'} iconClass={Ionicons} labelStyle={labelStyle} iconColor={PRIMARY} />
259+
<Space height={25} />
260+
<View style={layoutContainer}>
261+
<Text title="Header" h1 textStyle={textStyle} />
262+
<Space height={10} />
263+
<Text title="h0" h1 textStyle={textStyle} />
264+
<Space height={10} />
265+
<Header h0 />
266+
<Space height={10} />
267+
<Text title="h1" h1 textStyle={textStyle} />
268+
<Space height={10} />
269+
<Header h1 />
270+
<Space height={10} />
271+
<Text title="h2" h1 textStyle={textStyle} />
272+
<Space height={10} />
273+
<Header h2 />
274+
<Space height={25} />
275+
<Text title="" h1 textStyle={textStyle} />
276+
<Space height={10} />
255277
</View>
256278
</ScrollView>
257279
)

‎src/components/AdressCard/index.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React, { useState } from 'react'
22
import { Pressable, StyleSheet, View } from 'react-native'
3-
import { DARK, PRIMARY, WHITE } from '../../constants'
3+
import { DARK, PRIMARY, WHITE, winWidth } from '../../constants'
44
import { Text, CheckBox, Space } from '../index'
5+
import { s, vs } from 'react-native-size-matters'
56

67
const styles = StyleSheet.create({
78
container: {
8-
width: 343,
9-
height: 140,
9+
width: winWidth * 0.8,
10+
height: vs(110),
1011
borderRadius: 8,
1112
backgroundColor: DARK
1213
},
@@ -19,13 +20,13 @@ const styles = StyleSheet.create({
1920
viewContainer1: {
2021
flexDirection: 'row',
2122
justifyContent: 'space-between',
22-
marginTop: 15,
23-
marginLeft: 20,
24-
marginRight: 20
23+
marginTop: vs(13),
24+
marginLeft: s(18),
25+
marginRight: s(18)
2526
},
2627
viewContainer2: {
27-
marginLeft: 20,
28-
marginTop: 10
28+
marginLeft: s(18),
29+
marginTop: vs(8)
2930
},
3031
viewContainer3: {
3132
flexDirection: 'row',
@@ -58,7 +59,7 @@ function AdressCard({ name, adress, onPressEdit }: AdressCardT) {
5859
</View>
5960
<Space height={20} />
6061
<View style={viewContainer3}>
61-
<Space height={0} width={20} />
62+
<Space height={0} width={s(18)} />
6263
<CheckBox isPrimary={false} onToggle={toggleRedCheckBox} value={redCheckBoxValue} />
6364
<Text title={' Use as the shipping adress'} textStyle={textStyle} h4 />
6465
</View>

‎src/components/Button/index.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React from 'react'
22
import { StyleSheet, Pressable } from 'react-native'
3-
import { BLACK, PRIMARY, WHITE } from '../../constants'
3+
import { BLACK, PRIMARY, WHITE, winWidth } from '../../constants'
44
import { Text } from '../'
5+
import { vs } from 'react-native-size-matters'
6+
57
const styles = StyleSheet.create({
68
container: {
79
justifyContent: 'center',
8-
height: 48,
9-
width: 343,
10-
borderRadius: 25
10+
height: vs(30),
11+
width: winWidth * 0.8,
12+
borderRadius: vs(75)
1113
},
1214
textStyle: {
1315
alignItems: 'center',
@@ -23,8 +25,8 @@ const styles = StyleSheet.create({
2325
},
2426
smallContainer: {
2527
justifyContent: 'center',
26-
width: 160,
27-
height: 36,
28+
width: winWidth * 0.4,
29+
height: vs(25),
2830
borderRadius: 25
2931
},
3032
textColorOutline: {

‎src/components/ButtonIcon/index.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react'
22
import { StyleSheet, Pressable, Text } from 'react-native'
3+
import { vs } from 'react-native-size-matters'
34
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
4-
import { PRIMARY, WHITE, DARK } from '../../constants'
5+
import { PRIMARY, WHITE, DARK, BLACK } from '../../constants'
56

67
const styles = StyleSheet.create({
78
container: {
8-
height: 36,
9-
width: 36,
9+
height: vs(32),
10+
width: vs(32),
1011
borderRadius: 100
1112
},
1213
iconStyle: {
@@ -23,7 +24,7 @@ const styles = StyleSheet.create({
2324
color: PRIMARY
2425
},
2526
colorIconWhite: {
26-
color: WHITE
27+
color: BLACK
2728
}
2829
})
2930

@@ -46,7 +47,7 @@ function ButtonIcon({ isPrimary, isWhiteIcon }: ButtonIconT) {
4647
iconStyle
4748
]}
4849
>
49-
<MaterialCommunityIcons style={colorIcon} name="shopping" size={20} color={WHITE} />
50+
<MaterialCommunityIcons style={colorIcon} name="shopping" size={vs(16)} color={WHITE} />
5051
</Pressable>
5152
)
5253
}

‎src/components/ButtonPhoto/index.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from 'react'
22
import { StyleSheet, Pressable } from 'react-native'
33
import Ionicons from 'react-native-vector-icons/Ionicons'
4-
import { PRIMARY, WHITE } from '../../constants'
4+
import { BLACK, PRIMARY, WHITE } from '../../constants'
5+
import { vs } from 'react-native-size-matters'
56

67
const styles = StyleSheet.create({
78
container: {
8-
height: 52,
9-
width: 52,
9+
height: vs(48),
10+
width: vs(48),
1011
backgroundColor: PRIMARY,
1112
borderRadius: 100
1213
},
@@ -29,7 +30,7 @@ function ButtonPhoto() {
2930
iconStyle
3031
]}
3132
>
32-
<Ionicons name="camera" size={30} color={WHITE} />
33+
<Ionicons name="camera" size={vs(30)} color={BLACK} />
3334
</Pressable>
3435
)
3536
}

0 commit comments

Comments
 (0)