Button.styles.ts

import { StyleSheet } from 'react-native';
import { colors } from '../styles/colors';
import { font } from '../styles/font.styles';

export const styles = StyleSheet.create({
  background: {
    paddingTop: 8,
    paddingRight: 16,
    paddingBottom: 8,
    paddingLeft: 16,
    borderRadius: 6,
  },
  border: {
    borderRadius: 8,
    padding: 2,
    backgroundColor: colors.brand['05-midtone'],
  },
  borderActive: {
    backgroundColor: colors.blue['07-lighter'],
  },
  backgroundActive: {},
  text: {
    textAlign: 'center',
    color: colors.neutral['10-white'],
    fontSize: 18,
    lineHeight: 18,
    ...font.weight700,
  },
});

Button.tsx

import React from 'react';
import { Text, Pressable, TextStyle, View, ViewStyle } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { styles } from './Button.styles';

interface ButtonProps {
  title: string;
  onPress: () => void;
  textStyle?: TextStyle;
  backgroundStyle?: ViewStyle;
  style?: ViewStyle;
}

const gradient = {
  normal: ['#4875bd', '#6a95d9'],
  pressed: ['#273854', '#326ac2', '#326ac2', '#326ac2', '#273854'],
};

export function Button({
  title,
  backgroundStyle,
  textStyle,
  style,
  onPress,
}: ButtonProps) {
  return (
    <Pressable
      style={style}
      onPress={onPress}
      accessibilityLabel={title}
      accessibilityRole="button"
    >
      {({ pressed }) => (
        <View style={[styles.border, pressed && styles.borderActive]}>
          <LinearGradient
            style={[
              styles.background,
              backgroundStyle,
              pressed && styles.backgroundActive,
            ]}
            colors={pressed ? gradient.pressed : gradient.normal}
          >
            <Text style={[styles.text, textStyle]}>{title}</Text>
          </LinearGradient>
        </View>
      )}
    </Pressable>
  );
}