ImageProps.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @flow strict-local
  8. * @format
  9. */
  10. 'use strict';
  11. import type {SyntheticEvent, LayoutEvent} from '../Types/CoreEventTypes';
  12. import type {EdgeInsetsProp} from '../StyleSheet/EdgeInsetsPropType';
  13. import type {ImageSource} from './ImageSource';
  14. import type {ViewStyleProp, ImageStyleProp} from '../StyleSheet/StyleSheet';
  15. import type {ViewProps} from '../Components/View/ViewPropTypes';
  16. export type ImageLoadEvent = SyntheticEvent<
  17. $ReadOnly<{|
  18. source: $ReadOnly<{|
  19. width: number,
  20. height: number,
  21. url: string,
  22. |}>,
  23. uri?: string, // Only on Android
  24. |}>,
  25. >;
  26. type IOSImageProps = $ReadOnly<{|
  27. /**
  28. * A static image to display while loading the image source.
  29. *
  30. * See https://reactnative.dev/docs/image.html#defaultsource
  31. */
  32. defaultSource?: ?ImageSource,
  33. /**
  34. * Invoked when a partial load of the image is complete.
  35. *
  36. * See https://reactnative.dev/docs/image.html#onpartialload
  37. */
  38. onPartialLoad?: ?() => void,
  39. /**
  40. * Invoked on download progress with `{nativeEvent: {loaded, total}}`.
  41. *
  42. * See https://reactnative.dev/docs/image.html#onprogress
  43. */
  44. onProgress?: ?(
  45. event: SyntheticEvent<$ReadOnly<{|loaded: number, total: number|}>>,
  46. ) => void,
  47. |}>;
  48. type AndroidImageProps = $ReadOnly<{|
  49. loadingIndicatorSource?: ?(number | $ReadOnly<{|uri: string|}>),
  50. progressiveRenderingEnabled?: ?boolean,
  51. fadeDuration?: ?number,
  52. |}>;
  53. export type ImageProps = {|
  54. ...$Diff<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
  55. ...IOSImageProps,
  56. ...AndroidImageProps,
  57. /**
  58. * When true, indicates the image is an accessibility element.
  59. *
  60. * See https://reactnative.dev/docs/image.html#accessible
  61. */
  62. accessible?: ?boolean,
  63. /**
  64. * Internal prop to set an "Analytics Tag" that can will be set on the Image
  65. */
  66. internal_analyticTag?: ?string,
  67. /**
  68. * The text that's read by the screen reader when the user interacts with
  69. * the image.
  70. *
  71. * See https://reactnative.dev/docs/image.html#accessibilitylabel
  72. */
  73. accessibilityLabel?: ?Stringish,
  74. /**
  75. * blurRadius: the blur radius of the blur filter added to the image
  76. *
  77. * See https://reactnative.dev/docs/image.html#blurradius
  78. */
  79. blurRadius?: ?number,
  80. /**
  81. * See https://reactnative.dev/docs/image.html#capinsets
  82. */
  83. capInsets?: ?EdgeInsetsProp,
  84. /**
  85. * Invoked on load error with `{nativeEvent: {error}}`.
  86. *
  87. * See https://reactnative.dev/docs/image.html#onerror
  88. */
  89. onError?: ?(
  90. event: SyntheticEvent<
  91. $ReadOnly<{|
  92. error: string,
  93. |}>,
  94. >,
  95. ) => void,
  96. /**
  97. * Invoked on mount and layout changes with
  98. * `{nativeEvent: {layout: {x, y, width, height}}}`.
  99. *
  100. * See https://reactnative.dev/docs/image.html#onlayout
  101. */
  102. onLayout?: ?(event: LayoutEvent) => mixed,
  103. /**
  104. * Invoked when load completes successfully.
  105. *
  106. * See https://reactnative.dev/docs/image.html#onload
  107. */
  108. onLoad?: ?(event: ImageLoadEvent) => void,
  109. /**
  110. * Invoked when load either succeeds or fails.
  111. *
  112. * See https://reactnative.dev/docs/image.html#onloadend
  113. */
  114. onLoadEnd?: ?() => void,
  115. /**
  116. * Invoked on load start.
  117. *
  118. * See https://reactnative.dev/docs/image.html#onloadstart
  119. */
  120. onLoadStart?: ?() => void,
  121. /**
  122. * See https://reactnative.dev/docs/image.html#resizemethod
  123. */
  124. resizeMethod?: ?('auto' | 'resize' | 'scale'),
  125. /**
  126. * The image source (either a remote URL or a local file resource).
  127. *
  128. * See https://reactnative.dev/docs/image.html#source
  129. */
  130. source?: ?ImageSource,
  131. /**
  132. * See https://reactnative.dev/docs/image.html#style
  133. */
  134. style?: ?ImageStyleProp,
  135. /**
  136. * Determines how to resize the image when the frame doesn't match the raw
  137. * image dimensions.
  138. *
  139. * See https://reactnative.dev/docs/image.html#resizemode
  140. */
  141. resizeMode?: ?('cover' | 'contain' | 'stretch' | 'repeat' | 'center'),
  142. /**
  143. * A unique identifier for this element to be used in UI Automation
  144. * testing scripts.
  145. *
  146. * See https://reactnative.dev/docs/image.html#testid
  147. */
  148. testID?: ?string,
  149. src?: empty,
  150. children?: empty,
  151. |};