I'm using the
<Drawer>
tag and it works great, but I don't want the default screen layout with the default "hamburger" menu icon at the top-left of the screen.
I've spent hours trying to get my own button to open the drawer.
I've done my research homework:
The RNRF API for Drawer doesn't list open/close methods:
Was happy to find two EXACT issues "How to open Drawer When use a custom icon in Scene" #1101 and "How to customize drawer button" #1078 on GitHub but none of the solutions work--so close but yet so far!
In Button component:
onPress={() => {Actions.get('drawer').ref.toggle()}}
but get this error:
Here is my main code:
Related
Im coding integration tests in a project with cypress. This is the flow in my projet:
You click at a buy button of a projeto;
When you click, open a new tab in checkout product
Only this, click at a button and open a new tab with the checkout screen. But as we know, cypress dont have suport for multiple tabs, so how can i handle it? What is the way to open this new url in the same tab?
Important to highlight that this button is not wrapped by any a tag, its just a button that when I click has a handleClick that open a new tab and do other stuff. Because of this, none of these https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__tab-handling-links/cypress/integration/tab_handling_anchor_links_spec.js solutions work for me.
I already tried this:
cy.stub(win, "open")
.callsFake((url, target) => {
//#ts-ignore
return win.open.wrappedMethod.call(win, url, "_self");
//#ts-ignore
})
.as("open");
});
but no success.
I am new to nextjs and I am building my first website. My links are rendered with the following:
const menuList = menu.map(function(menuItem: any){
return <Link href={`${menuItem.slug}`} key={menuItem.slug} as={`${menuItem.slug}`}>{menuItem.title}</Link>;
});
I have an index.tsx and [slug].tsx
When I click on a link it doesn't reload the entire page but the blue menu and image flashe white. I was expecting just the 'I made it to about us' content to change and the image and menu would not appear to change. Am I missing something or is this expected? If I hit the back button I get the results I expect. I read to use 'as' on Link but that doesn't seem to help. Any suggestions?
The problem is when I tap with Detox, the button is not tapped. However it can be tapped if I just click at it.
version of Detox: 16.8.2,
version of React Native: 0.57.1
Solved.
This happened because I used device.openURL({url: 'https://...' }) previously to open the app from a deep link.
Instead, it worked after opening a new instance of the app with a deep link in argument: device.launchApp({newInstance: true, url: 'https://...' });
After this, the interaction can be performed.
It looks like a bug with the method device.openURL()
I'm trying to create a hybrid react native app to host my website's content in webviews. Something like this: Supreme App
One thing I want to achieve is: when a <a href> link is clicked on my website, instead of webview just show the new link's content, I want the app to push a new page and show the new link content in the new page, so that I can maintain a good page backstack and it feels more like native app (for each navigation, there's a new page for it).
I'm wondering how I can detect link click, push a new page instead of let the webview do default link navigation. Thanks!
You can use WebView prop onNavigationStateChange to detect the change in url.
On clicking <a> the webview will redirect, the onNavigationStateChange will fire. You can use this callback to push a new screen in the app.
Eg.
<WebView
ref={r => this.webview = r}
style = {{marginTop : 0}}
onNavigationStateChange={this._onNavigationStateChange}
source = {{uri: 'https://www.your-url.com' }}
/>
_onNavigationStateChange=(webViewState)=>{
let newUrl = webViewState.url
/*Your navigation logic*/
}
Reference
I have used the following Material UI for React Native
React Native Material UI
From that library I have created Button with following code
<Button raised upperCase={false}
text="Facebook"/>
The Button Created successfully.
Now i want to place the facebook icon before text facebook. As guided in the above library i have done that with following code
<Button raised upperCase={false} icon="add-circle"
text="Facebook"/>
But there is no icon in that library named as 'fb' or 'facebook'.
So now i want to include facebook icon or my fb.png icon file in that button.
I am new to React Native app development. How can i do that using the same library?
If I am doing any thing wrong kindly guided me.
I know it's too late but it might help someone. MaterialIcons doesn't have facebook icon, so you have to get the facebook icon with the following code
<Button
large
iconLeft
fontWeight='bold'
backgroundColor='#3b5998'
icon={{name: 'facebook', type: 'font-awesome'}}
title='Connect With Facebook' />