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
Related
I am working on a React Native application which which uses slider components. These Slider components currently are not very accessible. When focused by a Screen Reader or Talkback the only thing that is read out loud is the accessibility label.
I would like to try and implement a slider that can behave like sliders in default iOS, where moving the slider will cause VoiceOver to constantly read out the value of the slider as it's being adjusted. Is it possible to trigger VoiceOver or Talkback directly in a function so I could implement something like this
So you're not using a native iOS UISlider or UIProgressView? You can announce notifications in Voiceover using UIAccessibilityPostNotification and pass it a string or an object.
Android usually uses a <SeekBar> for sliders. If not using those, then announcements can be made via android:accessibilityLiveRegion or announceForAccessibility
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!
I'm using expo screen orientation package to handle my apps screen orientations but it does not take into consideration if the user have turned auto rotate on/off in the device settings.
I tried the react-native-orientation-locker package as well but I can't get that to work at all on my app for some reason.
Is there any way of telling what the user preference is regarding the auto rotate? I can't find any examples of it anywhere. Surely others needed this info as well.
I know that the keyboardAppearance" prop for TextInput sets an ios keyboard to dark mode, but how could I do this for android too? Any help is much appreciated. Thanks!
Unfortunately you can't do it on android.
In Android the keyboard is not (only) a native feature. You can chose wether showing it or not and which keyboard to show.
But since it's another application, you can't access it directly, the only tasks you can do are opening the app with intent.
However, the iOS, which is ironically more closed to OS tweaks, is available:
Can we change the app icon (icon which you see on the home screen) on the fly or based on the setting.
Usually this icon is pre set before publishing the app on app store. As user installs the app it comes on the home screen.
We can change the icon later any point?
I don't think the app icon can be changed on the fly. The configuration for the icon is static and part of the build settings.
No. Jailbreaking your phone seems to be the only option. Also, this has been asked many times before:
Can we make Animated icons for iOS 7 now in Xcode?
Dynamic icon iOS
Changing Icon per Day