@rnmapbox/maps 10.0.0-beta.75 → 10.0.0-beta.76

package/README.md

@@ -147,15 +147,15 @@ npm run android
 ```js
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import MapboxGL from '@rnmapbox/maps';
+import Mapbox from '@rnmapbox/maps';
 
-MapboxGL.setAccessToken('<YOUR_ACCESSTOKEN>');
+Mapbox.setAccessToken('<YOUR_ACCESSTOKEN>');
 
 const App = () => {
   return (
     <View style={styles.page}>
       <View style={styles.container}>
-        <MapboxGL.MapView style={styles.map} />
+        <Mapbox.MapView style={styles.map} />
       </View>
     </View>
   );

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/images/RCTMGLImagesManager.kt

@@ -63,9 +63,9 @@ class RCTMGLImagesManager(private val mContext: ReactApplicationContext) :
                 val drawable =
                     ResourceUtils.getDrawableByName(mContext, resourceName) as BitmapDrawable
                 if (drawable != null) {
-                    return NativeImage(name, drawable)
+                    return NativeImage(resourceName, drawable)
                 } else {
-                    Logger.e("RCTMGLImages", "cound not get native drawable with name: $name")
+                    Logger.e("RCTMGLImages", "cound not get native drawable with name: $resourceName")
                     return null
                 }
             }
@@ -98,10 +98,10 @@ class RCTMGLImagesManager(private val mContext: ReactApplicationContext) :
                 }
                 val drawable =
                     ResourceUtils.getDrawableByName(mContext, resourceName) as BitmapDrawable
-                if (drawable != null) {
-                    return NativeImage(name, drawable, scale, sdf, stretchX, stretchY)
+                if (drawable != null && resourceName != null) {
+                    return NativeImage(resourceName, drawable, scale, sdf, stretchX, stretchY)
                 } else {
-                    Logger.e("RCTMGLImages", "cound not get native drawable with name: $name")
+                    Logger.e("RCTMGLImages", "cound not get native drawable with name: $resourceName")
                     return null
                 }
             }

package/ios/RCTMGL-v10/RCMTGLImage.swift

@@ -9,6 +9,7 @@ class RCTMGLImage : UIView {
   var sdf: Bool? = nil
   var stretchX: [[NSNumber]] = []
   var stretchY: [[NSNumber]] = []
+  var content: [NSNumber]? = nil
 
   weak var images: RCTMGLImageSetter? = nil {
     didSet {
@@ -42,7 +43,7 @@ class RCTMGLImage : UIView {
   
   func changeImage(_ image: UIImage, name: String) {
     if let images = images {
-      let _ = images.addImage(name: name, image: image, sdf: sdf, stretchX:stretchX, stretchY:stretchY, log: "RCTMGLImage.addImage")
+      let _ = images.addImage(name: name, image: image, sdf: sdf, stretchX:stretchX, stretchY:stretchY, content:content, log: "RCTMGLImage.addImage")
     }
   }
   

package/ios/RCTMGL-v10/RCTMGLImages.swift

@@ -1,7 +1,7 @@
 import MapboxMaps
 
 protocol RCTMGLImageSetter : AnyObject {
-  func addImage(name: String, image: UIImage, sdf: Bool?, stretchX: [[NSNumber]], stretchY: [[NSNumber]], log: String) -> Bool
+  func addImage(name: String, image: UIImage, sdf: Bool?, stretchX: [[NSNumber]], stretchY: [[NSNumber]], content: [NSNumber]?, log: String) -> Bool
 }
 
 class RCTMGLImages : UIView, RCTMGLMapComponent {
@@ -26,7 +26,7 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
     }
   };
 
-  typealias NativeImageInfo = (name:String, sdf: Bool, stretchX:[(from:Float, to:Float)], stretchY:[(from:Float, to:Float)]);
+  typealias NativeImageInfo = (name:String, sdf: Bool, stretchX:[(from:Float, to:Float)], stretchY:[(from:Float, to:Float)], content: (left:Float,top:Float,right:Float,bottom:Float)? );
   var nativeImageInfos: [NativeImageInfo] = []
   
   @objc open override func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
@@ -80,14 +80,15 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
     
     for imageName in remoteImages.keys {
       if style.styleManager.getStyleImage(forImageId: imageName) == nil {
-        try! style.addImage(placeholderImage, id: imageName, stretchX: [], stretchY: [])
-        missingImages[imageName] = remoteImages[imageName]
+        logged("RCTMGLImages.addImagePlaceholder") {
+          try? style.addImage(placeholderImage, id: imageName, stretchX: [], stretchY: [])
+          missingImages[imageName] = remoteImages[imageName]
+        }
       }
     }
     
     if missingImages.count > 0 {
       RCTMGLUtils.fetchImages(bridge, style: style, objects: missingImages, forceUpdate: true, callback: { })
-      
     }
   }
   
@@ -118,19 +119,51 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
     }
   }
   
-  func convert(stretch: [[NSNumber]]) -> [(from: Float, to: Float)] {
+  static func convert(stretch: [[NSNumber]], scale: Float = 1.0) -> [(from: Float, to: Float)] {
     return stretch.map{ pair in
-      return (from: pair[0].floatValue, to: pair[1].floatValue)
+      return (from: pair[0].floatValue * scale, to: pair[1].floatValue * scale)
     }
   }
   
-  func convert(stretch: [(from: Float, to: Float)]) -> [ImageStretches] {
+  static func convert(stretch: [(from: Float, to: Float)]) -> [ImageStretches] {
     return stretch.map { v in ImageStretches(first: v.from, second: v.to) }
   }
   
+  static func convert(stretch: [[NSNumber]], scale: Float = 1.0) -> [ImageStretches] {
+    return convert(stretch: convert(stretch: stretch, scale: scale))
+  }
+
+  static func convert(content: (left:Float, top:Float, right:Float, bottom:Float)?) -> ImageContent? {
+    guard let content = content else {
+      return nil
+    }
+    
+    return ImageContent(left:content.left, top:content.top, right:content.right, bottom:content.bottom)
+  }
+
+  static func convert(content: [NSNumber]?, scale: Float = 1.0) -> (left:Float,top:Float,right:Float,bottom:Float)? {
+    guard let content = content else {
+      return nil
+    }
+    guard content.count == 4 else {
+      Logger.log(level: .error, message: "Image content should have 4 elements got \(content)")
+      return nil
+    }
+    return (
+      left: content[0].floatValue*scale,
+      top: content[1].floatValue*scale,
+      right: content[2].floatValue*scale,
+      bottom: content[3].floatValue*scale
+    )
+  }
+  
+  static func convert(content: [NSNumber]?, scale: Float = 1.0) -> ImageContent? {
+    return convert(content: convert(content: content, scale: scale))
+  }
+  
   func decodeImage(_ imageNameOrInfo: Any) -> NativeImageInfo? {
     if let imageName = imageNameOrInfo as? String {
-      return (name: imageName, sdf: false, stretchX:[],stretchY:[])
+      return (name: imageName, sdf: false, stretchX:[],stretchY:[],content:nil)
     } else if let imageInfo = imageNameOrInfo as? [String:Any] {
       guard let name = imageInfo["name"] as? String else {
         Logger.log(level: .warn, message: "NativeImage: \(imageInfo) has no name key")
@@ -144,14 +177,19 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
       }
       
       if let stretchXV = imageInfo["stretchX"] as? [[NSNumber]] {
-        stretchX = convert(stretch: stretchXV)
+        stretchX = RCTMGLImages.convert(stretch: stretchXV)
       }
       
       if let stretchYV = imageInfo["stretchY"] as? [[NSNumber]] {
-        stretchY = convert(stretch: stretchYV)
+        stretchY = RCTMGLImages.convert(stretch: stretchYV)
+      }
+      
+      var content : (left:Float, top:Float, right:Float, bottom:Float)? = nil
+      if let contentV = imageInfo["content"] as? [NSNumber] {
+        content = RCTMGLImages.convert(content: contentV)
       }
       
-      return (name: name, sdf: sdf, stretchX: stretchX, stretchY: stretchY)
+      return (name: name, sdf: sdf, stretchX: stretchX, stretchY: stretchY, content: content)
     } else {
       Logger.log(level: .warn, message: "RCTMGLImage.nativeImage, unexpected image: \(imageNameOrInfo)")
       return nil
@@ -165,8 +203,9 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
         if let image = UIImage(named: imageName) {
           logged("RCTMGLImage.addNativeImage: \(imageName)") {
             try style.addImage(image, id: imageName, sdf: imageInfo.sdf,
-                               stretchX: convert(stretch: imageInfo.stretchX),
-                               stretchY: convert(stretch: imageInfo.stretchY)
+                               stretchX: RCTMGLImages.convert(stretch: imageInfo.stretchX),
+                               stretchY: RCTMGLImages.convert(stretch: imageInfo.stretchY),
+                               content: RCTMGLImages.convert(content: imageInfo.content)
             )
           }
         } else {
@@ -185,15 +224,16 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
 }
 
 extension RCTMGLImages : RCTMGLImageSetter {
-  func addImage(name: String, image: UIImage, sdf: Bool?, stretchX: [[NSNumber]], stretchY: [[NSNumber]], log: String) -> Bool
+  func addImage(name: String, image: UIImage, sdf: Bool?, stretchX: [[NSNumber]], stretchY: [[NSNumber]], content: [NSNumber]?, log: String) -> Bool
   {
      return logged("\(log).addImage") {
        if let style = style {
          try style.addImage(image,
                             id:name,
                             sdf: sdf ?? false,
-                            stretchX: convert(stretch: convert(stretch: stretchX)),
-                            stretchY: convert(stretch: convert(stretch: stretchY))
+                            stretchX: RCTMGLImages.convert(stretch: stretchX),
+                            stretchY: RCTMGLImages.convert(stretch: stretchY),
+                            content: RCTMGLImages.convert(content: content)
          )
          return true
        } else {

package/ios/RCTMGL-v10/RCTMGLMapView.swift

@@ -645,7 +645,17 @@ extension RCTMGLMapView: GestureManagerDelegate {
   }
   
   func highestZIndex(sources: [RCTMGLInteractiveElement]) -> RCTMGLInteractiveElement? {
-    return sources.first
+    var layersToSource : [String:RCTMGLInteractiveElement] = [:]
+    
+    sources.forEach { source in
+      source.getLayerIDs().forEach { layerId in
+        if layersToSource[layerId] == nil {
+          layersToSource[layerId] = source
+        }
+      }
+    }
+    let orderedLayers = mapboxMap.style.allLayerIdentifiers
+    return orderedLayers.lazy.reversed().compactMap { layersToSource[$0.id] }.first ?? sources.first
   }
   
   @objc

package/ios/RCTMGL-v10/RCTMGLUtils.swift

@@ -30,9 +30,15 @@ class RCTMGLUtils {
       if (forceUpdate || foundImage == nil) {
         let image = objects[imageName]
         if let image = image as? [String:Any] {
-          let hasScale = image["scale"] != nil
-          let scale = hasScale ? (image["scale"] as! NSNumber).doubleValue : 1.0
-          RCTMGLImageQueue.sharedInstance.addImage(objects[imageName], scale: scale, bridge:bridge) {
+          let scale = (image["scale"] as? NSNumber)?.floatValue ?? 1.0
+          let sdf = (image["sdf"] as? NSNumber)?.boolValue ?? false
+          let imageStretchX = image["stretchX"] as? [[NSNumber]]
+          let stretchX: [ImageStretches] = imageStretchX != nil ? RCTMGLImages.convert(stretch: imageStretchX!, scale: scale) : []
+          let imageStretchY = image["stretchY"] as? [[NSNumber]]
+          let stretchY: [ImageStretches] = imageStretchY != nil ? RCTMGLImages.convert(stretch: imageStretchY!, scale: scale) : []
+          let content: ImageContent? = RCTMGLImages.convert(content: image["content"] as? [NSNumber], scale: scale)
+          
+          RCTMGLImageQueue.sharedInstance.addImage(objects[imageName], scale: Double(scale), bridge:bridge) {
             (error,image) in
             if image == nil {
               RCTMGLLogWarn("Failed to fetch image: \(imageName) error:\(error)")
@@ -40,8 +46,11 @@ class RCTMGLUtils {
             else {
               DispatchQueue.main.async {
                 if let image = image {
-                  try! style.addImage(image, id: imageName, stretchX: [], stretchY: [])
-                  imageLoadedBlock()
+                  logged("RCTMGLUtils.fetchImage-\(imageName)") {
+                    print("width=\(image.size.width) height=\(image.size.height) scale=\(image.scale) scale2=\(scale)")
+                    try style.addImage(image, id: imageName, sdf:sdf, stretchX: stretchX, stretchY: stretchY, content: content)
+                    imageLoadedBlock()
+                  }
                 }
               }
             }

package/javascript/MGLModule.ts

@@ -0,0 +1,54 @@
+import { NativeModules } from 'react-native';
+
+interface MGLModule {
+  StyleURL: {
+    Street: URL;
+    Outdoors: URL;
+    Light: URL;
+    Dark: URL;
+    Satellite: URL;
+    SatelliteStreet: URL;
+  };
+  OfflinePackDownloadState: {
+    Inactive: string | number;
+    Active: string | number;
+    Complete: string | number;
+    Unknown?: string | number;
+  };
+  LineJoin: {
+    Bevel: string | number;
+    Round: string | number;
+    Miter: string | number;
+  };
+  StyleSource: {
+    DefaultSourceID: string;
+  };
+  TileServers: {
+    Mapbox: string;
+  };
+
+  removeCustomHeader(headerName: string): void;
+  addCustomHeader(headerName: string, headerValue: string): void;
+  setAccessToken(accessToken: string | null): Promise<string | null>;
+  setWellKnownTileServer(tileServer: string): void;
+  getAccessToken(): Promise<string>;
+  setTelemetryEnabled(telemetryEnabled: boolean): void;
+  setConnected(connected: boolean): void;
+}
+
+const MGLModule: MGLModule = { ...NativeModules.MGLModule };
+
+export const {
+  StyleURL,
+  OfflinePackDownloadState,
+  LineJoin,
+  StyleSource,
+  TileServers,
+  removeCustomHeader,
+  addCustomHeader,
+  setAccessToken,
+  setWellKnownTileServer,
+  getAccessToken,
+  setTelemetryEnabled,
+  setConnected,
+} = MGLModule;

package/javascript/Mapbox.ts

@@ -0,0 +1,97 @@
+export * from './MGLModule';
+export {
+  Camera,
+  UserTrackingMode,
+  type CameraPadding,
+  type CameraAnimationMode,
+  type CameraBounds,
+} from './components/Camera';
+export { Atmosphere } from './components/Atmosphere';
+export { default as MapView, type MapState } from './components/MapView';
+export { default as Light } from './components/Light';
+export { default as PointAnnotation } from './components/PointAnnotation';
+export { default as Annotation } from './components/Annotation';
+export { default as Callout } from './components/Callout';
+export { default as UserLocation } from './components/UserLocation';
+export { default as VectorSource } from './components/VectorSource';
+export { ShapeSource } from './components/ShapeSource';
+export { default as RasterSource } from './components/RasterSource';
+export { default as RasterDemSource } from './components/RasterDemSource';
+export { default as ImageSource } from './components/ImageSource';
+export { default as Images, type ImageEntry } from './components/Images';
+export { default as Image } from './components/Image';
+export { default as FillLayer } from './components/FillLayer';
+export { default as FillExtrusionLayer } from './components/FillExtrusionLayer';
+export { default as HeatmapLayer } from './components/HeatmapLayer';
+export { default as LineLayer } from './components/LineLayer';
+export { default as CircleLayer } from './components/CircleLayer';
+export { default as SkyLayer } from './components/SkyLayer';
+export { SymbolLayer } from './components/SymbolLayer';
+export { default as RasterLayer } from './components/RasterLayer';
+export { default as BackgroundLayer } from './components/BackgroundLayer';
+export { Terrain } from './components/Terrain';
+export {
+  default as locationManager,
+  type Location,
+} from './modules/location/locationManager';
+export {
+  default as offlineManager,
+  OfflineCreatePackOptions,
+} from './modules/offline/offlineManager';
+export {
+  default as snapshotManager,
+  type SnapshotOptions,
+} from './modules/snapshot/snapshotManager';
+export { default as MarkerView } from './components/MarkerView';
+export { default as Animated } from './utils/animated/Animated';
+export {
+  AnimatedCoordinatesArray,
+  AnimatedExtractCoordinateFromArray,
+  AnimatedPoint,
+  AnimatedRouteCoordinatesArray,
+  AnimatedShape,
+} from './classes';
+export { default as Style } from './components/Style';
+export { default as Logger, type LogLevel } from './utils/Logger';
+export { requestAndroidLocationPermissions } from './requestAndroidLocationPermissions';
+export { getAnnotationsLayerID } from './utils/getAnnotationsLayerID';
+export type {
+  FillLayerStyleProps as FillLayerStyle,
+  LineLayerStyleProps as LineLayerStyle,
+  SymbolLayerStyleProps as SymbolLayerStyle,
+  CircleLayerStyleProps as CircleLayerStyle,
+  HeatmapLayerStyleProps as HeatmapLayerStyle,
+  FillExtrusionLayerStyleProps as FillExtrusionLayerStyle,
+  RasterLayerStyleProps as RasterLayerStyle,
+  HillshadeLayerStyleProps as HillshadeLayerStyle,
+  BackgroundLayerStyleProps as BackgroundLayerStyle,
+  SkyLayerStyleProps as SkyLayerStyle,
+  LightLayerStyleProps as LightLayerStyle,
+  AtmosphereLayerStyleProps as AtmosphereLayerStyle,
+  TerrainLayerStyleProps as TerrainLayerStyle,
+} from './utils/MapboxStyles';
+
+import { deprecatedClass } from './utils/deprecation';
+import { AnimatedPoint } from './classes';
+import { UserTrackingMode } from './components/Camera';
+
+/** @deprecated This will be removed in a future release. Use `AnimatedPoint` instead. */
+export const AnimatedMapPoint = deprecatedClass(
+  AnimatedPoint,
+  'AnimatedMapPoint is deprecated please use AnimatedPoint',
+);
+
+// types:
+export enum StyleURL {
+  Street = 'mapbox://styles/mapbox/streets-v11',
+  Dark = 'mapbox://styles/mapbox/dark-v10',
+  Light = 'mapbox://styles/mapbox/light-v10',
+  Outdoors = 'mapbox://styles/mapbox/outdoors-v11',
+  Satellite = 'mapbox://styles/mapbox/satellite-v9',
+  SatelliteStreet = 'mapbox://styles/mapbox/satellite-streets-v11',
+  TrafficDay = 'mapbox://styles/mapbox/navigation-preview-day-v4',
+  TrafficNight = 'mapbox://styles/mapbox/navigation-preview-night-v4',
+}
+
+/** @deprecated UserTrackingModes is deprecated use UserTrackingMode */
+export const UserTrackingModes = UserTrackingMode;

package/javascript/classes/index.d.ts

@@ -1,5 +1,24 @@
+import { Point } from 'geojson';
+import { Animated } from 'react-native';
+
+import WithAnimatedObject = Animated.WithAnimatedObject;
+
 export class AnimatedCoordinatesArray {}
 export class AnimatedExtractCoordinateFromArray {}
-export class AnimatedPoint {}
+export class AnimatedPoint implements WithAnimatedObject<Point> {
+  constructor(point: Point);
+
+  timing({
+    coordinates,
+    easing,
+    duration,
+  }: {
+    coordinates: number[];
+    easing?: (x: number) => number;
+    duration?: number;
+  });
+
+  stopAnimation();
+}
 export class AnimatedRouteCoordinatesArray {}
 export class AnimatedShape {}

package/javascript/components/Annotation.tsx

@@ -0,0 +1,141 @@
+import React, { ReactElement } from 'react';
+import { Animated as RNAnimated, Easing } from 'react-native';
+import { Point } from 'geojson';
+
+import Animated from '../utils/animated/Animated';
+import { AnimatedPoint } from '../classes';
+import { OnPressEvent } from '../types/OnPressEvent';
+import { SymbolLayerStyle } from '../Mapbox';
+
+import { SymbolLayer } from './SymbolLayer';
+
+type Props = {
+  id: string;
+  animated?: boolean;
+  animationDuration?: number;
+  animationEasingFunction?: (x: number) => number;
+  coordinates: number[];
+  onPress?: (event: OnPressEvent) => void;
+  children: ReactElement | ReactElement[];
+  style?: object;
+  icon?: string | number | object;
+};
+
+type AnnotationState = {
+  shape: Point | AnimatedPoint | null;
+};
+
+class Annotation extends React.Component<Props, AnnotationState> {
+  static defaultProps = {
+    animated: false,
+    animationDuration: 1000,
+    animationEasingFunction: Easing.linear,
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    const shape = this._getShapeFromProps(props);
+
+    this.state = {
+      shape: props.animated ? new AnimatedPoint(shape) : shape,
+    };
+
+    this.onPress = this.onPress.bind(this);
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (!Array.isArray(this.props.coordinates)) {
+      this.setState({ shape: null });
+      return;
+    }
+
+    const haveCoordinatesChanged =
+      prevProps.coordinates[0] !== this.props.coordinates[0] ||
+      prevProps.coordinates[1] !== this.props.coordinates[1];
+
+    if (
+      prevProps.animated !== this.props.animated ||
+      (haveCoordinatesChanged && (!this.state.shape || !this.props.animated))
+    ) {
+      const shape = this._getShapeFromProps(this.props);
+
+      this.setState({
+        shape: this.props.animated ? new AnimatedPoint(shape) : shape,
+      });
+    } else if (
+      haveCoordinatesChanged &&
+      this.props.animated &&
+      this.state.shape
+    ) {
+      // flush current animations
+      (this.state.shape as AnimatedPoint).stopAnimation();
+
+      (this.state.shape as AnimatedPoint)
+        .timing({
+          coordinates: this.props.coordinates,
+          easing: this.props.animationEasingFunction,
+          duration: this.props.animationDuration,
+        })
+        .start();
+    }
+  }
+
+  onPress(event: OnPressEvent) {
+    if (this.props.onPress) {
+      this.props.onPress(event);
+    }
+  }
+
+  _getShapeFromProps(props: Partial<Props> = {}): Point {
+    const lng = props.coordinates?.[0] || 0;
+    const lat = props.coordinates?.[1] || 0;
+    return { type: 'Point', coordinates: [lng, lat] };
+  }
+
+  get symbolStyle(): SymbolLayerStyle | undefined {
+    if (!this.props.icon) {
+      return undefined;
+    }
+    return Object.assign({}, this.props.style, {
+      iconImage: this.props.icon,
+    });
+  }
+
+  render() {
+    if (!this.props.coordinates) {
+      return null;
+    }
+
+    const children = [];
+
+    if (this.symbolStyle) {
+      children.push(
+        <SymbolLayer
+          id={`${this.props.id}-symbol`}
+          style={this.symbolStyle as SymbolLayerStyle}
+        />,
+      );
+    }
+
+    if (this.props.children) {
+      if (Array.isArray(this.props.children)) {
+        children.push(...this.props.children);
+      } else {
+        children.push(this.props.children);
+      }
+    }
+
+    return (
+      <Animated.ShapeSource
+        id={this.props.id}
+        onPress={this.onPress}
+        shape={this.state.shape as RNAnimated.WithAnimatedObject<Point>}
+      >
+        {children}
+      </Animated.ShapeSource>
+    );
+  }
+}
+
+export default Annotation;

package/javascript/components/Callout.d.ts

@@ -0,0 +1,35 @@
+import { ViewStyle } from 'react-native';
+
+type Props = Omit<ViewProps, 'style'> & {
+  /**
+   * String that gets displayed in the default callout.
+   */
+  title: string;
+
+  /**
+   * Style property for the Animated.View wrapper, apply animations to this
+   */
+  style?: ViewStyle;
+
+  /**
+   * Style property for the native RCTMGLCallout container, set at your own risk.
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Style property for the content bubble.
+   */
+  contentStyle?: ViewStyle;
+
+  /**
+   * Style property for the triangle tip under the content.
+   */
+  tipStyle?: ViewStyle;
+
+  /**
+   * Style property for the title in the content bubble.
+   */
+  textStyle?: ViewStyle;
+};
+
+export default class Callout extends React.Component<Props> {}

package/javascript/components/ImageSource.tsx

@@ -29,7 +29,7 @@ type Props = BaseProps & {
   /**
    * The top left, top right, bottom right, and bottom left coordinates for the image.
    */
-  coordinates: [Position, Position, Position, Position];
+  coordinates?: [Position, Position, Position, Position];
 
   children?: React.ReactElement | React.ReactElement[];
 };