Skip to content

Commit f9c3710

Browse files
olafcholafch
committed
homescreen adapted both on mobile and web
1 parent 363c2ab commit f9c3710

15 files changed

Lines changed: 102 additions & 59 deletions

‎src/constants/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ export * from './images'
66
export * from './navigation'
77
export * from './regex'
88
export * from './time'
9+
export * from './links'

‎src/constants/links.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
export const APP_STORE_URL = `https://apps.apple.com/app/id`
22
export const PLAY_STORE_URL = `https://play.google.com/store/apps/details?id=`
3+
export const BACA_APP_URL = `https://binarapps.online/sign-in`
4+
export const BACA_DOCS_URL = `https://baca-docs.vercel.app/docs/overview`

‎src/hooks/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,4 @@ export * from './useKeyboardHeight'
6363
export * from './useSafeAreaInsetsStyle'
6464
export * from './useSecurePassword'
6565
export * from './useToggle'
66+
export * from './useViewportDimensions'

‎src/hooks/useViewportDimensions.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { dimensionScales } from '@baca/screens/drafts/dimensionScales'
2+
import { useWindowDimensions } from 'react-native'
3+
4+
export const useViewportDimensions = () => {
5+
const { width, height } = useWindowDimensions()
6+
let scale = dimensionScales.find((d) => d.width === width && d.height === height)?.scale || 1
7+
if (width < 400 && height >= 400 && height < 700) scale = 0.5
8+
return { viewportWidth: width * scale, viewportHeight: height * scale }
9+
}

‎src/i18n/translations/en.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,11 @@
199199
"reset_password": "Reset password"
200200
},
201201
"home_screen": {
202-
"details": "Details"
202+
"details": "Details",
203+
"header_title": "BACA - react native starter",
204+
"header_subtitle": "Start your react native project and boost your productivity",
205+
"read_docs": "Read docs",
206+
"try_it": "Try it"
203207
},
204208
"landing_screen": {
205209
"go_to_blog": "Open blog",
@@ -305,7 +309,5 @@
305309
},
306310
"hello": "Welcome",
307311
"thanks": "Thank you for using the best template for expo apps",
308-
"app_information": "Shake your device to open developer menu",
309-
"home_header_title": "BACA - react native starter",
310-
"home_header_subtitle": "Start your react native project and boost your productivity"
312+
"app_information": "Shake your device to open developer menu"
311313
}

