jsqmessagesviewcontroller inputToolBar IOS 11 iphone X Swift4

Question

I know that this library is already deprecated, but has anyone fixed the problem with the inputToolBar and iPhone X? Currently the inputToolBar is partially covered.Check out the attached image.

Thanks in advance

Possible duplicate of [jsqmessageviewcontroller ios11 toolbar](https://stackoverflow.com/questions/46439975/jsqmessageviewcontroller-ios11-toolbar) — Tore Olsen, Oct 24 '17 at 07:44
@ToreOlsen I see that you gave an answer in Objective C. Could you possibly give your answer in Swift? I tried this statement: NSLayoutConstraint *constraint = [self performSelector:@selector(toolbarBottomLayoutGuide)]; translating it to Swift but didn't work. Thanks in advance! — Sami Ali, Oct 24 '17 at 08:36
I'm currently working on the solution I gave in that answer, as it did not solve all problems, and the new approach possibly uses swizzling which may not be possible using Swift… I'll keep that in mind when I get around to updating the answer. — Tore Olsen, Oct 24 '17 at 11:34

score 19 · Answer 1 · edited May 25 '18 at 16:25

19

In case you don't want to change the code in the pod and use are more swifty-like extension you can use the following code:

extension JSQMessagesInputToolbar {
    override open func didMoveToWindow() {
        super.didMoveToWindow()
        guard let window = window else { return }
        if #available(iOS 11.0, *) {
            let anchor = window.safeAreaLayoutGuide.bottomAnchor
            bottomAnchor.constraintLessThanOrEqualToSystemSpacingBelow(anchor, multiplier: 1.0).isActive = true
        }
    }
}

edited May 25 '18 at 16:25

Simon Bengtsson

7,573
3
58
87

answered Oct 27 '17 at 08:58

J-Bossi

542
6
12

5

`Static member 'activate' cannot be used on instance of type 'NSLayoutConstraint'` error accured. Replace with `.isActive = true` – Nike Kov Nov 24 '17 at 11:39
Smart answer, you saved me. Thanks :) – steveSarsawa Jan 24 '22 at 08:56

score 13 · Answer 2 · answered Oct 25 '17 at 22:56

Updated Samson's answer because it would crash when I left the screen. Checked to make sure it was not nil before setting the constraint.

-(void) didMoveToWindow{
    [super didMoveToWindow];
    if (@available(iOS 11.0, *)) {

        UILayoutGuide *layoutGuide = self.window.safeAreaLayoutGuide;

        if (layoutGuide != nil){
           [[self bottomAnchor] constraintLessThanOrEqualToSystemSpacingBelowAnchor:layoutGuide.bottomAnchor multiplier:1.0].active = YES;
        }

    }
}

score 8 · Accepted Answer · answered Oct 25 '17 at 02:50

8

Guys I am the one asking jsqmessageviewcontroller ios11 toolbar and I have figured it out!

Just put the following code in the JSQMessagesInputToolbar.m. It seems that the inputtoolbar is placed in its own window, you need to access its window separately.

-(void) didMoveToWindow{
[super didMoveToWindow];
 if (@available(iOS 11.0, *)) {
     [[self bottomAnchor] constraintLessThanOrEqualToSystemSpacingBelowAnchor:self.window.safeAreaLayoutGuide.bottomAnchor multiplier:1.0].active = YES;
     }
}

answered Oct 25 '17 at 02:50

Samson Wong

226
2
10

1

Thanks, Samson Wong! That worked for me. Although, there is a bunch of logs about breaking the constraints. Also, I had a null pointer error when I was exiting the chat view. It turned out that self.window.safeAreaLayoutGuide was nil in exiting the view. So just put an If statement checking if it's nil. – Sami Ali Oct 25 '17 at 09:57
please mark it as solution if it solves the question :) – Samson Wong Oct 25 '17 at 10:17

score 5 · Answer 4 · answered Dec 14 '17 at 10:00

I think this is should be a better way to solve this problem by following steps:
1. Open JSQMessagesViewController.xib
2. Drag down the collection view's bottom layout constraint into JSQMessagesViewController.m named collectionViewBottomLayoutGuide.
3. Add this code to the bottom of JSQMessagesViewController.m.

- (void)viewSafeAreaInsetsDidChange {
    [super viewSafeAreaInsetsDidChange];
    self.toolbarBottomLayoutGuide.active = NO;
    self.toolbarBottomLayoutGuide = [NSLayoutConstraint constraintWithItem:self.view.safeAreaLayoutGuide attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.inputToolbar attribute:NSLayoutAttributeBottom multiplier:1.0f constant:0.0f];
    self.toolbarBottomLayoutGuide.active = YES;
    self.collectionViewBottomLayoutGuide.active = NO;
    self.collectionViewBottomLayoutGuide = [NSLayoutConstraint constraintWithItem:self.view.safeAreaLayoutGuide attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.collectionView attribute:NSLayoutAttributeBottom multiplier:1.0f constant:0.0f];
    self.collectionViewBottomLayoutGuide.active = YES;
}

Best solution that I found after a 2 hour search! Thank you! — SDW, Jul 12 '18 at 09:01
This is perfect. solutions by extension is incorrect calculating collectionView height. — Leonardo, Aug 01 '19 at 02:41

score 3 · Answer 5 · answered Nov 18 '17 at 10:01

Adding a new constraint and leaving the old constraint which will lead to see the layout errors in xcode debug screen and xcode will break one of the constraint to be able to satisfy the layout. Even if you see the correct layout on the screen you may have different problems like not responding to the keyboard changes.

This may be solved better by changing the old constraint by following steps:

Open JSQMessagesViewController.xib
Click File Inspector and choose "Use safe area layout guides"
Change deployment target of JSQMessagesViewController to 9.0
Change first item of the Input toolbar's bottom constraint from Superview to Safe Area and constant to 0
Run your project.

Definitely, that would be the better approach but when I tried it the toolbar wouldn't move up with the keyboard. Has it worked for you? — Sami Ali, Nov 24 '17 at 09:40
Very nice solution! Worked for me. Thanks buddy. @SamiAli you should first drag the toolbar a little bit up then set it's bottom constraint to safe area. — Suhail, Nov 13 '20 at 10:20

score 2 · Answer 6 · answered Nov 15 '18 at 16:49

Slight improvement of @J-Bossi's answer, for those of us who can't deal with autolayout technically breaking...

Just removes the existing constraint first, then adds that new constraint

extension JSQMessagesInputToolbar {
    override open func didMoveToWindow() {
        super.didMoveToWindow()
        guard let window = window else { return }
        if #available(iOS 11.0, *) {
            guard let constraint = (superview?.constraints.first { $0.secondAnchor == bottomAnchor }) else { return }
            let anchor = window.safeAreaLayoutGuide.bottomAnchor
            NSLayoutConstraint.deactivate([constraint])
            bottomAnchor.constraintLessThanOrEqualToSystemSpacingBelow(anchor, multiplier: 1.0).isActive = true
        }
    }
}

jsqmessagesviewcontroller inputToolBar IOS 11 iphone X Swift4

6 Answers6