@widergy/mobile-ui 0.33.0 → 0.34.2

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [0.34.2](https://github.com/widergy/mobile-ui/compare/v0.34.1...v0.34.2) (2022-05-06)
+
+
+### Bug Fixes
+
+* modify radio button components and others ([#221](https://github.com/widergy/mobile-ui/issues/221)) ([530345a](https://github.com/widergy/mobile-ui/commit/530345a3cb103ce761a4d780544b72f101d6a5e8))
+
+## [0.34.1](https://github.com/widergy/mobile-ui/compare/v0.34.0...v0.34.1) (2022-04-26)
+
+
+### Bug Fixes
+
+* undefined is not a function ([#219](https://github.com/widergy/mobile-ui/issues/219)) ([ca80c4d](https://github.com/widergy/mobile-ui/commit/ca80c4d6b90176376f980234be432da87f6ed5ff))
+
+# [0.34.0](https://github.com/widergy/mobile-ui/compare/v0.33.0...v0.34.0) (2022-04-11)
+
+
+### Features
+
+* photo album and capture component added ([08f0749](https://github.com/widergy/mobile-ui/commit/08f07498f274b36bfc2a3be901527bd73f338a7a))
+
 # [0.33.0](https://github.com/widergy/mobile-ui/compare/v0.32.4...v0.33.0) (2022-03-25)
 
 

package/lib/components/Capture/index.js

@@ -0,0 +1,55 @@
+import React, { Fragment } from 'react';
+
+import Label from '../Label';
+import PhotoAlbum from '../PhotoAlbum';
+
+import styles from './styles';
+import propTypes from './propTypes';
+
+const Capture = ({
+  label,
+  helpText,
+  maxImages,
+  images,
+  selectedImages,
+  setSelectedImages,
+  deletePhoto,
+  onPressAddAnotherPhoto,
+  onUnknownCameraError,
+  selectedMode,
+  sourceCameraImage,
+  sourceEditImage,
+  messageErrorPermissionCamera
+}) => {
+  const isOnlyOnePicture = maxImages === 1 && images.length === 1;
+  const isItPossibleToAddAnotherPhoto = isOnlyOnePicture ? false : images.length <= maxImages;
+
+  return (
+    <Fragment>
+      {!!label && (
+        <Label semiBold big style={styles.paddingText}>
+          {label}
+        </Label>
+      )}
+      <PhotoAlbum
+        images={images}
+        selectedImages={selectedImages}
+        setSelectedImages={setSelectedImages}
+        deletePhoto={deletePhoto}
+        isItPossibleToAddAnotherPhoto={isItPossibleToAddAnotherPhoto}
+        onPressAddAnotherPhoto={onPressAddAnotherPhoto}
+        onUnknownCameraError={onUnknownCameraError}
+        selectedMode={selectedMode}
+        numberOfPhotosInTheAlbumHasExceeded={images.length === maxImages}
+        isOnlyOnePicture={isOnlyOnePicture}
+        sourceCameraImage={sourceCameraImage}
+        sourceEditImage={sourceEditImage}
+        messageErrorPermissionCamera={messageErrorPermissionCamera}
+      />
+      {!!helpText && <Label style={styles.paddingText}>{helpText}</Label>}
+    </Fragment>
+  );
+};
+Capture.propTypes = propTypes;
+
+export default Capture;

package/lib/components/Capture/propTypes.js

@@ -0,0 +1,14 @@
+import { bool, string, func, array, number } from 'prop-types';
+
+export default {
+  label: string,
+  helpText: string,
+  maxImages: number,
+  images: array,
+  selectedImages: array,
+  setSelectedImages: func,
+  deletePhoto: func,
+  onPressAddAnotherPhoto: func,
+  onUnknownCameraError: func,
+  selectedMode: bool
+};

package/lib/components/Capture/styles.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+import { moderateHorizontalScale } from '../../utils/scaleUtils';
+
+const styles = StyleSheet.create({
+  paddingText: {
+    paddingLeft: moderateHorizontalScale(5)
+  }
+});
+
+export default styles;

package/lib/components/Label/utils.js

@@ -48,4 +48,7 @@ export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}) => {
 };
 
 export const markdownFormat = content =>
-  content?.replace(/(<\s*br\s*\/?>|\n)/gi, '\n\n').replace(/(<\s*hr\s*\/?>)/gi, '\n\n---') || null;
+  content
+    ?.toString()
+    .replace(/(<\s*br\s*\/?>|\n)/gi, '\n\n')
+    .replace(/(<\s*hr\s*\/?>)/gi, '\n\n---') || null;

package/lib/components/PhotoAlbum/components/AddAnotherPhotoButton/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Image, TouchableOpacity } from 'react-native';
+
+import styles from './styles';
+import propTypes from './propTypes';
+
+const AddAnotherPhotoButton = ({ sourceCameraImage, onPress, disabled }) => (
+  <TouchableOpacity
+    onPress={onPress}
+    style={[styles.container, disabled && styles.disabledContainer]}
+    disabled={disabled}
+  >
+    <Image source={sourceCameraImage} style={[styles.image, disabled && styles.imageDisabled]} />
+  </TouchableOpacity>
+);
+
+AddAnotherPhotoButton.propTypes = propTypes;
+
+export default AddAnotherPhotoButton;

package/lib/components/PhotoAlbum/components/AddAnotherPhotoButton/propTypes.js

@@ -0,0 +1,7 @@
+import { bool, func, any } from 'prop-types';
+
+export default {
+  source: any,
+  onPress: func,
+  disabled: bool
+};

package/lib/components/PhotoAlbum/components/AddAnotherPhotoButton/styles.js

@@ -0,0 +1,29 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { moderateVerticalScale, moderateHorizontalScale } from '../../../../utils/scaleUtils';
+
+const IMAGE_SIZE = (Dimensions.get('window').width - 30) * 0.333333 - 10;
+const styles = StyleSheet.create({
+  container: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    paddingHorizontal: moderateHorizontalScale(10),
+    borderRadius: 5,
+    marginBottom: moderateVerticalScale(10),
+    backgroundColor: '#F7F8F9',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  disabledContainer: {
+    backgroundColor: 'rgba(247, 248, 249, 0.5)'
+  },
+  image: {
+    width: moderateHorizontalScale(48),
+    height: moderateHorizontalScale(48)
+  },
+  imageDisabled: {
+    opacity: 0.5
+  }
+});
+
+export default styles;

package/lib/components/PhotoAlbum/components/DeleteView/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import Icon from '../../../Icon';
+import Label from '../../../Label';
+
+import styles from './styles';
+import propTypes from './propTypes';
+
+const DeleteView = ({ label, color }) => (
+  <View style={styles.buttonContainer}>
+    <Icon name="trash-2" type="feather" size={20} color={color} />
+    <Label color={color}>{label}</Label>
+  </View>
+);
+
+DeleteView.propTypes = propTypes;
+
+export default DeleteView;

package/lib/components/PhotoAlbum/components/DeleteView/propTypes.js

@@ -0,0 +1,6 @@
+import { bool, string, oneOfType } from 'prop-types';
+
+export default {
+  color: oneOfType([bool, string]),
+  label: string
+};

package/lib/components/PhotoAlbum/components/DeleteView/styles.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    alignItems: 'center'
+  }
+});
+
+export default styles;

package/lib/components/PhotoAlbum/components/Photo/index.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { View, Image, TouchableOpacity, Modal, ImageBackground } from 'react-native';
+
+import SvgIconCheck from '../SvgIconCheck';
+import Icon from '../../../Icon';
+import DeleteView from '../DeleteView';
+
+import styles from './styles';
+import propTypes from './propTypes';
+
+const Photo = ({ image, onError, onLongPressImage, selectedImages, deletePhoto, isSelectedMode }) => {
+  const uri = image.uri ?? image;
+  const [fullScreenPhotoModalVisible, setFullScreenPhotoModalVisible] = useState(false);
+
+  const wasTheImagePressed = selectedImages.includes(uri);
+
+  const deletePhotoInModal = () => {
+    setFullScreenPhotoModalVisible(false);
+    deletePhoto(uri);
+  };
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={() => {
+          if (isSelectedMode) {
+            onLongPressImage(uri);
+          } else {
+            setFullScreenPhotoModalVisible(true);
+          }
+        }}
+        onLongPress={() => {
+          onLongPressImage(uri);
+        }}
+      >
+        {wasTheImagePressed ? (
+          <ImageBackground borderRadius={5} source={{ uri }} style={styles.image}>
+            <SvgIconCheck size={24} />
+          </ImageBackground>
+        ) : (
+          <Image onError={onError} source={{ uri }} style={styles.image} />
+        )}
+      </TouchableOpacity>
+      <Modal animationType="fade" visible={fullScreenPhotoModalVisible}>
+        <View style={styles.modalContainer}>
+          <View style={styles.headerContainerModal}>
+            <TouchableOpacity
+              onPress={() => {
+                setFullScreenPhotoModalVisible(!fullScreenPhotoModalVisible);
+              }}
+              style={styles.backButtonHeaderModal}
+            >
+              <Icon name="arrowleft" type="antdesign" size={24} color="white" />
+            </TouchableOpacity>
+          </View>
+          <Image onError={onError} source={{ uri }} style={styles.imageFullScreen} />
+          {deletePhoto && (
+            <TouchableOpacity onPress={deletePhotoInModal} style={styles.footerContainerModal}>
+              <DeleteView label="Eliminar" color="white" />
+            </TouchableOpacity>
+          )}
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+Photo.propTypes = propTypes;
+
+export default Photo;

package/lib/components/PhotoAlbum/components/Photo/propTypes.js

@@ -0,0 +1,10 @@
+import { bool, func, array, any } from 'prop-types';
+
+export default {
+  image: any,
+  onError: func,
+  onLongPressImage: func,
+  selectedImages: array,
+  deletePhoto: func,
+  isSelectedMode: bool
+};

package/lib/components/PhotoAlbum/components/Photo/styles.js

@@ -0,0 +1,53 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { moderateVerticalScale, moderateHorizontalScale } from '../../../../utils/scaleUtils';
+
+const IMAGE_SIZE = (Dimensions.get('window').width - 30) * 0.333333 - 10;
+const styles = StyleSheet.create({
+  image: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    borderRadius: 5,
+    marginBottom: moderateVerticalScale(10)
+  },
+  imageFullScreen: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover'
+  },
+  selectedImageIcon: {
+    position: 'absolute',
+    alignItems: 'flex-start'
+  },
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'space-between'
+  },
+  headerContainerModal: {
+    flexBasis: moderateHorizontalScale(54),
+    backgroundColor: '#3A3A3A',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingLeft: moderateHorizontalScale(15)
+  },
+  backButtonHeaderModal: {
+    width: moderateHorizontalScale(38),
+    height: moderateVerticalScale(38),
+    borderRadius: 50,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  footerContainerModal: {
+    flexBasis: moderateHorizontalScale(57),
+    backgroundColor: '#3A3A3A',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  buttonContainerFooterModal: {
+    alignItems: 'center'
+  }
+});
+
+export default styles;

package/lib/components/PhotoAlbum/components/ReplaceView/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { View, Image } from 'react-native';
+
+import Label from '../../../Label';
+
+import styles from './styles';
+import propTypes from './propTypes';
+
+const ReplaceView = ({ label, color, sourceEditImage }) => (
+  <View style={styles.buttonContainer}>
+    <Image source={sourceEditImage} style={styles.image} />
+    <Label color={color}>{label}</Label>
+  </View>
+);
+
+ReplaceView.propTypes = propTypes;
+
+export default ReplaceView;

package/lib/components/PhotoAlbum/components/ReplaceView/propTypes.js

@@ -0,0 +1,6 @@
+import { bool, string, oneOfType } from 'prop-types';
+
+export default {
+  color: oneOfType([bool, string]),
+  label: string
+};

package/lib/components/PhotoAlbum/components/ReplaceView/styles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+
+import { moderateHorizontalScale, moderateVerticalScale } from '../../../../utils/scaleUtils';
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    alignItems: 'center'
+  },
+  image: {
+    width: moderateHorizontalScale(24),
+    height: moderateVerticalScale(24)
+  }
+});
+
+export default styles;