‎src/i18n/translations/pl.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,11 @@
199199
"reset_password": "Zresetuj hasło"
200200
},
201201
"home_screen": {
202-
"details": "Detale"
202+
"details": "Detale",
203+
"header_subtitle": "Zacznij swój projekt w react native i zwiększ swoją produktywność",
204+
"header_title": "BACA - react native starter",
205+
"read_docs": "Przeczytaj docs",
206+
"try_it": "Wypróbuj"
203207
},
204208
"landing_screen": {
205209
"login_cta": "Zaloguj się",

‎src/screens/HomeScreen.tsx‎

Lines changed: 18 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import { Button, Center, Text } from '@baca/design-system'
1+
import { Box, Button, Center, Text } from '@baca/design-system'
22
import { useCallback, useScreenOptions, useTranslation } from '@baca/hooks'
3-
import { View, Linking, StyleSheet } from 'react-native'
4-
5-
//TODO: Delete JSON we're not using
6-
//TODO: Add t internationalization for buttons
3+
import { Linking } from 'react-native'
74

85
export const HomeScreen = () => {
96
const { t } = useTranslation()
@@ -18,39 +15,35 @@ export const HomeScreen = () => {
1815

1916
return (
2017
<Center flex={1} px={4}>
21-
<Text.XxlBold textAlign="center">{t('home_header_title')}</Text.XxlBold>
22-
<Text.LgRegular textAlign="center">{t('home_header_subtitle')}</Text.LgRegular>
18+
<Text.XxlBold textAlign="center">{t('home_screen.header_title')}</Text.XxlBold>
19+
<Text.LgRegular textAlign="center">{t('home_screen.header_subtitle')}</Text.LgRegular>
2320

24-
<View style={styles.buttonsContainer}>
21+
<Box
22+
alignItems={'center'}
23+
flexDirection={'row'}
24+
flexWrap={'wrap'}
25+
justifyContent={'center'}
26+
mt={4}
27+
>
2528
<Button
26-
m={3}
2729
h={12}
28-
minWidth={160}
30+
m={3}
2931
maxWidth={160}
32+
minWidth={160}
3033
onPress={() => openLink('https://baca-docs.vercel.app/docs/overview')}
3134
>
32-
<Text.MdBold>Read docs</Text.MdBold>
35+
{t('home_screen.read_docs')}
3336
</Button>
3437
<Button.SecondaryColor
35-
m={3}
3638
h={12}
37-
minWidth={160}
39+
m={3}
3840
maxWidth={160}
41+
minWidth={160}
3942
onPress={() => openLink('https://binarapps.online/sign-in')}
4043
>
41-
<Text.MdBold>Try it</Text.MdBold>
44+
{t('home_screen.try_it')}
4245
</Button.SecondaryColor>
43-
</View>
46+
</Box>
4447
</Center>
4548
)
4649
}
47-
48-
const styles = StyleSheet.create({
49-
buttonsContainer: {
50-
alignItems: 'center',
51-
flexDirection: 'row',
52-
flexWrap: 'wrap',
53-
justifyContent: 'center',
54-
marginTop: 16,
55-
},
56-
})

‎src/screens/HomeScreen.web.tsx‎

Lines changed: 44 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,68 @@
1-
import { Button, Center, Text } from '@baca/design-system'
2-
import { useCallback, useScreenOptions, useTranslation } from '@baca/hooks'
3-
import { View, Linking, StyleSheet } from 'react-native'
1+
import { BACA_APP_URL, BACA_DOCS_URL } from '@baca/constants'
2+
import { Box, Button, Center, Text, ScrollView } from '@baca/design-system'
3+
import { useScreenOptions, useTranslation, useViewportDimensions } from '@baca/hooks'
4+
import { draftImages } from '@baca/screens'
5+
import { useCallback } from 'react'
6+
import { Linking, Image, ImageSourcePropType, StyleSheet } from 'react-native'
47

58
export const HomeScreen = () => {
69
const { t } = useTranslation()
10+
const { viewportWidth, viewportHeight } = useViewportDimensions()
711

8-
useScreenOptions({
9-
title: t('navigation.screen_titles.home'),
10-
})
12+
useScreenOptions({ title: t('navigation.screen_titles.home') })
1113

12-
const openLink = useCallback((url: string) => {
13-
Linking.openURL(url)
14-
}, [])
14+
const openLink = useCallback((url: string) => Linking.openURL(url), [])
15+
16+
const renderItem = (item: ImageSourcePropType, index: number) => (
17+
<Box key={index} height={viewportHeight * 0.6} width={viewportWidth * 0.6}>
18+
<Image source={item} resizeMode="contain" style={styles.imageSize} />
19+
</Box>
20+
)
1521

1622
return (
1723
<Center flex={1} px={4}>
18-
<Text.XxlBold textAlign="center">{t('home_header_title')}</Text.XxlBold>
19-
<Text.LgRegular textAlign="center">{t('home_header_subtitle')}</Text.LgRegular>
24+
<Text.XxlBold textAlign="center">{t('home_screen.header_title')}</Text.XxlBold>
25+
<Text.LgRegular textAlign="center">{t('home_screen.header_subtitle')}</Text.LgRegular>
2026

21-
<View style={styles.buttonsContainer}>
22-
<Button
23-
m={3}
24-
h={12}
25-
minWidth={160}
26-
maxWidth={160}
27-
onPress={() => openLink('https://baca-docs.vercel.app/docs/overview')}
28-
>
29-
<Text.MdBold>Read docs</Text.MdBold>
27+
<Box
28+
alignItems={'center'}
29+
flexDirection={'row'}
30+
flexWrap={'wrap'}
31+
justifyContent={'center'}
32+
mt={4}
33+
>
34+
<Button m={3} h={12} minWidth={160} maxWidth={160} onPress={() => openLink(BACA_DOCS_URL)}>
35+
{t('home_screen.read_docs')}
3036
</Button>
3137
<Button.SecondaryColor
3238
m={3}
3339
h={12}
3440
minWidth={160}
3541
maxWidth={160}
36-
onPress={() => openLink('https://binarapps.online/sign-in')}
42+
onPress={() => openLink(BACA_APP_URL)}
3743
>
38-
<Text.MdBold>Try it</Text.MdBold>
44+
{t('home_screen.try_it')}
3945
</Button.SecondaryColor>
40-
</View>
46+
</Box>
47+
48+
<ScrollView
49+
height={viewportHeight * 0.6}
50+
horizontal
51+
mt={8}
52+
pagingEnabled
53+
scrollEventThrottle={16}
54+
showsHorizontalScrollIndicator={false}
55+
width={viewportWidth * 0.6}
56+
>
57+
{draftImages.map(renderItem)}
58+
</ScrollView>
4159
</Center>
4260
)
4361
}
4462

4563
const styles = StyleSheet.create({
46-
buttonsContainer: {
47-
alignItems: 'center',
48-
flexDirection: 'row',
49-
flexWrap: 'wrap',
50-
justifyContent: 'center',
51-
marginTop: 16,
64+
imageSize: {
65+
height: '100%',
66+
width: '100%',
5267
},
5368
})

‎src/screens/drafts/dimensionScales.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const dimensionScales = [
2+
{ width: 390, height: 844, scale: 0.8 },
3+
{ width: 360, height: 740, scale: 0.7 },
4+
{ width: 540, height: 720, scale: 0.8 },
5+
{ width: 344, height: 882, scale: 0.9 },
6+
{ width: 1024, height: 600, scale: 0.7 },
7+
]

‎src/screens/drafts/images.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { ImageSourcePropType } from 'react-native'
2+
3+
export const draftImages: ImageSourcePropType[] = [
4+
require('./iphone_signup_draft_light.png'),
5+
require('./iphone_signup_draft_dark.png'),
6+
require('./iphone_settings_draft_light.png'),
7+
require('./iphone_settings_draft_dark.png'),
8+
]

0 commit comments

Comments
 (0)