Skip to content

Instantly share code, notes, and snippets.

@betomoedano
Created January 16, 2026 18:55
Show Gist options
  • Select an option

  • Save betomoedano/c37411075f8cf350d7dd29fb47a17d9b to your computer and use it in GitHub Desktop.

Select an option

Save betomoedano/c37411075f8cf350d7dd29fb47a17d9b to your computer and use it in GitHub Desktop.
Button that uses native colors and symbols
import { Color } from "expo-router";
import { SymbolView, SymbolViewProps } from "expo-symbols";
import React from "react";
import {
Platform,
Pressable,
PressableProps,
StyleSheet,
Text,
} from "react-native";
type ButtonVariant = "primary" | "secondary";
interface ButtonProps extends Omit<PressableProps, "style"> {
variant?: ButtonVariant;
icon: SymbolViewProps["name"];
children: string;
}
const getVariantColors = (variant: ButtonVariant) => {
const isAndroid = Platform.OS === "android";
if (variant === "primary") {
return isAndroid
? {
background: Color.android.dynamic.primary,
text: Color.android.dynamic.onPrimary,
icon: Color.android.dynamic.onPrimary,
}
: {
background: Color.ios.systemGray6,
text: Color.ios.label,
icon: Color.ios.label,
};
}
// secondary
return isAndroid
? {
background: Color.android.dynamic.surfaceVariant,
text: Color.android.dynamic.onSurfaceVariant,
icon: Color.android.dynamic.onSurfaceVariant,
}
: {
background: Color.ios.systemBlue,
text: "white",
icon: "white",
};
};
export const Button: React.FC<ButtonProps> = ({
variant = "primary",
icon,
children,
...pressableProps
}) => {
const colors = getVariantColors(variant);
return (
<Pressable
style={[styles.container, { backgroundColor: colors.background }]}
{...pressableProps}
>
<SymbolView name={icon} size={30} tintColor={colors.icon} />
<Text style={[styles.text, { color: colors.text }]}>{children}</Text>
</Pressable>
);
};
const styles = StyleSheet.create({
container: {
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 100,
flexDirection: "row",
alignItems: "center",
gap: 8,
},
text: {
fontSize: 16,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment