Native base64 encoded image viewer
Many native libraries produce image data in base64 encoded format, for example signature components. This widget can display such images.
View images from base64 encoded image data.
The widget can show base64 encoded images with or without the data:image prefix. If the prefix is not found, it is determined from the file name. If you are sure the encoded data has the prefix, you do not need to set the file name attribute.
The widget can use the actual image dimensions or a fixed view width/height. Set the width and height of the image on the widget.
The available resize modes are the ones React Native provides:
- Cover: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
- Contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
- Stretch: Scale width and height independently, This may change the aspect ratio of the src.
- Repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.
- Center: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.
Configure widget dimensions
By default the widget will attempt to display the image fully. If the image is wider than the available space, the image is resized to match the available space, retaining aspect ratio.
The width and height can also be configured.
Set width and height to maximum size for the resize options to have the most effect.
When used in a list, it is advisable to use a fixed width and height.
- Image size: The default, see above, requires image width/height attribute
- Maximum size: The maximum available width is used
- Fixed: Enter a fixed width.
- Image size: The default, see above
- Square: Square, defines a square box where height matches the width used. Useful in lists.
- Maximum size: The maximum available height is used
- Fixed: Enter a fixed height.