mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Alex HuntandFacebook GitHub Bot
3cf0102007
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/50939 Redesigns React Native's `NewAppScreen` component, and moves it into a new `react-native/new-app-screen` package with a single component export. Deletes the old New App Screen under `'react-native/Libraries/NewAppScreen/'`. {F1977434404} **Motivation** - **Reduces our public API** (see https://github.com/react-native-community/discussions-and-proposals/pull/894) - Separates this screen from the main `react-native` package, where it was a number of subpath exports. - Reduces the size of the main `react-native` package, including image assets — which are redundant for consumers like Expo. - **Updated visual treatment** - Replace outdated logo, update to a responsive tablet/windowed layout. - Removes outdated guidance (e.g. "use cmd+R to reload"), and generally simplifies the layout (with the aim of reducing future maintenance). - **Simplifies template boilerplate** - `NewAppScreen` is now a fully encapsulated screen layout, avoiding the cruft of the previous modular design. **Integration plan** When we cut the `0.80-stable` branch, we'll update [the template](https://github.com/react-native-community/template/blob/main/template/App.tsx) to import and use `<NewAppScreen />`. - This will cause an extra runtime dependency in the template `package.json`, which will require user cleanup. We are happy with this tradeoff, given the self-evident package name, reduction of template boilerplate, and size reduction on the main `react-native` package. Changelog: [General][Breaking] - The `NewAppScreen` component is redesigned and moved to the `react-native/new-app-screen` package Reviewed By: cipolleschi Differential Revision: D73657878 fbshipit-source-id: 9ca07afa9fbdd6f32015eafa2f27d52ed182918e
45 lines
887 B
React
45 lines
887 B
React
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import {
|
|
SafeAreaView,
|
|
ScrollView,
|
|
StatusBar,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
useColorScheme,
|
|
} from 'react-native';
|
|
|
|
function App(): React.Node {
|
|
const isDarkMode = useColorScheme() === 'dark';
|
|
|
|
return (
|
|
<SafeAreaView>
|
|
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
|
|
<ScrollView contentInsetAdjustmentBehavior="automatic">
|
|
<View>
|
|
<Text style={styles.title}>Hello, World!</Text>
|
|
</View>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
title: {
|
|
fontSize: 24,
|
|
fontWeight: '600',
|
|
},
|
|
});
|
|
|
|
export default App;
|