Suggestions: renderUsernamePosition = top | bottom in gifted chat

[mirzahayat]

kindly Add the key Params the renderUsernamePosition = top | bottom Need to follow these Steps: 1: first edit Bubble.d.ts file and add props,

 export interface BubbleProps<TMessage extends IMessage> {
...other props,
    renderUsernamePosition: 'top' | 'bottom';
}
export default class Bubble<TMessage extends IMessage = IMessage> extends React.Component<BubbleProps<TMessage>> {
    static contextTypes: {
        actionSheet: PropTypes.Requireable<(...args: any[]) => any>;
    };
    static defaultProps: {
          ...other props,
        renderUsernamePosition: string
    };
    static propTypes: {
      ...other props,
        renderUsernamePosition: PropTypes.Requireable<string>;
}

2: Second Step edit Bubble.js file

  render() {
        const { position, containerStyle, wrapperStyle, bottomContainerStyle,renderUsernamePosition } = this.props;
        return (<View style={[
            styles[position].container,
            containerStyle && containerStyle[position],
        ]}>
        <View style={[
            styles[position].wrapper,
            this.styledBubbleToNext(),
            this.styledBubbleToPrevious(),
            wrapperStyle && wrapperStyle[position],
        ]}>
          <TouchableWithoutFeedback onLongPress={this.onLongPress} accessibilityTraits='text' {...this.props.touchableProps}>
            <View>
            {renderUsernamePosition ===  'top'  && this.renderUsername()}       /// add this line for top render
              {this.renderBubbleContent()}
              <View style={[
            styles[position].bottom,
            bottomContainerStyle && bottomContainerStyle[position],
        ]}>
         {renderUsernamePosition === 'bottom'  && this.renderUsername()}      /// add this line for bottom render
                {this.renderTime()}
                {this.renderTicks()}
              </View>
            </View>
          </TouchableWithoutFeedback>
        </View>
        {this.renderQuickReplies()}
      </View>);
    }
}