package/lib/components/PhotoAlbum/components/SvgIconCheck/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import Icon from '../../../Icon';
+
+import { styles, colorIcon } from './styles';
+import propTypes from './propTypes';
+
+const SvgIconCheck = ({ size }) => (
+  <View style={styles(size).backgroundIcon}>
+    <Icon color={colorIcon} name="check" size={16} />
+  </View>
+);
+
+SvgIconCheck.propTypes = propTypes;
+
+export default SvgIconCheck;

package/lib/components/PhotoAlbum/components/SvgIconCheck/propTypes.js

@@ -0,0 +1,5 @@
+import { number } from 'prop-types';
+
+export default {
+  size: number
+};

package/lib/components/PhotoAlbum/components/SvgIconCheck/styles.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+
+import { moderateVerticalScale } from '../../../../utils/scaleUtils';
+
+export const styles = size =>
+  StyleSheet.create({
+    backgroundIcon: {
+      margin: moderateVerticalScale(10),
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: '#4D98FA',
+      borderRadius: 1000,
+      width: size,
+      height: size
+    }
+  });
+
+export const colorIcon = 'white';

package/lib/components/PhotoAlbum/index.js

@@ -0,0 +1,168 @@
+import React, { Fragment, useEffect, useState } from 'react';
+// eslint-disable-next-line react-native/split-platform-components
+import { View, TouchableOpacity, PermissionsAndroid } from 'react-native';
+// eslint-disable-next-line import/no-unresolved
+import { launchCamera } from 'react-native-image-picker';
+
+import Label from '../Label';
+import Portal from '../Portal';
+
+import AddAnotherPhotoButton from './components/AddAnotherPhotoButton';
+import DeleteView from './components/DeleteView';
+import ReplaceView from './components/ReplaceView';
+import Photo from './components/Photo';
+import styles from './styles';
+import propTypes from './propTypes';
+
+const PhotoAlbum = ({
+  images,
+  selectedImages,
+  setSelectedImages,
+  deletePhoto,
+  selectedMode,
+  isItPossibleToAddAnotherPhoto,
+  onPressAddAnotherPhoto,
+  onError,
+  title,
+  subTitle,
+  onUnknownCameraError,
+  numberOfPhotosInTheAlbumHasExceeded,
+  isOnlyOnePicture,
+  sourceCameraImage,
+  sourceEditImage,
+  messageErrorPermissionCamera
+}) => {
+  const requestPermission = async () => {
+    const permissionsResponse = await PermissionsAndroid.requestMultiple([
+      PermissionsAndroid.PERMISSIONS.CAMERA,
+      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
+    ]);
+
+    const granted =
+      permissionsResponse[PermissionsAndroid.PERMISSIONS.CAMERA] === 'granted' &&
+      permissionsResponse[PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE] === 'granted';
+
+    if (!granted) {
+      throw messageErrorPermissionCamera;
+    }
+  };
+
+  const [isSelectedMode, setIsSelectedMode] = useState(false);
+  const onLongPressImage = uri => {
+    if (selectedImages.includes(uri)) {
+      setSelectedImages(selectedImages.filter(aPicUri => aPicUri !== uri));
+    } else {
+      setSelectedImages([...selectedImages, uri]);
+    }
+  };
+  const deleteSelectedPhotos = () => {
+    deletePhoto();
+  };
+
+  const openCamera = async () => {
+    await requestPermission();
+
+    const response = await launchCamera({});
+    const { didCancel, errorCode, errorMessage, assets } = response;
+    if (didCancel || errorCode) {
+      if (errorCode) {
+        onUnknownCameraError(`[${errorCode}] : ${errorMessage}`);
+      }
+    } else {
+      const { uri } = assets[0];
+      onPressAddAnotherPhoto({ newImage: { uri }, numberOfPhotosInTheAlbumHasExceeded });
+    }
+  };
+
+  const isDivisibleInModuleOfThree = () => {
+    const numberOfObjectsInView = isItPossibleToAddAnotherPhoto ? images.length + 1 : images.length;
+    return numberOfObjectsInView % 3 !== 0;
+  };
+
+  const cameraOnPress = () =>
+    openCamera().catch(error => {
+      if (typeof error === 'string') {
+        onError(error);
+      } else {
+        onUnknownCameraError(error);
+      }
+    });
+
+  const onPressAddAnotherPhotoButton = deleteSelectedImages => {
+    if (deleteSelectedImages) {
+      setSelectedImages([]);
+    }
+    cameraOnPress();
+  };
+
+  useEffect(() => {
+    if (selectedImages.length > 0) {
+      setIsSelectedMode(true);
+    } else {
+      setIsSelectedMode(false);
+    }
+  }, [selectedImages]);
+
+  return (
+    <Fragment>
+      {title && (
+        <Label big semiBold color="#666666" style={styles.title}>
+          {title}
+        </Label>
+      )}
+      {subTitle && (
+        <Label color="#3A3A3A" style={styles.subTitle}>
+          {subTitle}
+        </Label>
+      )}
+      <View style={styles.container}>
+        {images.length !== 0 &&
+          images.map(image => (
+            <Photo
+              key={image.uri ?? image}
+              image={image}
+              onLongPressImage={onLongPressImage}
+              selectedImages={selectedImages}
+              deletePhoto={deletePhoto}
+              isSelectedMode={isSelectedMode}
+              onError={onError}
+            />
+          ))}
+        {isItPossibleToAddAnotherPhoto && (
+          <AddAnotherPhotoButton
+            onPress={onPressAddAnotherPhotoButton}
+            disabled={numberOfPhotosInTheAlbumHasExceeded}
+            sourceCameraImage={sourceCameraImage}
+          />
+        )}
+        {isDivisibleInModuleOfThree() && <View style={styles.image} />}
+        {selectedMode && isSelectedMode && (
+          <Portal>
+            <View style={styles.selectedModeContainer}>
+              <View style={styles.selectionLabelContainer}>
+                <Label color="white">{`${selectedImages.length} selección`}</Label>
+              </View>
+              <View style={styles.buttonsContainer}>
+                {isOnlyOnePicture && (
+                  <TouchableOpacity
+                    onPress={() => onPressAddAnotherPhotoButton(numberOfPhotosInTheAlbumHasExceeded)}
+                    style={styles.deleteSelectedPhotos}
+                  >
+                    <ReplaceView label="Remplazar" color="#3A3A3A" sourceEditImage={sourceEditImage} />
+                  </TouchableOpacity>
+                )}
+                <TouchableOpacity onPress={deleteSelectedPhotos} style={styles.deleteSelectedPhotos}>
+                  <DeleteView label="Eliminar" color="#3A3A3A" />
+                </TouchableOpacity>
+              </View>
+            </View>
+          </Portal>
+        )}
+      </View>
+    </Fragment>
+  );
+};
+
+PhotoAlbum.propTypes = propTypes;
+
+export default PhotoAlbum;

