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:
use "shorthand" of `Fragment`
No need to import `Fragment` as it can be used via `<></>` vs `<Fragment><Fragment />`
## Changelog
Use shorthand for Fragment in App.js
[General] [Changed] - Use shorthand for Fragment in App.js
Pull Request resolved: https://github.com/facebook/react-native/pull/25905
Test Plan: Ci Tests should be sufficient
Differential Revision: D16666166
Pulled By: cpojer
fbshipit-source-id: 70e2c9793087bf8f5e0a5477c75f178134cbd6a1
Summary:
Yesterday we shipped hermesengine.dev as part of the current 0.60 release. This PR brings those changes to master.
## Changelog
[General] [Added] - Added support for Hermes
Pull Request resolved: https://github.com/facebook/react-native/pull/25613
Test Plan:
* CI is green both on GitHub and at FB
* Creating a new app from source can use Hermes on Android
Reviewed By: cpojer
Differential Revision: D16221777
Pulled By: willholen
fbshipit-source-id: aa6be10537863039cb666292465ba2e1d44b64ef
Summary:
1. Consistency with full stops (you can see screenshots in https://github.com/facebook/react-native/pull/24783 )
2. Improvements to the wording, describing what you're going to see
## Changelog
[Internal] [Fixed] - Improves the copy for the new app screen
Pull Request resolved: https://github.com/facebook/react-native/pull/24918
Differential Revision: D15391421
Pulled By: cpojer
fbshipit-source-id: 2ec6d2d5bd4845c5f4c699838ae865ab4217e49e
Summary:
This PR fixes the content being shown behind the `StatusBar` in the new app template, was only happening in iOS.
## Changelog
[General] [Changed] - Fix content being shown behind `StatusBar` in the new app template.
Pull Request resolved: https://github.com/facebook/react-native/pull/24868
Differential Revision: D15353748
Pulled By: cpojer
fbshipit-source-id: 4c84a65d9f8e85e5558d447533e381126c971e38
Summary:
This replaces the "new app screen" in the template with the new design from https://github.com/react-native-community/discussions-and-proposals/issues/122
This uses components that are shipped as part of the `react-native` module, but not necessarily as proper components exported by the main `react-native` module. To use these, we use absolute imports to those components.
Related to #24760
[General] [Changed] - Updated new app template design 💖
Pull Request resolved: https://github.com/facebook/react-native/pull/24805
Differential Revision: D15334459
Pulled By: cpojer
fbshipit-source-id: d0b67d08f936eeabd9e93d4e0ff78302b4d6429f
Summary: This diff moves the React Native template from `local-cli/templates/HelloWorld` to `template`. Keeping it in the react-native repo will allow us to make changes to the template and version it together with react-native, instead of moving it out into a separate repo and trying to keep the template in sync with RN.
Reviewed By: TheSavior
Differential Revision: D13372949
fbshipit-source-id: e68e267b4dcf6384535d7b48fc11e297a12e9676
simek
Eli White
Logan Daniels
Kid Commit
cpojer
Orta Therox
Lucas Bento
Eli Perkins
Andres Suarez
Christoph Nakazawa
