mirror of
https://github.com/kennethnym/aris.git
synced 2026-03-20 17:11:17 +00:00
feat: add Expo React Native client scaffold
- Expo SDK 54 / React Native 0.81 with expo-router - Tailscale devcontainer feature for direct device connectivity - Dev proxy for React Native DevTools access over Tailscale - EAS build configuration for development/preview/production - Ona automation for Expo dev server Co-authored-by: Ona <no-reply@ona.com>
This commit is contained in:
41
apps/aris-client/src/components/ui/icon-symbol.tsx
Normal file
41
apps/aris-client/src/components/ui/icon-symbol.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
// Fallback for using MaterialIcons on Android and web.
|
||||
|
||||
import MaterialIcons from "@expo/vector-icons/MaterialIcons"
|
||||
import { SymbolWeight, SymbolViewProps } from "expo-symbols"
|
||||
import { ComponentProps } from "react"
|
||||
import { OpaqueColorValue, type StyleProp, type TextStyle } from "react-native"
|
||||
|
||||
type IconMapping = Record<SymbolViewProps["name"], ComponentProps<typeof MaterialIcons>["name"]>
|
||||
type IconSymbolName = keyof typeof MAPPING
|
||||
|
||||
/**
|
||||
* Add your SF Symbols to Material Icons mappings here.
|
||||
* - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
|
||||
* - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
|
||||
*/
|
||||
const MAPPING = {
|
||||
"house.fill": "home",
|
||||
"paperplane.fill": "send",
|
||||
"chevron.left.forwardslash.chevron.right": "code",
|
||||
"chevron.right": "chevron-right",
|
||||
} as IconMapping
|
||||
|
||||
/**
|
||||
* An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
|
||||
* This ensures a consistent look across platforms, and optimal resource usage.
|
||||
* Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
|
||||
*/
|
||||
export function IconSymbol({
|
||||
name,
|
||||
size = 24,
|
||||
color,
|
||||
style,
|
||||
}: {
|
||||
name: IconSymbolName
|
||||
size?: number
|
||||
color: string | OpaqueColorValue
|
||||
style?: StyleProp<TextStyle>
|
||||
weight?: SymbolWeight
|
||||
}) {
|
||||
return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />
|
||||
}
|
||||
Reference in New Issue
Block a user