React-Nav-Melon/components/organisms/Buttons/CircularPrimaryBackButton.js

import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
import colors from '../../../theme/colors';
import EntypoIcon from 'react-native-vector-icons/Entypo'
import fonts from '../../../theme/fonts';

const CircularPrimaryBackButton = ({onPress}) => {
  return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={styles.buttonContainer}>
        <EntypoIcon
          color={colors.tertiaryColor}
          size={20}
          name="chevron-thin-left"
        />
      </View>
    </TouchableWithoutFeedback>
  );
};

export default CircularPrimaryBackButton;

const styles = StyleSheet.create({
  buttonContainer: {
    borderRadius: 128,
    
    height: fonts.getSize(34),
    width: fonts.getSize(34),
    backgroundColor: colors.white,
    borderColor: colors.lightGray,
    borderWidth: 2,
    paddingVertical: fonts.getSize(6),
    paddingHorizontal: fonts.getSize(6)
  },
});