expo_template/components/theme/buttons/ThemedTextButton.tsx

56 lines
1.3 KiB
TypeScript

import React from 'react';
import { TextStyle, PressableProps } from 'react-native';
import { ThemedButton, ThemedText } from '@/components/theme';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
const DEFAULT_FONT_SIZE = 16;
// Extend ThemedButton props (which already extends PressableProps)
type ThemedTextButtonProps = Omit<PressableProps, 'children'> & {
width?: number;
height?: number;
text: string;
fontSize?: number;
textStyle?: TextStyle;
containerStyle?: object;
buttonStyle?: object;
};
const ThemedTextButton: React.FC<ThemedTextButtonProps> = ({
width,
height,
text,
fontSize,
textStyle,
containerStyle,
buttonStyle,
...restProps // This includes onPress and all other Pressable props
}) => {
const scheme = useColorScheme() ?? 'dark';
return (
<ThemedButton
width={width}
height={height}
containerStyle={containerStyle}
buttonStyle={buttonStyle}
{...restProps}
>
<ThemedText
style={[
{
color: Colors[scheme].background,
fontSize: fontSize ?? DEFAULT_FONT_SIZE,
},
textStyle,
]}
>
{text}
</ThemedText>
</ThemedButton>
);
};
export default ThemedTextButton;