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 | 9x 3x | /**
* @fileoverview Button component
* @module Button
* @description Button component, it is a button that can be used in any screen.
* @requires react react-native
* @link https://reactnative.dev/docs/pressable
*/
import React from 'react'
import { Pressable, StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
import { colors } from '../global/colors'
interface Props {
onPress: () => void
text: string
style?: StyleProp<ViewStyle>
textStyle?: StyleProp<TextStyle>
containerStyle?: StyleProp<ViewStyle>
}
/**
* Button that is used everywhere
* @param {Props} props - Component props
* @param {Function} props.onPress - Function that is called when the button is pressed
* @param {string} props.text - Text that is displayed in the button
* @param {StyleProp<ViewStyle>} props.style - Style of the button
* @returns
*/
export default function Button({ onPress, text, style, textStyle, containerStyle }: Props) {
return (
<View style={[{ width: '100%' }, containerStyle]}>
<Pressable
style={[styles.button, style]}
onPress={onPress}
>
<Text style={[styles.text, textStyle]}>{text}</Text>
</Pressable>
</View>
)
}
const styles = StyleSheet.create({
text: {
color: 'black',
fontFamily: 'Poppins-SemiBold',
fontWeight: '700',
fontSize: 20,
},
button: {
height: 48,
backgroundColor: colors.accent,
borderRadius: 8,
justifyContent: 'center',
alignItems: 'center',
},
})
|