package/lib/components/PhotoAlbum/propTypes.js

@@ -0,0 +1,17 @@
+import { bool, string, func, array } from 'prop-types';
+
+export default {
+  images: array,
+  selectedImages: array,
+  setSelectedImages: func,
+  deletePhoto: func,
+  selectedMode: bool,
+  isItPossibleToAddAnotherPhoto: bool,
+  onPressAddAnotherPhoto: func,
+  onError: func,
+  title: string,
+  subTitle: string,
+  onUnknownCameraError: func,
+  numberOfPhotosInTheAlbumHasExceeded: bool,
+  isOnlyOnePicture: bool
+};

package/lib/components/PhotoAlbum/styles.js

@@ -0,0 +1,51 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { moderateHorizontalScale, moderateVerticalScale, WINDOW_WIDTH } from '../../utils/scaleUtils';
+
+const IMAGE_SIZE = (Dimensions.get('window').width - 30) * 0.333333 - 10;
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    paddingHorizontal: moderateHorizontalScale(5)
+  },
+  selectedModeContainer: {
+    width: WINDOW_WIDTH,
+    position: 'absolute',
+    bottom: 0
+  },
+  selectionLabelContainer: {
+    height: moderateVerticalScale(27),
+    alignItems: 'center',
+    backgroundColor: '#4D98FA'
+  },
+  buttonsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    backgroundColor: '#E4E6EA',
+    paddingHorizontal: 60
+  },
+  deleteSelectedPhotos: {
+    height: moderateVerticalScale(58),
+    justifyContent: 'center'
+  },
+  title: {
+    marginBottom: moderateVerticalScale(10),
+    paddingHorizontal: moderateHorizontalScale(5)
+  },
+  subTitle: {
+    marginBottom: moderateVerticalScale(5),
+    paddingHorizontal: moderateHorizontalScale(5)
+  },
+  image: {
+    width: IMAGE_SIZE,
+    height: IMAGE_SIZE,
+    borderRadius: 5,
+    marginBottom: moderateVerticalScale(10),
+    paddingHorizontal: moderateHorizontalScale(10)
+  }
+});
+
+export default styles;

package/lib/components/RadioGroup/components/RadioButton/index.js

@@ -1,7 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { View, ViewPropTypes } from 'react-native';
 import PropTypes from 'prop-types';
 
+import SeparatorBar from '../../../SeparatorBar';
 import Touchable from '../../../Touchable';
 import Icon from '../../../Icon';
 import Label from '../../../Label';
@@ -18,37 +19,64 @@ class RadioButton extends Component {
   // TODO: labelComponent is a patch to allow to use tooltips next to radio button label.Change this when mobile-ui has its own tooltip component
 
   render() {
-    const { status, style, label, labelValue, sublabel, theme, labelComponent } = this.props;
+    const {
+      status,
+      style,
+      label,
+      labelValue,
+      sublabel,
+      theme,
+      labelComponent,
+      descriptionComponent,
+      showSeparatorBar
+    } = this.props;
     return (
-      <Touchable onPress={this.handlePress}>
-        <View style={[styles.container, style]}>
-          <Icon
-            name={status ? RADIO_CHECKED_ICON : RADIO_UNCHECKED_ICON}
-            color={status ? theme.colors.primary : theme.colors.disabled}
-            style={styles.iconSpacing}
-          />
-          <View style={styles.labelsContainer}>
-            <View>
-              <View style={[styles.label, labelComponent && styles.labelComponent]}>
-                <Label small bold={status} primary={status}>
-                  {label}
-                </Label>
-                {labelComponent}
+      <Fragment>
+        <Touchable onPress={this.handlePress}>
+          <View style={[styles.container, style]}>
+            {descriptionComponent ? (
+              <View style={styles.descriptionComponentContainer}>
+                {descriptionComponent}
+                <Icon
+                  name={status ? RADIO_CHECKED_ICON : RADIO_UNCHECKED_ICON}
+                  color={theme.colors.primary}
+                  style={styles.iconSpacing}
+                  size={20}
+                />
               </View>
-              {(sublabel || sublabel === 0) && (
-                <Label disabled xsmall bold={status}>
-                  {sublabel}
-                </Label>
-              )}
-            </View>
+            ) : (
+              <Fragment>
+                <Icon
+                  name={status ? RADIO_CHECKED_ICON : RADIO_UNCHECKED_ICON}
+                  color={status ? theme.colors.primary : theme.colors.disabled}
+                  style={styles.iconSpacing}
+                />
+                <View style={styles.labelsContainer}>
+                  <View>
+                    <View style={[styles.label, labelComponent && styles.labelComponent]}>
+                      <Label small bold={status} primary={status}>
+                        {label}
+                      </Label>
+                      {labelComponent}
+                    </View>
+                    {(sublabel || sublabel === 0) && (
+                      <Label disabled xsmall bold={status}>
+                        {sublabel}
+                      </Label>
+                    )}
+                  </View>
+                </View>
+                {labelValue && (
+                  <Label bold={status} primary={status} small>
+                    {labelValue}
+                  </Label>
+                )}
+              </Fragment>
+            )}
           </View>
-          {labelValue && (
-            <Label bold={status} primary={status} small>
-              {labelValue}
-            </Label>
-          )}
-        </View>
-      </Touchable>
+        </Touchable>
+        {showSeparatorBar && <SeparatorBar />}
+      </Fragment>
     );
   }
 }
@@ -65,7 +93,9 @@ RadioButton.propTypes = {
     sublabel: PropTypes.string
   }),
   theme: themeType,
-  labelComponent: PropTypes.node
+  labelComponent: PropTypes.node,
+  descriptionComponent: PropTypes.node,
+  showSeparatorBar: PropTypes.bool
 };
 
 export default withTheme(RadioButton);

package/lib/components/RadioGroup/components/RadioButton/styles.js

@@ -23,5 +23,11 @@ export default StyleSheet.create({
   },
   labelComponent: {
     width: '90%'
+  },
+  descriptionComponentContainer: {
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%'
   }
 });

package/lib/components/RadioGroup/index.js

@@ -26,6 +26,8 @@ class RadioGroup extends Component {
         sublabel={option.sublabel}
         onPress={this.handleOptionSelected}
         status={selectedOption === option[keyField]}
+        descriptionComponent={option?.Component}
+        showSeparatorBar={option?.showSeparatorBar}
         {...radioProps}
       />
     );

package/lib/index.js

@@ -69,3 +69,7 @@ export { default as withLoading } from './components/WithLoading';
 // Hooks
 export { default as useEffectOnlyOnUpdates } from './hooks/useEffectOnlyOnUpdates';
 export { default as useTogglableState } from './hooks/useTogglableState';
+
+// Photo
+export { default as PhotoAlbum } from './components/PhotoAlbum';
+export { default as Capture } from './components/Capture';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "0.33.0",
+  "version": "0.34.2",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [