I am using react navigation v5.0 in my project.
In previous version there is an option called "drawerLockMode" by which we could disable swipe gesture from opening the navigation drawer in an specific screen.
How can I use this option in v5.0 ?
Use gestureEnabled option
Whether you can use gestures to open or close the drawer. Defaults to true.
https://reactnavigation.org/docs/en/drawer-navigator.html#gestureenabled
If using inside functional component, use React's useLayoutEffect() hook like this:
function HomeStackNavigator({navigation, route}) {
const dispatch = useDispatch();
//Lock drawer on all screens except the first one i.e. Home
React.useLayoutEffect(() => {
route.state !== undefined
? route.state.index > 0
? navigation.setOptions({gestureEnabled: false})
: navigation.setOptions({gestureEnabled: true})
: null;
}, [navigation, route]);
return (
<Stack.Navigator initialRouteName="Home" headerMode="none">
...
</Stack.Navigator>
Related
I am trying to develop a simple web extension/addon under Safari, which is using the tabs onUpdated event. I used the Safari XCRUN converter: https://developer.apple.com/documentation/safariservices/safari_web_extensions/converting_a_web_extension_for_safari
What I am trying to do is :
Open new tab on Google Scholar with set prefs params, from "options.js" script (Options page code below)
Listen for this tab to be updated and ready (e.g. tab status is complete)
Then, inject a content script that will simulate the user click on save button (i.e. on GScholar page)
Then remove the listener, and wait 1,5s (for GS tab to reload and finish saving) in order to finally close this tab.
// Detect browser language
const gsUrl = currentBrowser.i18n.getUILanguage().includes("fr")
? GSCHOLAR_SET_PREFS_FR_URL
: GSCHOLAR_SET_PREFS_COM_URL;
// Listener to detect when the GS tab has finished loading
const gsTabListener = (tabId, changeInfo, tabInfo) => {
if (changeInfo.url && changeInfo.url.startsWith(GSCHOLAR_HOST)) {
currentBrowser.tabs.executeScript(
tabId,
{
code: `document.getElementsByName("save")[0].click();`,
},
() => {
currentBrowser.tabs.onUpdated.removeListener(gsTabListener);
setTimeout(() => currentBrowser.tabs.remove(tabId), 1500);
}
);
}
};
currentBrowser.tabs.onUpdated.addListener(gsTabListener); // Add tab listener
currentBrowser.tabs.create({
url: `${gsUrl}?inst=${gScholarInstIdList.join("&inst=")}&save=#2`,
active: false,
}); // Open GS tab according to browser language
The problem is that it works well on Chrome/Edge/Firefox (on MacOS), but not on Safari : the GS tab is opended but isn't closed and nothing happens :-/
PS:
It seems tabs onUpdated event is well supported on Safari according to MDN.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/onUpdated
I have also tried webNavigation onCompleted event, but same !
Developing on : MacBookAir under MacOS Monterey 12.4, Safari 15.4 (17613.2.7.18), XCode 13.3.1 (13E500a), extension is bundled with Webpack 5.68.0 (e.g. building all assets files).
I really don't see what I am doing wrong and why wouldn't this tab event be intercepted ?
Thanks for your feedback.
After debugging I finally sloved this by noticing that in fact the events were triggered, but missed because of the availability and values of parameters passed into callabck (changeInfo, details) depending on the browser we're on.
So I switched from onUpdated to webNavigation.onCompleted API, which is better suited to our need (tab page fully loaded) and whose parameter is simple and consistent across browsers :-)
const uiLanguage = currentBrowser.i18n.getUILanguage().includes("fr")
? "fr"
: "com"; // Detect browser language
const gsUrl = `${GSCHOLAR_SETTINGS_HOST}.${uiLanguage}`;
// Listener to detect when the GS tab has finished loading
const gsTabListener = (details) => {
if (details && details.url && details.tabId) {
if (details.url.startsWith(`${gsUrl}/scholar_settings?`)) {
currentBrowser.tabs.executeScript(details.tabId, {
code: `document.getElementsByName("save")[0].click();`,
});
} else if (details.url.startsWith(`${gsUrl}/scholar?`)) {
currentBrowser.webNavigation.onCompleted.removeListener(
gsTabListener
);
currentBrowser.tabs.remove(details.tabId);
}
}
};
currentBrowser.webNavigation.onCompleted.addListener(gsTabListener); // Add GS tab listener
currentBrowser.tabs.create({
url: `${gsUrl}/scholar_settings?inst=${gScholarInstIdList.join(
"&inst="
)}&save=#2`,
active: false,
}); // Open GS tab according to browser language
I'm developing a React Native app using React Navigation v4, React Hooks and ES6.
I have 2 bottom tabs (Movies, Shows) and 4 screens with the following Stack structure:
**Movies**
-- MovieList
-- MovieDetail
**Shows**
-- ShowList
-- ShowDetail
My scenario
1) Moving from Movie list to an individual movie page
MovieList contains a list of movies, when I click on one of them, I first fetch some API data then move to the MovieDetail screen like this
dispatch(apiFetchActions.fetchMovies(movieId)).then((response) => {
props.navigation.navigate({
routeName: "MovieDetail",
params: {
assetId: movieId,
assetName: movieTitle,
},
});
MovieDetail is now on top of the Movies stack and MovieList at the bottom
2) Moving to a different tab (navigation stack)
I then click on Shows (2nd Tab) which takes me to the ShowList using props.navigation.navigate('ShowList')
3) The problem
If I click on the Movies Tab, I expect to be moved back to MovieList but since MovieDetail was never unmounted, it is still at the top of the Movies stack meaning that I see an old screen. I have to click twice to go back to the MovieList screen.
I've read quite a few suggestions on how to use onFocus/onBlur subscription however I could not found a solution using React Hooks.
My ideal solution would be to find a way to listen to the onBlur status in MovieDetail screen possibly using useEffect hook and somehow unmount it before leaving.
I found a way to make it easier to always move to the initial top of the stack when you click on any bottom tab icons.
You simply need to add the on Press and the screen reference like this
Stars: {
screen: StarsNavigator,
navigationOptions: ({ navigation }) => ({
tabBarIcon: (tabInfo) => {
return (
<Ionicons name="ios-people" size={22} color={tabInfo.tintColor} />
);
},
tabBarLabel: Platform.OS === "android" ? <Text>Stars</Text> : "Stars",
tabBarOnPress: () => {
navigation.navigate("StarsList");
},
}),
},
Star is one of my screens in BottomTabNavigator and using navigation.navigate("You Screen") does the trick. So regardless in which level of the stack you find yourself, every time you click on the Star tab you always end up to the original top level.
I am using react-native-drawer-layout for navigation drawer.
<DrawerLayoutAndroid
drawerWidth={100}
ref={'Drawer'}
drawerPosition={DrawerLayoutAndroid.positions.Right}
renderNavigationView={() => NavigationView}
/>
When i try to close the drawer total app is getting closed.
Could anybody let me know how to close the drawer with hardware(android) button?
I never user DrawerLayoutAndroid but according to the React Native Docs it has method "closeDrawer()" that is supposed to close it... by using BackHandler you should add an event listener to the component containing the drawer layout, add this:
componentDidMount(){
BackHandler.addEventListener('hardwareBackPress', ()=>{
this.refs.Drawer.closerDrawer();
return true;
});
}
Similar to what's being seen here in Google's Material Design Responsive Interaction documentation, I would like to have a button react to being pressed by flashing a color briefly but then returning to the original color gradually.
Can this effect be achieved using the default Xamarin.Forms Button control with a click handler method? Or must a custom renderer be implemented to try and create this effect?
You're looking for the animation methods available on ui components. Essentially you need to add a click handler to your button that runs animations (first your color change, then your gradual fade back using async/await). I have added a link to a sample that animates a size change, but the theory will remain the same.
// add a gester reco
this.GestureRecognizers.Add(new TapGestureRecognizer
{
Command = new Command(async (o) =>
{
await this.ScaleTo(0.95, 50, Easing.CubicOut);
await this.ScaleTo(1, 50, Easing.CubicIn);
if (callback != null)
callback.Invoke();
})
});
I have some kind of problem with twitter-bootstrap and firefox.
I have a button and a dropdown menu with an input text. If I right click on the input ( for right-click + Paste for example), firefox closes the dropdown. And that quite boring.
Is there any solution for prevent that behaviour ?
Thanks !
As an immediate stop-gap workaround you can use something along the following lines to prevent the click event from propagating when the click event is a right-click
JS
$(document).on('click', function(e) {
e.button === 2 && e.stopImmediatePropagation()
})
This would need to be placed between jQuery loading and Bootstrap loading.
Plunk
However, this is a rather blunt approach and you'd probably be better off doing something more subtle if possible.
Update
One way to circumvent this issue in a more targeted manner is to disable the original event listener and replace it with one that checks for right-clicks first.
JS
// obtain a reference to the original handler
var _clearMenus = $._data(document, "events").click.filter(function (el) {
return el.namespace === 'data-api.dropdown' && el.selector === undefined
})[0].handler;
// disable the old listener
$(document)
.off('click.data-api.dropdown', _clearMenus)
.on('click.data-api.dropdown', function (e) {
// call the handler only when not right-click
e.button === 2 || _clearMenus()
})
Unlike the previous example, this code would need to run after Bootstrap has loaded.
Plunk
For Bootstrap 3 you have to update the namespace to bs.data-api.dropdown.
JS
// obtain a reference to the original handler
var _clearMenus = $._data(document, "events").click.filter(function (el) {
return el.namespace === 'bs.data-api.dropdown' && el.selector === undefined
})[0].handler;
// disable the old listener
$(document)
.off('click.data-api.dropdown', _clearMenus)
.on('click.data-api.dropdown', function (e) {
// call the handler only when not right-click
e.button === 2 || _clearMenus()
})
Plunk