src/views/assessment/menu/components/MenuIcon.js
import React from 'react';
import {Image, StyleSheet, TouchableOpacity} from 'react-native';
import Animated, {ZoomIn} from 'react-native-reanimated';
import Avatar from '../../../../components/avatar/Avatar';
import {globalStyles} from '../../../../styles/styles';
import {MoodContext} from '../../../../utils/Contexts';
/**
* Makes an icon in the assessment menu.
* @param {number} delay - Delay before icon is displayed
* @param {function} onPress - Function to be run when icon is pressed
* @param {string} png - Path of the icon picture
* @returns {Object} The icon component
*/
export default function MenuIcon({delay, onPress, png}) {
//If no path, we should use avatar face
const useAvatar = png == undefined;
//Fetch mood state, to draw avatar with current mood
const {mood} = React.useContext(MoodContext);
return (
//The icons are animated and displayed after delay
<Animated.View style={{flex: 1}} entering={ZoomIn.delay(delay)}>
<TouchableOpacity
style={globalStyles.coverAll}
//When pressed => onPress function
onPress={() => onPress()}>
{useAvatar ? (
//If no path
<Avatar full={false} mood={mood} />
) : (
//If path
<Image
source={png}
style={[styles.icon, globalStyles.shadow]}
/>
)}
</TouchableOpacity>
</Animated.View>
);
}
/**
* Local styles
* @type {Object}
*/
const styles = StyleSheet.create({
icon: {
flex: 1,
resizeMode: 'contain',
width: '100%',
},
});