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 | 2x 1x | /**
* @fileoverview TopBar view of the SettingsScreen component
* @module TopBar
* @description TapBar, it displays the title of the screen and a back button.
* @requires react react-native
*/
import React from 'react'
import { View, Pressable, Text, StyleSheet } from 'react-native'
import FastImage from 'react-native-fast-image'
import images from '@global/images'
type Props = {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
navigation: any
title: string
}
/**
* @function TopBar
* @description Component that renders the TopBar view.
* @param navigation TopBar navigation object
* @param title TopBar title
* @returns {React.JSX.Element} TopBar component template
*/
export default function TopBar({ navigation, title }: Props): JSX.Element {
return (
<View style={styles.container}>
<Pressable
style={styles.pressablePosition}
onPress={() => navigation.goBack()}
>
<FastImage
source={images.icons.outline.backArrow()}
style={styles.backIcon}
/>
</Pressable>
<Text style={styles.title}>{title}</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
height: 'auto',
width: '100%',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
paddingVertical: 20,
},
pressablePosition: {
position: 'absolute',
left: 15,
},
backIcon: {
height: 25,
width: 20,
transform: [{ rotate: '180deg' }],
},
title: {
fontSize: 24,
fontFamily: 'Poppins',
fontWeight: '500',
textAlign: 'center',
},
})
|