Skip to content
Permalink
Browse files

Replace new app template with new app screen (#24805)

Summary:
This replaces the "new app screen" in the template with the new design from react-native-community/discussions-and-proposals#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: #24805

Differential Revision: D15334459

Pulled By: cpojer

fbshipit-source-id: d0b67d08f936eeabd9e93d4e0ff78302b4d6429f
  • Loading branch information...
eliperkins authored and facebook-github-bot committed May 14, 2019
1 parent e4aff42 commit fe88e9e48ce99cb8b9da913051cc36575310018b
@@ -0,0 +1,37 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
* @format
*/

import React from 'react';
import {Platform, StyleSheet, Text} from 'react-native';

const styles = StyleSheet.create({
highlight: {
fontWeight: '700',
},
});

const DebugInstructions = Platform.select({
ios: () => (
<Text>
Press <Text style={styles.highlight}>Cmd+D</Text> in the simulator or{' '}
<Text style={styles.highlight}>Shake</Text> your device to open the React
Native debug menu.
</Text>
),
default: () => (
<Text>
Press <Text style={styles.highlight}>menu button</Text> or
<Text style={styles.highlight}>Shake</Text> your device to open the React
Native debug menu.
</Text>
),
});

export default DebugInstructions;
@@ -0,0 +1,35 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
* @format
*/

import React from 'react';
import {Platform, StyleSheet, Text} from 'react-native';

const styles = StyleSheet.create({
highlight: {
fontWeight: '700',
},
});

const ReloadInstructions = Platform.select({
ios: () => (
<Text>
Press <Text style={styles.highlight}>Cmd+R</Text> in the simulator to
reload your app's code
</Text>
),
default: () => (
<Text>
Double tap <Text style={styles.highlight}>R</Text> on your keyboard to
reload your app's code
</Text>
),
});

export default ReloadInstructions;
@@ -10,119 +10,10 @@

'use strict';

import React, {Fragment} from 'react';
import {
StyleSheet,
ScrollView,
View,
Text,
Platform,
StatusBar,
} from 'react-native';

import Header from './components/Header';
import LearnMoreLinks from './components/LearnMoreLinks';
import Colors from './components/Colors';
import DebugInstructions from './components/DebugInstructions';
import ReloadInstructions from './components/ReloadInstructions';

const Section = ({children}) => (
<View style={styles.sectionContainer}>{children}</View>
);

const ReloadInstructions = () => {
return Platform.OS === 'ios' ? (
<Text style={styles.sectionDescription}>
Press <Text style={styles.highlight}>Cmd+R</Text> in the simulator to
reload your app's code
</Text>
) : (
<Text style={styles.sectionDescription}>
Double tap <Text style={styles.highlight}>R</Text> on your keyboard to
reload your app's code
</Text>
);
};

const DebugInstructions = () => {
return Platform.OS === 'ios' ? (
<Text style={styles.sectionDescription}>
Press <Text style={styles.highlight}>Cmd+D</Text> in the simulator or{' '}
<Text style={styles.highlight}>Shake</Text> your device to open the React
Native debug menu.
</Text>
) : (
<Text style={styles.sectionDescription}>
Press <Text style={styles.highlight}>menu button</Text> or
<Text style={styles.highlight}>Shake</Text> your device to open the React
Native debug menu.
</Text>
);
};

const App = () => {
return (
<Fragment>
<StatusBar barStyle="dark-content" />
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Header />
<View style={styles.body}>
<Section>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
</Text>
</Section>

<Section>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<ReloadInstructions />
</Section>

<Section>
<Text style={styles.sectionTitle}>Debug</Text>
<DebugInstructions />
</Section>

<Section>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs on what to do once seen how to work in React Native.
</Text>
</Section>
<LearnMoreLinks />
</View>
</ScrollView>
</Fragment>
);
};

const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
body: {
backgroundColor: Colors.white,
},
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;
export {Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions};
@@ -11,16 +11,66 @@
'use strict';

const React = require('react');
const NewAppScreen = require('../../Libraries/NewAppScreen').default;
const {View} = require('react-native');
const {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} = require('../../Libraries/NewAppScreen');

exports.title = 'New App Screen';
exports.description = 'Displays the content of the new app screen';
exports.examples = [
{
title: 'New App Screen',
description: 'Displays the content of the new app screen',
title: 'New App Screen Header',
description: 'Displays a welcome to building a React Native app',
render(): React.Element<any> {
return <NewAppScreen />;
return (
<View style={{overflow: 'hidden'}}>
<Header />
</View>
);
},
},
{
title: 'Learn More Links',
description:
'Learn more about the tools and techniques for building React Native apps.',
render(): React.Element<any> {
return <LearnMoreLinks />;
},
},
{
title: 'New App Screen Colors',
description: 'Consistent colors to use throughout the new app screen.',
render(): React.Element<any> {
return (
<View style={{flexDirection: 'row'}}>
{Object.keys(Colors).map(key => (
<View
style={{width: 50, height: 50, backgroundColor: Colors[key]}}
/>
))}
</View>
);
},
},
{
title: 'Debug Instructions',
description:
'Platform-specific instructions on how to start debugging a React Native app.',
render(): React.Element<any> {
return <DebugInstructions />;
},
},
{
title: 'Reload Instructions',
description:
'Platform-specific instructions on how to reload a React Native app.',
render(): React.Element<any> {
return <ReloadInstructions />;
},
},
];
@@ -6,44 +6,83 @@
* @flow
*/

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import React, {Fragment} from 'react';
import {StyleSheet, ScrollView, View, Text, StatusBar} 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 {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const App = () => {
return (
<Fragment>
<StatusBar barStyle="dark-content" />
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Header />
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs on what to do once seen how to work in React Native.
</Text>
</View>
<LearnMoreLinks />
</View>
</ScrollView>
</Fragment>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
scrollView: {
backgroundColor: Colors.lighter,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
});

export default App;

0 comments on commit fe88e9e

Please sign in to comment.
You can’t perform that action at this time.