Allow touch area of button in React Native to extend into status bar (ios) - react-native

I have a back button (using TouchableOpacity) in the top left of my screen. I want to allow its hit area to extend up into the status bar as that's what other apps seem to do and it's easy to accidentally hit the button a little too high touching the status bar just above instead and making the app feel unresponsive.
I've got it's area to extend up behind the status bar but the status bar still seems to grab touch events. Is there a way of making it not do that (at least on the left hand side, I'd still like the "touch to go to top" stuff to work when you touch it elsewhere)?

The UINavigationBar is a UIWindow (not a UIView), which is above the UIWindow you are acting in. Thus it is not possible to present UIViews from your UIWindow.
What you can do is to add transparent UIBarButtonItem additionally to your button, triggering the same action:
var button = UIBarButtonItem(title: "", style: .Plain, target: action: #selector(yourAction(_:)))
button.tintColor = UIColor.clear
navigationController?.navigationItem.leftBarButtonItem = button

Related

iOS UI Testing cannot see the UILabel

I have a UI testing issue with some code I've got from another developer (Whose not with the project anymore). The code display a simple alert box at the top of the screen when there's an error and I cannot get my UI test to see the UILabel within it.
The structure of the box looks like this:
UIView
+ UILabel
+ UIButton
And in the custom class for the UIView there is this code:
// Original code
accessibilityIdentifier = "AlertBar" // Required for UI Testing.
// Bits I've added trying to make messageLabel visible to UI Test
isAccessibilityElement = true
accessibilityElements = [messageLabel]
messageLabel.accessibilityIdentifier = "AlertBarMessage"
messageLabel.isAccessibilityElement = true
}
If I breakpoint in the middle of my UI Test and dump the app into the log I can see the UIView:
Attributes: Application, pid: 60317, label: 'The App'
Element subtree:
→Application, 0x600001df8c40, pid: 60317, label: 'The App'
Window (Main), 0x600001dfa060, {{0.0, 0.0}, {390.0, 844.0}}
... app ui logged here!
Other, 0x600001dce220, {{4.0, 47.0}, {382.0, 107.7}}, identifier: 'AlertBar'
So it's clear that the alert is visible to XCTest, but nothing inside it. As you can tell from my added code I've been trying all sorts of things but so far I've not been able to make the UILabel (AlertBarMessage) visible.
What am I missing?
As per usual, after typing up a stackOVerFlow question I go back to the code and figure out the problem :-) In this case it was the isAccessibilityElement = true on the view. Making it accessible was effectively hiding the nested UILabel so turning it off fixed my test.
I know there are ways in Accessibility to setup the view correctly for accessibility so that screen readers see it as a single element and can read the message, but I'll have to work on that later for now.

Modal in front of a modal in react native, not picking up state

I am using the Modal component from react-native to creat a slide up menu for users to select. The issue with this is, if you wish to dim the background and animate with 'slide', it does this ugly thing of sliding a dimmed box up the screen, instead of dimming the whole background THEN sliding the view in.
So I tried to solve for this by using two Modals. One modal for the dark background to fade in and second modal to slide in with the menu with a transparent background.
This actually works, but when this.doneDayPicker changes the state of this.state.showModalDayPicker so both modals are no longer visible, <DarkModal> still appears. I'm left with <DarkModal> permanently on the screen.
What can I change to let <DarkModal> dissapear when this.state.showModalDayPicker is changed?
return (
<DarkModal visible={this.state.showModalDayPicker}>
<GoalModalScreen
visible={this.state.showModalDayPicker}
done={this.doneDayPicker}
title='Health benefits'
height={this.state.goalModalHeight}
>
{this.flatList()}
</GoalModalScreen>
</DarkModal>
);
Initially I would say this is because there is no done property on DarkModal like goalModalScreen?
Or use a Ternary Operator
{this.state.showModalDayPicker ? <DarkModal> : undefined}
You might also setup DarkModal's own toggle in state.
{this.state.toggleDarkModal ? <DarkModal> : undefined}

tabBar.hidden = true not hiding complete tab bar it lefts white space in bottom of view

I have 2 tab item in my tab bar controller, my requirement is to hide tab bar when user move to child screens (Other than root of each tab).
I have tried hidesBottomBarWhenPushed but some how its not working due to view hierarchy.
Also tabBar.hidden = true hiding the tab bar icon instead the complete tab bar. randomly it works when i scroll up down again and again the table view used on root view
self.tabBarController.tabBar.hidden = true;
I am calling this line before presenting the new view in (prepare for segue method)
On debug its seems tab bar is hidden but it left white space in bottom which remain there
Before - Normal
After tabBar.hidden = true
user bellow code to hide the tabbar. for example "Tab1 and Tab2" is two tabbars, if u r moving Tab1 to inside viewcontrollerA. U can write the bellow code in "viewcontrollerA"
-(BOOL)hidesBottomBarWhenPushed
{
return YES;
}

Appearance of NavigationBar

This is my very first question to the helpful group of stackoverflow.com
Please bear with me if question framing is cumbersome!!
I have a collectionView(in a ViewController),embedded in a NavigationViewController.
I have used didSelectItemAtIndexPath for each of the collectionView cells, linking them to different viewControllers,say VC1,VC2 etc
I have hidden the Navigation bar, in the ViewController containing the collectionView, using the code
self.navigationController?.navigationBar.hidden = true
In each of VC1,Vc2....., I have tried to unhide the navigationBar using the code,
self.navigationController?.navigationBar.hidden = False
During simulation, using xCode, the navigation bar appears only in VC1, but not in VC2,VC3....
From the details you provided it is hard to guess what is exactly the issue.
The navigation controller will remember its status, as long as you use push segues, it should stay hidden, unless you set it to show again. You can set it to be hidden before you perform the transition, say in didSelectItemAtIndexPath.
To hide the navigation controller, you can use:
navigationController?.setNavigationBarHidden(true, animated: true)
and to show it
navigationController?.setNavigationBarHidden(false, animated: true)

How can I add a custom button to the titlebar on a single page of a navigation.View (Sencha Touch 2)?

I'm using a navigation.View to hold a list, so I can easily implement a detail view which appears when someone clicks on an item. I also have a search bar docked at the top of this list view, but what I'd like to do is hide this by default and have a button within the titlebar which would allow the user to show/hide the search bar.
I've tried using the following code to achieve this:
navigationBar: {
items: [{
xtype: 'button',
align: 'right',
text: 'Search'
}]
}
but this causes the button to display on every page I push into the navigation view, whereas I want the button to only appear on the root list page. Is this even possible?
Any help is appreciated.
In this case, you had better not use Ext.NavigationView. Just use normal views which toolbars.
But if you still want to use navigation view, here maybe a hint to start with:
Add that button to your navigation bar and set config hidden: true by default.
Listen for an event which can observe when your active view is changed. This may vary depending on your app structure.
When your "special" view is activated, show that button to the navigation bar, and when it is deactivated, hide that button.