feat: Add dark mode on web and android + match iOS style #124
Conversation
| @andresain123 Tested the pull request. See image attached. After the PR the label is missing and hence also not clickable.
IMPORTANT TO ADD: |
| @exotexot ok thanks, I didn't test it on react-native-windows. Let me check it and I'll try to solve it 👍 |
| But I can confirm that it is working on Android :) Regarding the windows Issue. I'm aware of some styling constraints for the Text component in react-native-windows. There may be some conflicting styling properties which cause the windows issue. EDIT: Is this issue reproducable on your end? |
| const styles = StyleSheet.create({ | ||
| segmentedControl: { | ||
| height: 28, | ||
| height: 32, |
There was a problem hiding this comment.
just wanted to confirm, is the height change here intended?
This only changes the looks on iOS side, which seems out of scope for this PR
(if the change is intended, theres no problem 👍)
There was a problem hiding this comment.
Yes, it was intended to match the exact height of the Segmented Control on iOS and the one for web/android.
| Just wanted to add, that in my case I had to apply this change in order for darkmode to work properly in Windows: Setting the height appread to cause the problem, which I didnt investigate any further. This fix also closes #134 |
Overview
This Pull Request adds support for the appearance prop on Web and Android.
I have also tweaked some of the styles to make it more close to the iOS one by adding shadows and the separators between the segments. Just like the iOS version if the tintColor or backgroundColor props are present, the separators dissappear.
An example of how it works:
Fixes: #95
Test Plan
The example app is updated with this new functionality.
Some previews:
