diff --git a/react/features/base/react/components/native/NavigateSectionListItem.js b/react/features/base/react/components/native/NavigateSectionListItem.js index 7dc6d0be2..e5a09ac5d 100644 --- a/react/features/base/react/components/native/NavigateSectionListItem.js +++ b/react/features/base/react/components/native/NavigateSectionListItem.js @@ -8,6 +8,7 @@ import { ColorPalette } from '../../../styles'; import type { Item } from '../../Types'; import AvatarListItem from './AvatarListItem'; +import Container from './Container'; import Text from './Text'; import styles from './styles'; @@ -92,6 +93,24 @@ export default class NavigateSectionListItem extends Component { return lines && lines.length ? lines.map(this._renderItemLine) : null; } + /** + * Renders the secondary action label. + * + * @private + * @returns {React$Node} + */ + _renderSecondaryAction() { + const { secondaryAction } = this.props; + + return ( + + + + + ); + } + /** * Renders the content of this component. * @@ -124,7 +143,10 @@ export default class NavigateSectionListItem extends Component { right = { right }> + onPress = { this.props.onPress } > + { this.props.secondaryAction + && this._renderSecondaryAction() } + ); } diff --git a/react/features/base/react/components/native/styles.js b/react/features/base/react/components/native/styles.js index 4e28e140b..ecde2e22e 100644 --- a/react/features/base/react/components/native/styles.js +++ b/react/features/base/react/components/native/styles.js @@ -3,6 +3,7 @@ import { BoxModel, ColorPalette, createStyleSheet } from '../../../styles'; const OVERLAY_FONT_COLOR = 'rgba(255, 255, 255, 0.6)'; +const SECONDARY_ACTION_BUTTON_SIZE = 30; export const AVATAR_SIZE = 65; export const UNDERLAY_COLOR = 'rgba(255, 255, 255, 0.2)'; @@ -182,6 +183,21 @@ const SECTION_LIST_STYLES = { color: OVERLAY_FONT_COLOR }, + secondaryActionContainer: { + alignItems: 'center', + backgroundColor: ColorPalette.blue, + borderRadius: 3, + height: SECONDARY_ACTION_BUTTON_SIZE, + justifyContent: 'center', + margin: BoxModel.margin * 0.5, + marginRight: BoxModel.margin, + width: SECONDARY_ACTION_BUTTON_SIZE + }, + + secondaryActionLabel: { + color: ColorPalette.white + }, + touchableView: { flexDirection: 'row' }