Skip to content
Permalink
Browse files

Added isCustomViewBottom Prop (#1298)

* Update README.md

* added customViewPosition prop

Allows user to determine whether the CustomView is rendered before custom image, video  and/or text.

* added customViewPosition prop

['top' or 'bottom']

* Added customViewPosition prop

* added customViewPosition to interface

* added renderCustomViewBottom boolean

changed customViewPosition (string) to renderCustomViewBottom (boolean)

* added renderCustomViewBottom boolean

changed customViewPosition (string) to renderCustomViewBottom (boolean)

* added renderCustomViewBottom boolean

changed customViewPosition (string) to renderCustomViewBottom (boolean)

* feature  isCustomViewBottom prop
  • Loading branch information...
Lsleiman authored and xcarpentier committed Jul 10, 2019
1 parent c2df2f7 commit e6aa87d6a14b228378e2fb4ddccd9ce98d7d2546
Showing with 26 additions and 4 deletions.
  1. +1 −0 README.md
  2. +20 −4 src/Bubble.tsx
  3. +5 −0 src/GiftedChat.tsx
@@ -298,6 +298,7 @@ interface QuickReplies {
- **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://facebook.github.io/react-native/docs/image.html) component created by the default `renderMessageImage`
- **`videoProps`** _(Object)_ - Extra props to be passed to the [`<Video>`](https://github.com/react-native-community/react-native-video) component created by the default `renderMessageVideo`
- **`lightboxProps`** _(Object)_ - Extra props to be passed to the `MessageImage`'s [Lightbox](https://github.com/oblador/react-native-lightbox)
- **`isCustomViewBottom`** _(Bool)_ - Determine wether renderCustomView is displayed before or after the text, image and video views; default is `false`
- **`renderCustomView`** _(Function)_ - Custom view inside the bubble
- **`renderDay`** _(Function)_ - Custom day above a message
- **`renderTime`** _(Function)_ - Custom time inside a message
@@ -119,6 +119,7 @@ export interface BubbleProps<TMessage extends IMessage> {
user?: User
touchableProps?: object
renderUsernameOnMessage?: boolean
isCustomViewBottom?: boolean
position: 'left' | 'right'
currentMessage?: TMessage
nextMessage?: TMessage
@@ -194,6 +195,7 @@ export default class Bubble<
renderMessageVideo: PropTypes.func,
renderMessageText: PropTypes.func,
renderCustomView: PropTypes.func,
isCustomViewBottom: PropTypes.bool,
renderUsernameOnMessage: PropTypes.bool,
renderUsername: PropTypes.func,
renderTime: PropTypes.func,
@@ -436,6 +438,23 @@ export default class Bubble<
return null
}

renderBubbleContent() {
return this.props.isCustomViewBottom ?
<View>
{this.renderMessageImage()}
{this.renderMessageVideo()}
{this.renderMessageText()}
{this.renderCustomView()}
</View>
:
<View>
{this.renderCustomView()}
{this.renderMessageImage()}
{this.renderMessageVideo()}
{this.renderMessageText()}
</View>
}

render() {
const {
position,
@@ -464,10 +483,7 @@ export default class Bubble<
{...this.props.touchableProps}
>
<View>
{this.renderCustomView()}
{this.renderMessageImage()}
{this.renderMessageVideo()}
{this.renderMessageText()}
{this.renderBubbleContent()}
<View
style={[
styles[position].bottom,
@@ -104,6 +104,8 @@ export interface GiftedChatProps<TMessage extends IMessage = IMessage> {
options?: { [key: string]: any }
optionTintColor?: string
quickReplyStyle?: StyleProp<ViewStyle>
/* optional prop used to place customView below text, image and video views; default is false */
isCustomViewBottom?: boolean
/* Callback when a message avatar is tapped */
onPressAvatar?(user: User): void
/* Generate an id for new messages. Defaults to UUID v4, generated by uuid */
@@ -204,6 +206,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
onPressAvatar: null,
renderUsernameOnMessage: false,
renderAvatarOnTop: false,
isCustomViewBottom: false,
renderBubble: null,
renderSystemMessage: null,
onLongPress: null,
@@ -216,6 +219,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
textInputProps: {},
listViewProps: {},
renderCustomView: null,
isCustomViewBottom: false,
renderDay: null,
renderTime: null,
renderFooter: null,
@@ -263,6 +267,7 @@ class GiftedChat<TMessage extends IMessage = IMessage> extends React.Component<
onPressAvatar: PropTypes.func,
renderUsernameOnMessage: PropTypes.bool,
renderAvatarOnTop: PropTypes.bool,
isCustomViewBottom: PropTypes.bool,
renderBubble: PropTypes.func,
renderSystemMessage: PropTypes.func,
onLongPress: PropTypes.func,

0 comments on commit e6aa87d

Please sign in to comment.
You can’t perform that action at this time.