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

import {StyleSheet, Text, View} from 'react-native';
import Button from '../../atoms/Button';
import React from 'react';
import colors from '../../../theme/colors';
import fonts from '../../../theme/fonts';
import PrimaryButton from './PrimaryButton';

const PrimaryOutlineButton = props => {
  const {onPress, title, buttonStyle, titleStyle} = props;

  return (
    <PrimaryButton
      onPress={onPress}
      title={title}
      buttonStyle={[buttonStyle,styles.button]}
      titleStyle={[titleStyle,styles.buttonTextStyle]}
    />
  );
};

export default PrimaryOutlineButton;

const styles = StyleSheet.create({
  button: {
    backgroundColor: colors.white,
    maxWidth: '100%',
    width: '100%',
    alignItems: 'center',
    borderColor:colors.primaryColor,
    borderRadius: 6,
    borderWidth: 1
  },
  buttonTextStyle: {
    fontFamily: fonts.type.medium,
    color: colors.secondaryColor,
  },
});