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

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

const ThemedTextButton = ({ theme, onPress, title, titleStyle, buttonStyle}) => {

    let style = {};
    switch (theme) {
        case 'primary-outline':
            style = {

                buttonStyle: {
                    backgroundColor: colors.white,
                    maxWidth: '100%',
                    width: '100%',
                    alignItems: 'center',
                    borderColor: colors.primaryColor,
                    borderRadius: 6,
                    borderWidth: 1
                },
                buttonTextStyle: {
                    fontFamily: fonts.type.medium,
                    color: colors.secondaryColor,
                }
            }
            break;
        case 'secondary-outline':
            style = {
                buttonStyle: {
                    backgroundColor: colors.white,
                    maxWidth: '100%',
                    width: '100%',
                    alignItems: 'center',
                    borderColor: colors.secondaryColor,
                    borderRadius: 6,
                    borderWidth: 1
                },
                buttonTextStyle: {
                    fontFamily: fonts.type.medium,
                    color: colors.primaryColor,
                }
            }
            break;
        case 'secondary-contained':
            style = {
                buttonStyle: {
                    backgroundColor: colors.secondaryColor,
                    maxWidth: '100%',
                    width: '100%',
                    alignItems: 'center'
                },
                buttonTextStyle: {
                    fontFamily: fonts.type.medium,
                    color: colors.white,
                }

            }
            break;
        case 'primary-contained':
        default:
            style = {
                buttonStyle: {
                    backgroundColor: colors.primaryColor,
                    maxWidth: '100%',
                    width: '100%',
                    alignItems: 'center'
                },
                buttonTextStyle: {
                    fontFamily: fonts.type.medium,
                    color: colors.white,
                }

            }
            break;
    }

    const styles = StyleSheet.create(style)

    return (
        <Button
            onPress={onPress}
            style={[styles.buttonStyle, buttonStyle]}
        >
            <Text style={[styles.buttonTextStyle, titleStyle]}>
                {title}
            </Text>
        </Button>
    )
}

export default ThemedTextButton