Add Dark Mode support to the App template and NewAppScreen components

[Simek]

Summary

This PR adds support for the dark mode and dynamic theme changing to the default App template and to the related NewAppScreen components. Using useColorScheme hook forced me to refactor a bit main App.js file, but I think those changes are step in the right direction according to way in which React Native is used in larger apps, so new Section component has been extracted to reduce code redundancy/repetition inside App.

Additional color darker has been added to the Colors statics from NewAppScreen because dark was too bright for the Dark Mode backgrounds.

Also main StoryBoard on iOS has been updated to use theme based colors instead of static or hardcoded ones. There was also an unused, empty Label which I have removed.

I'm not so much experienced with Android. If someone could also update Android splash screen (if Android requires such change) it will be nice. I want to look at this later using simulator.

I have updated the Android splash screen and tested this change on the Android emulator.

If you have any comment or corrections feel free to post them out, I would like to put more work into this PR if it's needed. Dark Mode this days is a part of near every OS, so it could be considered as a standard feature. I hope those changes helps people which struggle with the basic theming implementation (+ there is now an example of hook and children prop usage in the template).

Changelog

[Internal] [Added] - Add dark mode support to the default app template

Test Plan

I have tested the App from the template on the iOS device and in Android emulator with RN 0.63.0-rc.

Screen recording on iOS (demonstarates both modes, both splash screens and transition):

Screenshot of iOS app in Dark Mode:

Screenshot of iOS app splash screen in Dark Mode:

Screenshot of Android app in the emulator:

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	809,568	0

Base commit: 2ad827b

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	6,761,242	187
android	hermes	armeabi-v7a	6,408,250	193
android	hermes	x86	7,143,453	205
android	hermes	x86_64	7,034,176	204
android	jsc	arm64-v8a	8,929,725	37
android	jsc	armeabi-v7a	8,569,129	58
android	jsc	x86	8,755,039	31
android	jsc	x86_64	9,331,412	50

Base commit: 2ad827b

[jacobp100]

You might want to hold off doing this until PlatformColor has landed - then you can support dark mode inside StylesSheet.create

[Simek]

Thank you for your comment. I have mentioned using Platform Color API in my initial comment in the 0.63 release discussion thread.

But after thinking and researching a while it looks like, at least for now, there is no possibility to remove Colors statics from the NewAppScreen due to compatibility with out-of-tree platforms. I'm also not sure if using Platform Color simplify or make more complex the code, because you need to define color for at least 2 platforms + default and for custom colors or StatusBar the hook will be still required. It's also brand new API so I think it's wise to wait with this improvement a bit.

Of course if such changes will be request I'm happy to implement them.

[Simek]

BTW. I have noticed that after updating Android AppTheme even JS bundle loading view has dark background, while on iOS Dark Mode do not affect the background color and in both modes it's white.

[jacobp100]

In AppDelegate.m, you could change the root background colour code to something like

if (@available(iOS 13.0, *)) {
    rootView.backgroundColor = [UIColor systemBackgroundColor];
} else {
    rootView.backgroundColor = [UIColor whiteColor];
}

[Simek]

@jacobp100 Awesome tip, I forget about updating RootView. This change fixes the issue described in the comment above, thank you!

[facebook-github-bot]

@shergin is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[shergin]

Looks so pretty! I can't resist!
Thank you!

[react-native-bot]

This pull request was successfully merged by @Simek in 2b56011.

^{When will my fix make it into a release? | Upcoming Releases}

[Simek]

@shergin One more thing that came to my mind:

• Can I move Hermes badge to the NewAppScreen components or it is important to expose global.HermesInternal for the template users?