Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 5x 2x | /**
* @fileoverview ButtonChangeScreen component
* @module ButtonChangeScreen
* @description Component used to display the text that allows the user to change screen
* @requires react react-native
* @requires StyleSheet from 'react-native'
* @requires Text from 'react-native'
* @requires Pressable from 'react-native'
* @requires View from 'react-native'
* @requires LineSeparator from './LineSeparator'
* @requires colors from '@global/colors'
* @exports ButtonChangeScreen
*/
import React from 'react'
import { Pressable, StyleSheet, Text, View } from 'react-native'
import { colors } from '@global/colors'
import LineSeparator from './LineSeparator'
interface ButtonChangeScreenProps {
infoText: string
clickableText: string
onPress: () => void
}
/**
* @function ButtonChangeScreen
* @description Component used to display the text that allows the user to change screen
* @param {ButtonChangeScreenProps} props - Component props
* @returns {React.JSX.Element} ButtonChangeScreen component
*/
export default function ButtonChangeScreen({
infoText,
clickableText,
onPress,
}: ButtonChangeScreenProps): React.JSX.Element {
return (
<View style={styles.container}>
<LineSeparator />
<View style={styles.textContainer}>
<Text style={styles.infoText}>{infoText}</Text>
<Pressable onPress={onPress}>
<Text style={styles.clickableText}>{clickableText}</Text>
</Pressable>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
bottom: 0,
width: '100%',
},
textContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: 20,
},
infoText: {
fontFamily: 'Poppins-Regular',
fontSize: 18,
fontWeight: '700',
color: colors.darkGrey,
},
clickableText: {
fontFamily: 'Poppins-Regular',
fontSize: 18,
fontWeight: '700',
color: colors.accent,
marginLeft: 4,
},
})
|