Enhancement Image Background

[fred-bowker]

I can't find a current way to set an image background to be the background of the message view, pretty sure this would be simple enough to implement and I think it would be part of the .chatTheme(
ChatTheme(

I'm happy to have a go at making the change and putting up a pull request but want to check to see if there is already a way of doing this and I'm just missing something.

[btoms20]

Hey @fred-bowker, you could set the ChatThemes mainBG to .clear and place an Image in the ChatViews .background() modifier.

ChatView( ... )
    .chatTheme(colors: .init(mainBG: .clear))
    .background { AsyncImage(url: URL(string: "https://...")) }

Let me know if that lets you achieve the effect you're after.

[fred-bowker]

Hi @btoms20, this is working, the only issue is that when the keyboard appears, it squashes the background up. The chat looks pretty good with a background included, I'll put up a pull request with the backgrounds included on one of the examples, I think this would be useful to other people.

[btoms20]

Hey @fred-bowker, I'm not by my computer at the moment, so I don't know the correct syntax but you could prevent the squishing of the Image by either placing the AsyncImage behind the ChatView in its own element or by applying an .ignoresSafeArea(.keyboard) modifier to the AsyncImage? Hope that helps 👍

[fred-bowker]

Hi @btoms20 that works great thanks, I'll maybe put a pull request up for including this as an option in .chatTheme(, and add it to an example. I have a fairly large pull request up for adding giphy functionality, so I'll wait till that get's reviewed and merged first