[RFC][expo-image] drop-in replacement for <Image /> from react-native #14351

bbarthec · 2021-09-08T15:45:10Z

bbarthec
Sep 8, 2021

Why

expo-image is intended to be robust, versatile and performant module providing the core component - <Image /> that would replace the component provided by react-native package.

In order to make the transition to our module as simple as possible we need to provide the very same API as the original one, additionally adding support for Web. Ideally we would ship the exactly same API with no differences from the original one on mobile platforms.

Background

Currently we have a solid base for mobile platforms - Glide for Android and SDWebImage for iOS (the very same libraries used in popular react-native-fast-image). Web fallbacks to use the component coming from react-native package.

API comparison

`react-native Image`	`expo-image` for Android	Test screen
Inherited `<View />` props
`onStartShouldSetResponder?: (event: Event) => boolean`
`accessibilityHint?: string`
`accessibilityRole?: AccessibilityRole`
`accessibilityState?: AccessibilityState`
`accessibilityValue?: AccessibilityValue`
`accessibilityActions?: AccessibilityAction[]`
`onAccessibilityAction?: Function`
`onAccessibilityTap?: Function`
`onMagicTap?: Function` (iOS only)
`onAccessibilityEscape?: Function` (iOS only)
`accessibilityViewIsModal?: boolean` (iOS only)
`accessibilityElementsHidden?: boolean` (iOS only)
`accessibilityIgnoresInvertColors?: boolean` (iOS only)
`accessibilityLiveRegion?: LiveRegion` (Android only)
`importantForAccessibility?: AccessibilityImportance` (Android only)
`hitSlop?: Rect`
`nativeID?: string`
`onMoveShouldSetResponder?: Function`
`onMoveShouldSetResponderCapture?: Function`
`onResponderGrant?: Function`
`onResponderMove?: Function`
`onResponderReject?: Function`
`onResponderRelease?: Function`
`onResponderTerminate?: Function`
`onResponderTerminationRequest?: Function`
`onStartShouldSetResponderCapture?: Function`
`pointerEvents?: PointerEvents`
`removeClippedSubviews?: boolean`
`collapsable?: boolean` (Android only)
`needsOffscreenAlphaCompositing?: boolean`
`renderToHardwareTextureAndroid?: boolean` (Android only)
`shouldRasterizeIOS?: boolean` (iOS only)
`nextFocusDown?: number` (Android only)
`nextFocusForward?: number` (Android only)
`nextFocusLeft?: number` (Android only)
`nextFocusRight?: number` (Android only)
`nextFocusUp?: number` (Android only)
`focusable?: boolean` (Android only)

`<Image />` props
`accessible?: boolean`	✅ #14109	✅ #14177
`accessibilityLabel?: string`		✅ #14177
`blurRadius?: number`	✅ #14131
`capInsets?: Insets` (iOS only)	✅ #14133
`defaultSource?: ImageSource`	✅ #14178
`fadeDuration?: number` (Android only)
`loadingIndicatorSource?: ImageSource`	⚙️ #14304	⚙️ #14340
`onError?: ErrorCallback`
`onLayout?: LayoutCallback`
`onLoad?: LoadCallback`
`onLoadEnd?: () => void`
`onLoadStart?: () => void`
`onPartialLoad?: () => void` (iOS only)
`onProgress?: ProgressCallback`
`progressiveRenderingEnabled?: boolean` (Android only)
`resizeMethod?: ResizeMethod` (Android only)
`resizeMode?: ResizeMode`	✅ #14233
`source: ImageSource`
`testID?: string`

