Messagekit: Message Collection View Constraints

[mredig]

Describe the bug
Messages will appear and disappear while still on screen behind the navigation bar.

Looking at the code (in MessagesViewController), I see that both the messages collection view is using the safe area to pin its edges and that messagesCollectionView.contentInsetAdjustmentBehavior = .never is set - This is obviously deliberate, so I didn't want to open a pull request without first discussing it. However, because Apple has the functionality built in so that you can pin to the superview edges and the content inset will automatically adjust to accommodate the safe area insets, this flashy/glitchy appearing behavior can be eliminated.

To Reproduce
Steps/code to reproduce the behavior:
This is easy enough to replicate in the example app just by commenting out the navigation bar styling in NavigationController and scrolling in the basic example.

(note that it's significantly harder to see the issue in light mode, but it's definitely there):

    override func viewDidLoad() {
        super.viewDidLoad()
//        navigationBar.isTranslucent = true
//        navigationBar.tintColor = .white
//        navigationBar.barTintColor = .primaryColor
//        navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
//        navigationBar.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
//        navigationBar.shadowImage = UIImage()
//        navigationBar.setBackgroundImage(UIImage(), for: .default)
        view.backgroundColor = .primaryColor
    }

    func setAppearanceStyle(to style: UIStatusBarStyle) {
//        if style == .default {
//            navigationBar.shadowImage = UIImage()
//            navigationBar.barTintColor = .primaryColor
//            navigationBar.tintColor = .white
//            navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
//            navigationBar.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
//        } else if style == .lightContent {
//            navigationBar.shadowImage = nil
//            navigationBar.barTintColor = .white
//            navigationBar.tintColor = UIColor(red: 0, green: 0.5, blue: 1, alpha: 1)
//            navigationBar.titleTextAttributes = [.foregroundColor: UIColor.black]
//            navigationBar.largeTitleTextAttributes = [.foregroundColor: UIColor.black]
//        }
    }

Expected behavior
The collection view content should scroll all the way OFF the edge of the screen prior to being dequeued and disappearing from the view hierarchy.

Screenshots
This is not the sample app, but it clearly demonstrates the issue.

https://user-images.githubusercontent.com/6509485/106163892-16eeee00-614f-11eb-9251-53e94deaaaeb.mp4

Environment

• What version of MessageKit are you using? 3.5.0
• What version of iOS are you running on? 14.2
• What version of Swift are you running on? 5.3.2
• What device(s) are you testing on? Are these simulators? Primarily tested and demonstrated on the simulator, but also ran on device (iPhone 8) and confirmed the issue is persistent.
• Is the issue you're experiencing reproducible in the example app? yes - see above

Additional context
I am completely willing to open the PR to resolve this issue, but I'd like to confirm we are all on the same page prior to doing so. :)

[vitys96]

I had a similar bug
https://github.com/MessageKit/MessageKit/issues/1527

[yarodevuci]

any solution ? @mredig

[mredig]

I'm still waiting to find out if/why the insets were toggled off as it COULD have ramifications on existing uses that I haven't considered. That said, I could try to find time to open a PR soon.

[yarodevuci]

@mredig are you using IQKeyboardManager in your app?

[anilsozeri]

I have the same problem and solved with this code block;

if let chatViewController = parent as? ChatViewController { chatViewController.navigationBarView.layer.zPosition = 1 }

I have ConversationViewController which is inherited from the MessageKit.MessagesViewController and I added as a child view controller into ChatViewController

This code block is solved my problem, you can try too.

[mredig]

if let chatViewController = parent as? ChatViewController { chatViewController.navigationBarView.layer.zPosition = 1 }

This would be adjusting the zposition of nav bar layer. I'm confident it will just hide the fact that the messages are disappearing before going off screen. The whole point of the visual effect view in the nav bar is that it is semi translucent, allowing you to see behind.

@mredig are you using IQKeyboardManager in your app?

Nope.

any solution ? @mredig

yes - the solution is to not pin to safe areas and set messagesCollectionView.contentInsetAdjustmentBehavior = .automatic, but as I said originally, I don't know the reason this was done the way it was. However, enough time has passed and no one has said why, so I'll try to open a PR soon.

[mredig]

https://user-images.githubusercontent.com/6509485/109898835-795d7180-7c5a-11eb-825b-a68905489280.mp4

Note the smoothness of the animation underneath the navigation header compared to the first video.

[yarodevuci]

Simulator.Screen.Recording.-.iPhone.12.Pro.-.2021-03-03.19.46.48.mp4
Note the smoothness of the animation underneath the navigation header compared to the first video.

Your video is not playing @mredig

[mredig]

Well that's weird - for once something is working in safari but not other browsers. Lemme try again...

[mredig]

https://user-images.githubusercontent.com/6509485/109900506-1ae5c280-7c5d-11eb-8983-0508d41808ff.mp4

This one works for me in both Firefox and safari now. The last one was HEVC I think, so I wonder if non safari browsers don't support that yet?

[fukemy]

hi @mredig did u solved this? same problem

[mredig]

hi @mredig did u solved this? same problem

I made a PR and I believe it was approved and merged into master, so if it's still happening it's likely you're running into another variant of the same issue or haven't pulled the latest code from master.

[Kaspik]

It was part of the 3.5.1 release.

[fukemy]

Thanks @mredig and @Kaspik , i tried to set

pod 'MessageKit', '~> 3.5.1'

but got this error

[!] CocoaPods could not find compatible versions for pod "MessageKit":
  In Podfile:
    MessageKit (~> 3.5.1)

Specs satisfying the `MessageKit (~> 3.5.1)` dependency were found, but they required a higher minimum deployment target.

even i runned this command

pod repo update

checked swift version in Terminal

swift -version
Apple Swift version 5.3.2 (swiftlang-1200.0.45 clang-1200.0.32.28)
Target: arm64-apple-darwin20.2.0

[Kaspik]

Starting 3.3.0 we support only iOS 12+, what is your minimum SDK?

[fukemy]

thanks, i change to 12+ then now pod run success

[fukemy]

after success install pod, i run project and got this error

Fatal error: MessageKit: Could not load the color asset.: file MessageKit/UIColor+Extensions.swift, line 32

i tried to remove pod messageKit and re-install again, but no luck, can u help? Thanks in advance

[Kaspik]

Duplicate of https://github.com/MessageKit/MessageKit/issues/1564, please either use SPM, or wait for release tomorrow.

[fukemy]

hi, tried new version but to problem still there, can you help?

[mredig]

That appears to be a different issue to me. Your navigation bar is transparent somehow. You'll need to change its style or undo any direct properties you've edited in it.

[fukemy]

Well, that's big problem to me. I just want to show collectionView's content below navigationBar(just make my app more beautiful)
I tried to find anything that related to collectionView setting, suck as contentInset, constraint.... but no luck
Im really sorry for all my above silly question :(

[Kaspik]

I have no idea what are you trying to achieve but your screenshot shows correct behavior how it works with translucent navigation bar, no bug on our side. :)

[fukemy]

ok after 1 week i found the problem is so simple, just wrap CollectionView in other view, then set clipToBound = true

[mredig]

If you don't care for the translucent blur in the navigation bar, you should be able to set clips to bounds directly on the collection view without needing to embed in another.

[fukemy]

LULL HOW IDIOT I AM...... im thought set the clipToBounds property to collectionView, but only set to view :(, thanks so much