I am creating an application using react native/expo, using react-navigation for navigation.
I need a bottom tab navigator, and for every tab i need a stack navigator. I have followed the example on the website and it functionally works fine. (https://reactnavigation.org/docs/en/tab-based-navigation.html)
Everytime i select a different stack from on the tab navigator the new header renders (great)! but it then grows as if its adding padding to compensate for the status bar.
is there any way to solve this?
thankyou.
You can add the following to remove extra statusbar height for all screens in a navigator:
const MyStack = createStackNavigator({
// screens
}, {
defaultNavigationOptions: {
headerStatusBarHeight: 0
}
});
Or you can do it per screen:
static navigationOptions = {
headerStatusBarHeight: 0
}
You can also specify a custom value if you need.
Related
I am building storybook and have following problem.
I want to set layout centered in preview.
I tried
export const parameters = {
layout: 'centered',
};
in the .storybook/preview.js
But this sets layout centered for all components.
Is there any good way to show in center for only some components?
The Storybook documentation contains a section for component level layout.
Instead of configuring it globally in the preview, you can add it to the individual story file.
// *.stories.js|jsx|ts|tsx
export default {
// Other config options...
// Sets the layout parameter component wide.
parameters: {
layout: 'centered',
},
};
In my Gatsby app I have a page that includes a pagination component.
By default, the path is: '/?page=1' and clicking the pagination buttons changes to '/?page=2', '/?page=3' ...
I am "saving" the page number in the path because I want the browser to remember the page number the user was on previously, in case he clicks the go back button of the browser.
The problem with this approach is that every time the path is changed, the page automatically is scrolling to the top, and I do not want it to scroll to the top.
Does anyone know the way to prevent that?
This is the default Gatsby behavior (known as Scroll Restoration). You have exposed the useScrollRestoration hook in order to play with this behavior (and change it accordingly to your specifications). For example:
import { useScrollRestoration } from "gatsby"
import countryList from "../utils/country-list"
export default function PageComponent() {
const ulScrollRestoration = useScrollRestoration(`page-component-ul-list`)
return (
<ul style={{ height: 200, overflow: `auto` }} {...ulScrollRestoration}>
{countryList.map(country => (
<li>{country}</li>
))}
</ul>
)
}
In your case, you should add your element class name.
Related GitHub threads:
https://github.com/gatsbyjs/gatsby/issues/27349
https://github.com/gatsbyjs/gatsby/issues/19480
I have an app using react-navigation which has basically this structure:
StackNavigator -> BottomTabBarNavigator -> (each tab) StackNavigator
I am trying to add a global button component, it lived on the TabBar, but there are sibling views that would hide it when they are shown. So, ultimately the best place to put it would be on the parent StackNavigator, however, when I try to put the custom header on the navigationOptions of the parent StackNavigator, I get the error
Unexpected token, expected "</>/<=/>="
And it points to the { in header: props => <ConversationBuble {...props} /> on the navigationOptions object. Which I dont understand, as I am able to do this on the child most StackNavigator. Can anyone help me understand what the problem is here and why I am unable to inject the custom header at the parent level?
I'm trying to improve accessibility on a react native app and am facing the following problem: when the user opens the menu drawer, the focus doesn't change to the modal drawer content. Instead swiping left and right focuses content that's in the background.
I have tried setting dynamic accessibility props to the drawer and main content area:
<NavigationMenu
importantForAccessibility={isNavigationVisible ? 'yes' : 'no-hide-descendants'}
/>
<DashboardContent
importantForAccessibility={isNavigationVisible ? 'no-hide-descendants' : 'yes'}
/>
Where isNavigationVisible is a prop that gets updated when the drawer opens, but this had no effect.
Is there any way to force the focus change to the drawer when it opens?
This is what i ended up using:
const setFocus = ({ current: ref }) => {
const FOCUS_ON_VIEW = 8;
const reactTag = findNodeHandle(ref);
Platform.OS === 'android'
? UIManager.sendAccessibilityEvent(reactTag, FOCUS_ON_VIEW)
: AccessibilityInfo.setAccessibilityFocus(reactTag);
}
Currently, React-Native doesn't provide a way, to out-of-the-box, traverse the view tree and get the first focusable element to set the focus for it.
So you need to use AccessibilityInfo.setAccessibilityFocus passing a reactTag case by case.
Looks like there is a bug on AccessibilityInfo.setAccessibilityFocus(reactTag), it doesn't work consistently and calling it more than once increase the chance of success.
See this answer for how to make this call twice to do the focus on view launch.
See this open issue on github for more detail.
I'm trying to join tabs and side menu together, I'm confused on what I'm doing wrong. since root belongs to sidemenu..
import {App, IonicApp, Platform} from 'ionic-framework/ionic';
import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
import {ListPage} from './pages/list/list';
import {TabsPage} from './pages/tabs/tabs';
// https://angular.io/docs/ts/latest/api/core/Type-interface.html
import {Type} from 'angular2/core';
#App({
templateUrl: 'build/app.html',
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
class MyApp {
// make HelloIonicPage the root (or first) page
rootPage: Type = HelloIonicPage;
pages: Array<{title: string, component: Type}>;
constructor(private app: IonicApp, private platform: Platform) {
this.initializeApp();
// set our app's pages
this.pages = [
{ title: 'Hello Ionic', component: HelloIonicPage },
{ title: 'My First List', component: ListPage },
{ title: 'testing tabs', component: TabsPage}
];
}
initializeApp() {
this.platform.ready().then(() => {
// The platform is now ready. Note: if this callback fails to fire, follow
// the Troubleshooting guide for a number of possible solutions:
//
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
//
// First, let's hide the keyboard accessory bar (only works natively) since
// that's a better default:
//
// Keyboard.setAccessoryBarVisible(false);
//
// For example, we might change the StatusBar color. This one below is
// good for dark backgrounds and light text:
// StatusBar.setStyle(StatusBar.LIGHT_CONTENT)
});
}
openPage(page) {
// close the menu when clicking a link from the menu
this.app.getComponent('leftMenu').close();
// navigate to the new page if it is not the current page
let nav = this.app.getComponent('nav');
nav.setRoot(page.component);
}
}
I'm new to ionic and I have follow following tutorial http://ionicframework.com/docs/v2/getting-started/tutorial/
It has tabs or side-menu, but does not have both. I have imported tabs, but I'm not sure what to do next, because rootPage belongs to HelloIonicPage, which I dont want to change.
It is not totally clear why you would need to do this but it is possible and the attached link has the code where I merged the two programs generated by the templates. The resulting program uses the tab1 page as the 'Getting Started' page. Menu for the sidebar is available from each of the tab pages.
I copied the folders in the pages folder of the 'tabs' program to the 'sidemenu' program.
From the 'Getting Started' I copied the nav bar code and the menu for the side bar. This seems to be inherited by the tab 2 and tab 3 pages including the specified title (not sure of the reason). So I added a h1 with a tab2 and tab3 title in each of the pages just as markers.
I modified the app.ts file to import the pages added in step 1.
I added import statements to import page1, page2 and page3 html files in the app.core.scss
The approach may allow to add a login screen and other utility screens (such as search) on the sidebar.
Merged Sidemenu and Tabs code in ionic 2