mirror of
https://github.com/hanzoai/insights-js.git
synced 2026-10-30 18:34:19 +00:00
Anna GarciaandGitHub
55ac260a56
* fix(react-native): honor appearance.position in SurveyModal The modal layout was hard-coded to bottom-center, so the `position` field was ignored regardless of what the survey was configured with. Wire it through to the flex alignment so all 9 `SurveyPosition` values render correctly, mirroring the web SDK semantics: `top_*` anchors to the top edge, `middle_*` to the vertical middle, and `left` / `center` / `right` (no prefix) to the bottom edge. Note: the documented default `SurveyPosition.Right` now actually applies. Surveys without an explicit position will move from bottom-center (the previous accidental default) to bottom-right. Also modified so keyboard activation doesn't hide textfield or push content off screen Closes #3497
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
// 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',
|
|
'exclamationmark.warninglight': 'warning',
|
|
'link': 'link',
|
|
'list.bullet.rectangle': 'assignment',
|
|
} 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} />
|
|
}
|