32 changed files with 669 additions and 731 deletions
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
@ -1,10 +0,0 @@
@@ -1,10 +0,0 @@
|
||||
import {Dimensions} from 'react-native'; |
||||
|
||||
const HEIGHT_SCREEN = Dimensions.get('screen').height; |
||||
|
||||
export const heightPicture = () => { |
||||
if (HEIGHT_SCREEN < 1000) { |
||||
return 240; |
||||
} |
||||
return 340; |
||||
}; |
||||
@ -1,4 +1,3 @@
@@ -1,4 +1,3 @@
|
||||
export * from './helper-height-view'; |
||||
export * from './dimensions.helper'; |
||||
export * from './style.helper'; |
||||
|
||||
|
||||
@ -1,35 +1,35 @@
@@ -1,35 +1,35 @@
|
||||
import React from 'react' |
||||
import { Image, StyleSheet, Text, View } from 'react-native' |
||||
import { $size } from '../../common' |
||||
import { $size, Txt, colors } from '../../common' |
||||
|
||||
export const PackagesPageSeparator = () => { |
||||
return ( |
||||
<View style={style.container}> |
||||
<View style={style.imageContainer}> |
||||
<Image source={require('../../../assets/image/line.png')} /> |
||||
</View> |
||||
<Text style={style.text}>OR</Text> |
||||
<View style={style.imageContainer}> |
||||
<Image source={require('../../../assets/image/line.png')} /> |
||||
</View> |
||||
<View style={styles.container}> |
||||
<View style={styles.dashedLine}></View> |
||||
<Txt style={styles.text}>OR</Txt> |
||||
<View style={styles.dashedLine}></View> |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
const style = StyleSheet.create({ |
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flexDirection: 'row', |
||||
alignItems: 'center', |
||||
justifyContent: 'space-between', |
||||
marginBottom: $size(20), |
||||
}, |
||||
imageContainer: { |
||||
width: $size(140), |
||||
overflow: 'hidden', |
||||
dashedLine: { |
||||
borderWidth: 1, |
||||
borderStyle: 'dashed', |
||||
borderColor: 'black', |
||||
flex: 1, |
||||
backgroundColor: colors.blue, |
||||
}, |
||||
text: { |
||||
textAlign: 'center', |
||||
color: '#9AC4F8', |
||||
color: colors.blue, |
||||
fontSize: $size(14), |
||||
fontWeight: '900', |
||||
marginHorizontal: 16, |
||||
}, |
||||
}) |
||||
|
||||
@ -0,0 +1,39 @@
@@ -0,0 +1,39 @@
|
||||
import React, { FC } from 'react' |
||||
import { StyleSheet, View } from 'react-native' |
||||
import { $size } from '../../common' |
||||
import { onBoardingConfig } from '../config' |
||||
|
||||
interface IProps { |
||||
activeDot: number |
||||
} |
||||
|
||||
export const DotsAtom: FC<IProps> = ({ activeDot }) => { |
||||
return ( |
||||
<View style={styles.container}> |
||||
{onBoardingConfig.map((el, index) => ( |
||||
<View |
||||
key={index} |
||||
style={[ |
||||
styles.point, |
||||
{ |
||||
backgroundColor: |
||||
index === activeDot ? '#A798FF' : '#2C205C', |
||||
}, |
||||
]}></View> |
||||
))} |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flexDirection: 'row', |
||||
marginBottom: $size(50), |
||||
}, |
||||
point: { |
||||
height: $size(8), |
||||
width: $size(8), |
||||
marginRight: 10, |
||||
borderRadius: 100, |
||||
}, |
||||
}) |
||||
@ -1 +1,2 @@
@@ -1 +1,2 @@
|
||||
export * from './premium-button.component' |
||||
export * from './on-boarding-button.component' |
||||
export * from './dots.atom' |
||||
|
||||
@ -0,0 +1,59 @@
@@ -0,0 +1,59 @@
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage' |
||||
import React, { FC } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { StyleSheet, TouchableOpacity, View } from 'react-native' |
||||
import { |
||||
$size, |
||||
ButtonPrimary, |
||||
RouteKey, |
||||
StorageKey, |
||||
Txt, |
||||
useNav, |
||||
} from '../../common' |
||||
|
||||
interface IProps { |
||||
isLastBlock: boolean |
||||
onPressSkip: () => void |
||||
} |
||||
|
||||
export const OnBoardingBottom: FC<IProps> = ({ isLastBlock, onPressSkip }) => { |
||||
const nav = useNav() |
||||
const { t } = useTranslation() |
||||
|
||||
const onBoardFinish = async () => { |
||||
await AsyncStorage.setItem(StorageKey.OnBoarding, 'true') |
||||
nav.navigate(RouteKey.Package) |
||||
} |
||||
|
||||
return ( |
||||
<View style={styles.btnContainer}> |
||||
{isLastBlock ? ( |
||||
<> |
||||
<ButtonPrimary onPress={onBoardFinish} width={190}> |
||||
{t('buttonsTranslation.priceButton')} |
||||
</ButtonPrimary> |
||||
<TouchableOpacity onPress={onBoardFinish}> |
||||
<Txt style={styles.text}> |
||||
{t('buttonsTranslation.later')} |
||||
</Txt> |
||||
</TouchableOpacity> |
||||
</> |
||||
) : ( |
||||
<ButtonPrimary onPress={onPressSkip} width={155}> |
||||
{t('buttonsTranslation.skip')} |
||||
</ButtonPrimary> |
||||
)} |
||||
</View> |
||||
) |
||||
} |
||||
const styles = StyleSheet.create({ |
||||
text: { |
||||
fontSize: $size(16), |
||||
lineHeight: $size(24), |
||||
marginTop: $size(8), |
||||
}, |
||||
btnContainer: { |
||||
alignItems: 'center', |
||||
marginBottom: $size(20), |
||||
}, |
||||
}) |
||||
@ -1,89 +0,0 @@
@@ -1,89 +0,0 @@
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage' |
||||
import React, { FC } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native' |
||||
import { |
||||
ButtonPrimary, |
||||
colors, |
||||
RouteKey, |
||||
StorageKey, |
||||
useNav, |
||||
} from '../../common' |
||||
|
||||
interface IProps { |
||||
currentIndex: number |
||||
data: Array<{ |
||||
title: string |
||||
description: string |
||||
image: any |
||||
}> |
||||
onPressItem: ( |
||||
data: Array<{ |
||||
title: string |
||||
description: string |
||||
image: any |
||||
}>, |
||||
) => void |
||||
} |
||||
|
||||
export const GroupBtn: FC<IProps> = ({ currentIndex, data, onPressItem }) => { |
||||
const nav = useNav() |
||||
const { t } = useTranslation() |
||||
|
||||
const onBoardFinish = async () => { |
||||
await AsyncStorage.setItem(StorageKey.OnBoarding, 'true') |
||||
nav.navigate(RouteKey.Package) |
||||
} |
||||
|
||||
if (data.length - 1 === currentIndex) { |
||||
return ( |
||||
<View style={styles.btnContainer}> |
||||
<ButtonPrimary |
||||
onPress={onBoardFinish} |
||||
children={ |
||||
<Text style={styles.text}> |
||||
{t('buttonsTranslation.priceButton')} |
||||
</Text> |
||||
} |
||||
width={190} |
||||
/> |
||||
<TouchableOpacity |
||||
style={styles.laterBtn} |
||||
onPress={onBoardFinish}> |
||||
<Text style={[styles.text, { fontWeight: '400' }]}> |
||||
{t('buttonsTranslation.later')} |
||||
</Text> |
||||
</TouchableOpacity> |
||||
</View> |
||||
) |
||||
} else { |
||||
return ( |
||||
<ButtonPrimary |
||||
onPress={() => onPressItem(data)} |
||||
children={ |
||||
<Text style={styles.text}> |
||||
{t('buttonsTranslation.skip')} |
||||
</Text> |
||||
} |
||||
width={155} |
||||
/> |
||||
) |
||||
} |
||||
} |
||||
const styles = StyleSheet.create({ |
||||
text: { |
||||
color: colors.textPrimary, |
||||
fontSize: 16, |
||||
fontWeight: '700', |
||||
}, |
||||
laterBtn: { |
||||
width: 190, |
||||
alignItems: 'center', |
||||
height: 40, |
||||
justifyContent: 'center', |
||||
}, |
||||
btnContainer: { |
||||
alignItems: 'center', |
||||
marginTop: 'auto', |
||||
}, |
||||
}) |
||||
@ -1,99 +0,0 @@
@@ -1,99 +0,0 @@
|
||||
import React, { FC } from 'react' |
||||
import { useTranslation } from 'react-i18next' |
||||
import { View, Text, StyleSheet } from 'react-native' |
||||
import { Language, colors, heightPicture } from '../../common' |
||||
import { GroupBtn } from '../atoms/premium-button.component' |
||||
import { OnBoardData } from '../config/on-boarding.config' |
||||
interface IProps { |
||||
currentIndex: number |
||||
onPressItem: (data: any) => void |
||||
} |
||||
export const ContentOnBoarding: FC<IProps> = ({ |
||||
currentIndex, |
||||
onPressItem, |
||||
}) => { |
||||
const { t, i18n } = useTranslation() |
||||
const Picture = OnBoardData[currentIndex].image |
||||
const changeFontSize = () => (i18n.language === Language.UA ? 30 : 32) |
||||
|
||||
return ( |
||||
<View style={styles.container}> |
||||
<View style={styles.image}> |
||||
<Picture width={'100%'} height={heightPicture()} /> |
||||
</View> |
||||
<View style={styles.textContainer}> |
||||
<Text style={[styles.title, { fontSize: changeFontSize() }]}> |
||||
{t(OnBoardData[currentIndex].title)} |
||||
</Text> |
||||
<Text style={styles.description}> |
||||
{t(OnBoardData[currentIndex].description)} |
||||
</Text> |
||||
</View> |
||||
<View style={styles.button}> |
||||
<View style={styles.dots}> |
||||
{OnBoardData.map((el, index) => ( |
||||
<View |
||||
key={`${el} + ${index}`} |
||||
style={[ |
||||
styles.point, |
||||
{ |
||||
backgroundColor: |
||||
index === currentIndex |
||||
? '#A798FF' |
||||
: '#2C205C', |
||||
}, |
||||
]}></View> |
||||
))} |
||||
</View> |
||||
<GroupBtn |
||||
data={OnBoardData} |
||||
onPressItem={onPressItem} |
||||
currentIndex={currentIndex} |
||||
/> |
||||
</View> |
||||
</View> |
||||
) |
||||
} |
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
alignItems: 'center', |
||||
}, |
||||
description: { |
||||
color: '#A798FF', |
||||
fontSize: 16, |
||||
textAlign: 'center', |
||||
lineHeight: 24, |
||||
width: '100%', |
||||
}, |
||||
title: { |
||||
color: colors.textPrimary, |
||||
marginBottom: 25, |
||||
fontWeight: '700', |
||||
textAlign: 'center', |
||||
width: '100%', |
||||
}, |
||||
point: { |
||||
height: 8, |
||||
width: 8, |
||||
marginRight: 10, |
||||
borderRadius: 100, |
||||
}, |
||||
image: { |
||||
width: '100%', |
||||
}, |
||||
button: { |
||||
alignItems: 'center', |
||||
marginBottom: 30, |
||||
marginTop: 'auto', |
||||
}, |
||||
dots: { |
||||
flexDirection: 'row', |
||||
marginBottom: 20, |
||||
}, |
||||
textContainer: { |
||||
flex: 0, |
||||
alignItems: 'center', |
||||
width: '100%', |
||||
}, |
||||
}) |
||||
@ -1,2 +1 @@
@@ -1,2 +1 @@
|
||||
export * from './content-on-boarding.component'; |
||||
export * from './language-item.component'; |
||||
export * from './language-item.component' |
||||
|
||||
Loading…
Reference in new issue