`style?: Style` prop
`style.backfaceVisibility?: 'visible' \| 'hidden'`
`style.backgroundColor?: color`
`style.borderBottomLeftRadius?: number`	✅ #14188
`style.borderBottomRightRadius?: number`	✅ #14188
`style.borderColor?: color`
`style.borderRadius?: number`
`style.borderTopLeftRadius?: number`	✅ #14188
`style.borderTopRightRadius?: number`	✅ #14188
`style.borderWidth?: number`
`style.opacity?: number`
`style.overflow?: 'visible' \| 'hidden'`
`style.overlayColor?: string` (Android only)
`style.resizeMode?: ResizeMode`
`style.tintColor?: color`
`style.alignContent?: Alignment`
`style.alignItems?: Alignment`
`style.alignSelf?: Alignment`
`style.aspectRatio?: number`
`style.borderBottomWidth?: number`
`style.borderEndWidth?: number`
`style.borderLeftWidth?: number`
`style.borderRightWidth?: number`
`style.borderStartWidth?: number`
`style.borderTopWidth?: number`
`style.borderWidth?: number`
`style.bottom?: number \| string`
`style.direction?: Direction`
`style.display?: Display`
`style.end?: number \| string`
`style.flex?: number`
`style.flexBasis?: number \| string`
`style.flexDirection?: Direction`
`style.flexGrow?: number`
`style.flexShrink?: number`
`style.flexWrap?: Wrap`
`style.height?: number`
`style.justifyContent?: Alignment`
`style.left?: number`
`style.margin?: number \| string`
`style.marginBottom?: number \| string`
`style.marginEnd?: number \| string`
`style.marginHorizontal?: number \| string`
`style.marginLeft?: number \| string`
`style.marginRight?: number \| string`
`style.marginStart?: number \| string`
`style.marginTop?: number \| string`
`style.marginVertical?: number \| string`
`style.maxHeight?: number \| string`
`style.maxWidth?: number \| string`
`style.minHeight?: number \| string`
`style.minWidth?: number \| string`
`style.overflow?: Overflow`
`style.padding?: number \| string`
`style.paddingBottom?: number \| string`
`style.paddingEnd?: number \| string`
`style.paddingHorizontal?: number \| string`
`style.paddingLeft?: number \| string`
`style.paddingRight?: number \| string`
`style.paddingStart?: number \| string`
`style.paddingTop?: number \| string`
`style.paddingVertical?: number \| string`
`style.position?: Position`
`style.right?: number \| string`
`style.start?: number \| string`
`style.top?: number \| string`
`style.width?: number \| string`
`style.zIndex?: number`
`style.shadowColor?: color`
`style.shadowOffset?: Size` (iOS only)
`style.shadowOpacity?: number` (iOS only)
`style.shadowRadius?: number` (iOS only)
`style.transform?: Transform`
`style.transform.matrix?: number[]`
`style.transform.perspective?: number`
`style.transform.rotate?: string`
`style.transform.rotateX?: string`
`style.transform.rotateY?: string`
`style.transform.rotateZ?: string`
`style.transform.scale?: number`
`style.transform.scaleX?: number`
`style.transform.scaleY?: number`
`style.transform.translateX?: number`
`style.transform.translateY?: number`
`style.transform.skewX?: number`
`style.transform.skewY?: number`

`<Image />` methods
`abortPrefetch?(requestId: number): void` (Android only)	⚙️ #14235
`getSize(uri: string, success: Callback, failure?: Callback): any`	⚙️ #14247
`getSizeWithHeaders(uri: string, headers: Record<string, string>, success: Callback, failure?: Callback): any`
`prefetch(url: string, callback: (requestId: number) => void): Promise<boolean>`	✅ #14190
`queryCache?(urls: string[]): Promise<Record<string, CacheType>>`	⚙️ #14280
`resolveAssetSource(source: ImageSource): AssetDescription`	⚙️ #14328

Navigation Menu

Repository navigation

[RFC][expo-image] drop-in replacement for <Image /> from react-native #14351

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

[RFC][expo-image] drop-in replacement for <Image /> from react-native #14351

Uh oh!

Uh oh!

bbarthec Sep 8, 2021

Why

Background

API comparison

Replies: 0 comments

bbarthec
Sep 8, 2021