Summary:
Refs https://github.com/facebook/react-native/issues/28711
This PR moves Hermes badge component from the template to the `NewAppScreen` library. The main motivation behind this change was to simplify a bit template code.
I assumed that it is not important to expose `global.HermesInternal` to the template users:
* If this assumption is true, I think that there are no other reason to leave this component inside `App` in comparison to other `NewAppScreen` components,
* If this assumption is false, I can adjust this PR and move `HermesInternal` check from the badge component to the `App`.
I was trying to avoid calling `useColorScheme` when Hermes is disabled, but placing hook inside the conditional branch causes ESLint warning (react-hooks/rules-of-hooks).
This PR includes also small style tweaks for the badge - since there are no background padding can be omitted and spacing can be added adjusted tweaking `top` and `left` properties and `fontSize` has been adjusted just for the readability.
In the last commit, I have gone a bit further and moved `HermesBadge` to the `Header` component and I have also changed slightly the `Header` title (React -> React Native) and it's styling.
> I'm not sure if after this change `HermesBadge` export in `NewAppScreen` components list is still required, but maybe this badge will be useful for someone. If it's a mistake I can update the PR and remove this export.
## Changelog
[Internal][Changed] move Hermes badge from the template to the NewAppScreen library
Pull Request resolved: https://github.com/facebook/react-native/pull/28783
Test Plan:
Template app do not redbox on Android emulator with and without Hermes enabled.
## Preview
Android with Hermes enabled and adjusted header:
iOS with adjusted header:
Reviewed By: GijsWeterings
Differential Revision: D22493822
Pulled By: cpojer
fbshipit-source-id: 3440e10f2d59f268ca8851a6e002f0ff23fa839c
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
Pull Request resolved: https://github.com/facebook/react-native/pull/28711
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:
Differential Revision: D21236148
Pulled By: shergin
fbshipit-source-id: 0c8a9534d3a3f8f8099af939243a889ac4df6cda
Summary:
Need to add explicit type annotations in these areas to unblock types-first architecture for Flow. These are locations the codemod could not automatically handle.
I'll call out areas I need a close eye on in the comments.
Reviewed By: panagosg7
Differential Revision: D16659053
fbshipit-source-id: 167dd2abe093019b128676426374c1c62cf71e7f
Summary:
Related to #24760 and #24737
This simplifies some styling within the components used for the New App Screen to help advocate for best practices when styling with CSS-like styles in React Native, as well as using React Native's own unique components.
There's a bit more detail in each commit. Let me know if you'd like me to pull that info out into the PR description here!
[General] [Changed] - Polished up new app screen component styling
Pull Request resolved: https://github.com/facebook/react-native/pull/24783
Differential Revision: D15284851
Pulled By: cpojer
fbshipit-source-id: 954db00d39fc0082bbd4dc96afa7d38dfb7f67d5
Summary:
Continuation of #24687
> Issue: [Polish the "new app screen"](https://github.com/react-native-community/discussions-and-proposals/issues/122)
> This is the pull request for the new intro screen proposal in react native as directed by cpojer
This PR was created because the previous one could not be pushed to for some reason. I cleaned up a few small things and added the component as an example to RNTester so we can keep iterating. My plan is to land this, and then polish it and make it the default in a follow-up.
[General][Added] - New Intro screen, Icons
Removed Lottie Integration
100% React Native 💥
Pull Request resolved: https://github.com/facebook/react-native/pull/24737
Differential Revision: D15259092
Pulled By: cpojer
fbshipit-source-id: bc141fb1425cf354f29deffd907c37f83fd92c75
simek
Eli White
Logan Daniels
Eli Perkins
cpojer
