diff --git a/template/App.js b/template/App.js
index 171d0f0f4a8532..be84f15457c8df 100644
--- a/template/App.js
+++ b/template/App.js
@@ -6,44 +6,116 @@
* @flow
*/
-import React, {Component} from 'react';
-import {Platform, StyleSheet, Text, View} from 'react-native';
-
-const instructions = Platform.select({
- ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
- android:
- 'Double tap R on your keyboard to reload,\n' +
- 'Shake or press menu button for dev menu',
-});
+import React, {Fragment} from 'react';
+import {
+ StyleSheet,
+ ScrollView,
+ View,
+ Text,
+ Platform,
+ StatusBar,
+} from 'react-native';
+
+import Header from 'react-native/Libraries/NewAppScreen/components/Header';
+import LearnMoreLinks from 'react-native/Libraries/NewAppScreen/components/LearnMoreLinks';
+import Colors from 'react-native/Libraries/NewAppScreen/components/Colors';
+
+const Section = ({children}) => (
+ {children}
+);
+
+const ReloadInstructions = () => {
+ return Platform.OS === 'ios' ? (
+
+ Press Cmd+R in the simulator to
+ reload your app's code
+
+ ) : (
+
+ Double tap R on your keyboard to
+ reload your app's code
+
+ );
+};
+
+const DebugInstructions = () => {
+ return Platform.OS === 'ios' ? (
+
+ Press Cmd+D in the simulator or{' '}
+ Shake your device to open the React
+ Native debug menu.
+
+ ) : (
+
+ Press menu button or
+ Shake your device to open the React
+ Native debug menu.
+
+ );
+};
-type Props = {};
-export default class App extends Component {
- render() {
- return (
-
- Welcome to React Native!
- To get started, edit App.js
- {instructions}
-
- );
- }
-}
+const App = () => {
+ return (
+
+
+
+
+
+
+ Step One
+
+ Edit App.js to change this
+ screen and then come back to see your edits.
+
+
+
+
+
+ Learn More
+
+ Read the docs on what to do once seen how to work in React Native.
+
+
+
+
+
+
+ );
+};
const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#F5FCFF',
+ scrollView: {
+ backgroundColor: Colors.lighter,
},
- welcome: {
- fontSize: 20,
- textAlign: 'center',
- margin: 10,
+ body: {
+ backgroundColor: Colors.white,
},
- instructions: {
- textAlign: 'center',
- color: '#333333',
- marginBottom: 5,
+ sectionContainer: {
+ marginTop: 32,
+ paddingHorizontal: 24,
+ },
+ sectionTitle: {
+ fontSize: 24,
+ fontWeight: '600',
+ color: Colors.black,
+ },
+ sectionDescription: {
+ marginTop: 8,
+ fontSize: 18,
+ fontWeight: '400',
+ color: Colors.dark,
+ },
+ highlight: {
+ fontWeight: '700',
},
});
+
+export default App;