I have a toggle switch in the header of react navigation, when toggled, Theme context changes.
I have a theme context setup for Dark mode, however there is a specific screen in which I do not want dark mode to be enabled.
If the user selected dark mode in the previous screen, how can it change context going into this specific screen & also change back to light mode.
Of course, I would like the toggle to be disabled in react navigation also on this screen.
Any ideas on how to work on this matter would be appreciated, thank you!
Related
On my react-native app I implemented dark mode, but this only is managed locally on my app using redux. On my iOS Splashscreen I implemented dark mode too.
The problem is, when I switch to dark mode locally(redux), the design on my app changes, everything is ok, but not the Splashscreen. I realized that only when I change the Appearance settings (Settings -> Developer -> Dark Appearance) to dark Mode, Splashscreen mode changes too.
I know that I can base it on user preferences to change to dark or light mode the app, but I need to control this locally and the dark mode apply on my app and Splashscreen also. Is this possible?
So, I guess, I need to change somehow the "Dark Appearance" programmatically. How can I get this?
You can try using react-native-appearance-control. Combine this with the Appearance API in react-native, and you can implement a dark mode toggle that the user can interact with.
See a similar question here which might help to guide you - Change colors of the whole app in react native
React Navigation library supply me the blur event, that trigs when the focused screen is going to be unfocused. Great.
But what if I need to prevent the blur action itself by stopping the user to go away from this screen? The docs only mentions the 'beforeRemove' event, that is something else.
Is there a way to prevent a user to go away from a screen using the screen component logic?
Basically, blur event's callback function must navigate to this page
I am using vuetify with vuejs.
How is possible I know when a "v-navigation-drawer" menu has been opened with overlay(showing above other components/page). It´s occurs depending width screen.
I need check it and disable a component if the 'navigation-drawer' was opened only without overlay.
You can check for the v-navigation-drawer's temporary prop when the navigation drawer is toggled. A/c to docs:
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background. This drawer behavior is mimicked by default when on mobile.
Will require some code from your side for a more detailed answer.
I noticed that when my phone is set to light mode, the loading indicator is so faint that it seems like its missing, but when switched to dark mode its clearly visible. In my specific case I am using a FlatList and have a refresh method that enables the pull to refresh functionality. I want to change the color of the loading indicator to a set color (lets say black in this case) and ignore the global theme color.
Working (Dark Mode)
Not Working (Light Mode)
Thank you!
Instead of letting the OS choose the color based on dark/light mode, React Native's ActivityIndicator has a color prop that you should check out. Maybe something like:
<ActivityIndicator color="#666" />
We start an app and there you see screen with multiple pages guide about how to use this app etc. How it works?
My suggestions: I have guide key in firebase, I load its value in local store on start. Its default value is 1. 1 - should show it, 0 - shouldn't show it. When I start I show it by default, but when user reaches the last screen, I set value of guide key to 0. And the guide is just a list of scenes (react-native-router-flux). Is it correct or not? What are best practices? What library allows me to create connected screens with dot navigation?
I recently implemented this. I would completely avoid having a guide key in firebase, because you can accomplish it locally. You can use async storage to write a boolean to storage like userDidCompleteGuide. Then, when you startup the app, if that value is not defined when reading from async storage, you know to display the guide component. After completing the guide, save that boolean to async storage. If you already use redux-persist, you can have it persist it through redux too.
I used react-navigation along with fluid transitions with react native for animating shared objects on screen.
On a basic level, it's really easy to create a dot component in react native, so don't use a library for it. It's just a view with a width, height, borderRadius, and color. Change the color to indicate an active or inactive dot depending the screen you're on. You can put a few of them in a row to show sequential steps, having the first one show an active color (like white) and the others be gray. You can then wrap your entire guide screen in a touchable opacity. That way, you can tap anywhere on the screen to advance to the next page of the guide, and when doing so, you can set the second dot to be white and the first to be gray. You could have the dots on both pages, and just change the color and nothing else when changing pages. Or you could have them be the same component and show the actual page above and dynamically change the color based on which page is active using the component state. Just set the state when changing to the next screen using the touchable opacity to indicate which should be active, and then display the page based off of that.