managarten/apps-archived/nutriphi/apps/mobile/components/HeaderButton.tsx

import { forwardRef } from 'react';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import { Pressable, StyleSheet } from 'react-native';

export const HeaderButton = forwardRef<typeof Pressable, { onPress?: () => void }>(
	({ onPress }, ref) => {
		return (
			<Pressable onPress={onPress}>
				{({ pressed }) => (
					<FontAwesome
						name="info-circle"
						size={25}
						color="gray"
						style={[
							styles.headerRight,
							{
								opacity: pressed ? 0.5 : 1,
							},
						]}
					/>
				)}
			</Pressable>
		);
	}
);

HeaderButton.displayName = 'HeaderButton';

export const styles = StyleSheet.create({
	headerRight: {
		marginRight: 15,
	},
});