iosobjective-cfirebasejsqmessagesviewcontroller

JSQMessagesViewController Not showing Bubble Image in Chat


Not Showing Bubble Image with Messages

my project in objective-c use JSQMessagesViewController for firebase chat, but bubble images not comes with messages. JSQMessagesViewController and Firbase integrated via Pods.

Please help me.


Solution

  • Create method initialise the color for sender and receiver like the code below :

      - (JSQMessagesBubbleImage *) setupOutgoingBubble {
        JSQMessagesBubbleImageFactory *bubbleImageFactory = [[JSQMessagesBubbleImageFactory alloc] init];
        JSQMessagesBubbleImage * imgBubble = [bubbleImageFactory outgoingMessagesBubbleImageWithColor:[UIColor blueColor]];//jsq_messageBubbleBlueColor return imgBubble;
        return imgBubble;
    }
    
    - (JSQMessagesBubbleImage *) setupIncomingBubble {
        JSQMessagesBubbleImageFactory *bubbleImageFactory = [[JSQMessagesBubbleImageFactory alloc] init];
        JSQMessagesBubbleImage * imgBubble = [bubbleImageFactory outgoingMessagesBubbleImageWithColor:[UIColor greenColor]];//jsq_messageBubbleBlueColor return imgBubble;
        return imgBubble;
    }
    
    
    
    
    - (void)setupBubbleColors {
        self.incomingBubbleImageData = [self setupIncomingBubble];
        self.outgoingBubbleImageData = [self setupOutgoingBubble];
    }
    

    And call above method in viewDidLoad like below

    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
        [self setupBubbleColors];
    
    }
    

    And id JSQMessageBubbleImageDataSource delegate return appropriate image like below

    - (id<JSQMessageBubbleImageDataSource>)collectionView:(JSQMessagesCollectionView *)collectionView
                 messageBubbleImageDataForItemAtIndexPath:(NSIndexPath *)indexPath {
        Message *message = [_messages objectAtIndex:indexPath.row];
        NSLog(@"%@", message.type);
        if(message.isOwnMessageValue) {
            return self.outgoingBubbleImageData;
        }
        else return self.incomingBubbleImageData;
    }
    

    The output will be like below

    enter image description here