'cropping snapshot in react native maps to just routes

I would like to know if anyone knows how to take snapshot of just routes in react native maps, something what ride sharing companies have when a user views previous trips. I am able to take a snapshot using the code below, though I noticed the height, width, region properties do not.

         takeLocationSnapshot() {
            const { location: { longitude, latitude, } } = this.state;

            const snapshot = this.mapView.takeSnapshot({
              width: 300,      // optional, when omitted the view-width is used
              height: 300,     // optional, when omitted the view-height is used
              region: {
                latitude,
                longitude,
                LONGITUDEDELTA,
                LATITUDEDELTA,
              },
              // iOS only, optional region to render
              format: 'jpg',   // image formats: 'png', 'jpg' (default: 'png')
              quality: 0.7,    // image quality: 0..1 (only relevant for jpg, default: 1)
              result: 'file'   // result types: 'file', 'base64' (default: 'file')
            });
            snapshot.then((uri) => {
              this.props.locationSnapshotChange(uri);
            });
        }


   <View style={styles.imageContentWrap}>
    <Image
     source={imageSource}
     style={styles.imageStyle}
   />
  </View>
imageContentWrap: {
  flexWrap: 'wrap',
  backgroundColor: 'green',
  flex: 0.58,
},
imageStyle: {
  flexWrap: 'wrap',
  width: '100%',
  height: '100%',
  resizeMode: 'cover',
  overflow: 'hidden',
},
cssreactjsreact-nativestylesheet


Solution 1:[1]

Just using Wrapper with fixed height and overflow hidden, and add position absolute, top property to styles of your image

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vadim Dzerniuk

Related Questions