Skip to content

Commit fe88e9e

Browse files
eliperkinsfacebook-github-bot
eliperkins
authored and
facebook-github-bot
committed
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
1 parent e4aff42 commit fe88e9e

File tree

5 files changed

+201
-149
lines changed

5 files changed

+201
-149
lines changed

‎Libraries/NewAppScreen/components/DebugInstructions.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
* @format
9+
*/
10+
11+
import React from 'react';
12+
import {Platform, StyleSheet, Text} from 'react-native';
13+
14+
const styles = StyleSheet.create({
15+
highlight: {
16+
fontWeight: '700',
17+
},
18+
});
19+
20+
const DebugInstructions = Platform.select({
21+
ios: () => (
22+
<Text>
23+
Press <Text style={styles.highlight}>Cmd+D</Text> in the simulator or{' '}
24+
<Text style={styles.highlight}>Shake</Text> your device to open the React
25+
Native debug menu.
26+
</Text>
27+
),
28+
default: () => (
29+
<Text>
30+
Press <Text style={styles.highlight}>menu button</Text> or
31+
<Text style={styles.highlight}>Shake</Text> your device to open the React
32+
Native debug menu.
33+
</Text>
34+
),
35+
});
36+
37+
export default DebugInstructions;

‎Libraries/NewAppScreen/components/ReloadInstructions.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
* @format
9+
*/
10+
11+
import React from 'react';
12+
import {Platform, StyleSheet, Text} from 'react-native';
13+
14+
const styles = StyleSheet.create({
15+
highlight: {
16+
fontWeight: '700',
17+
},
18+
});
19+
20+
const ReloadInstructions = Platform.select({
21+
ios: () => (
22+
<Text>
23+
Press <Text style={styles.highlight}>Cmd+R</Text> in the simulator to
24+
reload your app's code
25+
</Text>
26+
),
27+
default: () => (
28+
<Text>
29+
Double tap <Text style={styles.highlight}>R</Text> on your keyboard to
30+
reload your app's code
31+
</Text>
32+
),
33+
});
34+
35+
export default ReloadInstructions;

‎Libraries/NewAppScreen/index.js

+3-112
Original file line numberDiff line numberDiff line change
@@ -10,119 +10,10 @@
1010

1111
'use strict';
1212

13-
import React, {Fragment} from 'react';
14-
import {
15-
StyleSheet,
16-
ScrollView,
17-
View,
18-
Text,
19-
Platform,
20-
StatusBar,
21-
} from 'react-native';
22-
2313
import Header from './components/Header';
2414
import LearnMoreLinks from './components/LearnMoreLinks';
2515
import Colors from './components/Colors';
16+
import DebugInstructions from './components/DebugInstructions';
17+
import ReloadInstructions from './components/ReloadInstructions';
2618

27-
const Section = ({children}) => (
28-
<View style={styles.sectionContainer}>{children}</View>
29-
);
30-
31-
const ReloadInstructions = () => {
32-
return Platform.OS === 'ios' ? (
33-
<Text style={styles.sectionDescription}>
34-
Press <Text style={styles.highlight}>Cmd+R</Text> in the simulator to
35-
reload your app's code
36-
</Text>
37-
) : (
38-
<Text style={styles.sectionDescription}>
39-
Double tap <Text style={styles.highlight}>R</Text> on your keyboard to
40-
reload your app's code
41-
</Text>
42-
);
43-
};
44-
45-
const DebugInstructions = () => {
46-
return Platform.OS === 'ios' ? (
47-
<Text style={styles.sectionDescription}>
48-
Press <Text style={styles.highlight}>Cmd+D</Text> in the simulator or{' '}
49-
<Text style={styles.highlight}>Shake</Text> your device to open the React
50-
Native debug menu.
51-
</Text>
52-
) : (
53-
<Text style={styles.sectionDescription}>
54-
Press <Text style={styles.highlight}>menu button</Text> or
55-
<Text style={styles.highlight}>Shake</Text> your device to open the React
56-
Native debug menu.
57-
</Text>
58-
);
59-
};
60-
61-
const App = () => {
62-
return (
63-
<Fragment>
64-
<StatusBar barStyle="dark-content" />
65-
<ScrollView
66-
contentInsetAdjustmentBehavior="automatic"
67-
style={styles.scrollView}>
68-
<Header />
69-
<View style={styles.body}>
70-
<Section>
71-
<Text style={styles.sectionTitle}>Step One</Text>
72-
<Text style={styles.sectionDescription}>
73-
Edit <Text style={styles.highlight}>App.js</Text> to change this
74-
screen and then come back to see your edits.
75-
</Text>
76-
</Section>
77-
78-
<Section>
79-
<Text style={styles.sectionTitle}>See Your Changes</Text>
80-
<ReloadInstructions />
81-
</Section>
82-
83-
<Section>
84-
<Text style={styles.sectionTitle}>Debug</Text>
85-
<DebugInstructions />
86-
</Section>
87-
88-
<Section>
89-
<Text style={styles.sectionTitle}>Learn More</Text>
90-
<Text style={styles.sectionDescription}>
91-
Read the docs on what to do once seen how to work in React Native.
92-
</Text>
93-
</Section>
94-
<LearnMoreLinks />
95-
</View>
96-
</ScrollView>
97-
</Fragment>
98-
);
99-
};
100-
101-
const styles = StyleSheet.create({
102-
scrollView: {
103-
backgroundColor: Colors.lighter,
104-
},
105-
body: {
106-
backgroundColor: Colors.white,
107-
},
108-
sectionContainer: {
109-
marginTop: 32,
110-
paddingHorizontal: 24,
111-
},
112-
sectionTitle: {
113-
fontSize: 24,
114-
fontWeight: '600',
115-
color: Colors.black,
116-
},
117-
sectionDescription: {
118-
marginTop: 8,
119-
fontSize: 18,
120-
fontWeight: '400',
121-
color: Colors.dark,
122-
},
123-
highlight: {
124-
fontWeight: '700',
125-
},
126-
});
127-
128-
export default App;
19+
export {Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions};

‎RNTester/js/NewAppScreenExample.js

+54-4
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,66 @@
1111
'use strict';
1212

1313
const React = require('react');
14-
const NewAppScreen = require('../../Libraries/NewAppScreen').default;
14+
const {View} = require('react-native');
15+
const {
16+
Header,
17+
LearnMoreLinks,
18+
Colors,
19+
DebugInstructions,
20+
ReloadInstructions,
21+
} = require('../../Libraries/NewAppScreen');
1522

1623
exports.title = 'New App Screen';
1724
exports.description = 'Displays the content of the new app screen';
1825
exports.examples = [
1926
{
20-
title: 'New App Screen',
21-
description: 'Displays the content of the new app screen',
27+
title: 'New App Screen Header',
28+
description: 'Displays a welcome to building a React Native app',
2229
render(): React.Element<any> {
23-
return <NewAppScreen />;
30+
return (
31+
<View style={{overflow: 'hidden'}}>
32+
<Header />
33+
</View>
34+
);
35+
},
36+
},
37+
{
38+
title: 'Learn More Links',
39+
description:
40+
'Learn more about the tools and techniques for building React Native apps.',
41+
render(): React.Element<any> {
42+
return <LearnMoreLinks />;
43+
},
44+
},
45+
{
46+
title: 'New App Screen Colors',
47+
description: 'Consistent colors to use throughout the new app screen.',
48+
render(): React.Element<any> {
49+
return (
50+
<View style={{flexDirection: 'row'}}>
51+
{Object.keys(Colors).map(key => (
52+
<View
53+
style={{width: 50, height: 50, backgroundColor: Colors[key]}}
54+
/>
55+
))}
56+
</View>
57+
);
58+
},
59+
},
60+
{
61+
title: 'Debug Instructions',
62+
description:
63+
'Platform-specific instructions on how to start debugging a React Native app.',
64+
render(): React.Element<any> {
65+
return <DebugInstructions />;
66+
},
67+
},
68+
{
69+
title: 'Reload Instructions',
70+
description:
71+
'Platform-specific instructions on how to reload a React Native app.',
72+
render(): React.Element<any> {
73+
return <ReloadInstructions />;
2474
},
2575
},
2676
];

‎template/App.js

+72-33
Original file line numberDiff line numberDiff line change
@@ -6,44 +6,83 @@
66
* @flow
77
*/
88

9-
import React, {Component} from 'react';
10-
import {Platform, StyleSheet, Text, View} from 'react-native';
9+
import React, {Fragment} from 'react';
10+
import {StyleSheet, ScrollView, View, Text, StatusBar} from 'react-native';
1111

12-
const instructions = Platform.select({
13-
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
14-
android:
15-
'Double tap R on your keyboard to reload,\n' +
16-
'Shake or press menu button for dev menu',
17-
});
12+
import {
13+
Header,
14+
LearnMoreLinks,
15+
Colors,
16+
DebugInstructions,
17+
ReloadInstructions,
18+
} from 'react-native/Libraries/NewAppScreen';
1819

19-
type Props = {};
20-
export default class App extends Component<Props> {
21-
render() {
22-
return (
23-
<View style={styles.container}>
24-
<Text style={styles.welcome}>Welcome to React Native!</Text>
25-
<Text style={styles.instructions}>To get started, edit App.js</Text>
26-
<Text style={styles.instructions}>{instructions}</Text>
27-
</View>
28-
);
29-
}
30-
}
20+
const App = () => {
21+
return (
22+
<Fragment>
23+
<StatusBar barStyle="dark-content" />
24+
<ScrollView
25+
contentInsetAdjustmentBehavior="automatic"
26+
style={styles.scrollView}>
27+
<Header />
28+
<View style={styles.body}>
29+
<View style={styles.sectionContainer}>
30+
<Text style={styles.sectionTitle}>Step One</Text>
31+
<Text style={styles.sectionDescription}>
32+
Edit <Text style={styles.highlight}>App.js</Text> to change this
33+
screen and then come back to see your edits.
34+
</Text>
35+
</View>
36+
<View style={styles.sectionContainer}>
37+
<Text style={styles.sectionTitle}>See Your Changes</Text>
38+
<Text style={styles.sectionDescription}>
39+
<ReloadInstructions />
40+
</Text>
41+
</View>
42+
<View style={styles.sectionContainer}>
43+
<Text style={styles.sectionTitle}>Debug</Text>
44+
<Text style={styles.sectionDescription}>
45+
<DebugInstructions />
46+
</Text>
47+
</View>
48+
<View style={styles.sectionContainer}>
49+
<Text style={styles.sectionTitle}>Learn More</Text>
50+
<Text style={styles.sectionDescription}>
51+
Read the docs on what to do once seen how to work in React Native.
52+
</Text>
53+
</View>
54+
<LearnMoreLinks />
55+
</View>
56+
</ScrollView>
57+
</Fragment>
58+
);
59+
};
3160

3261
const styles = StyleSheet.create({
33-
container: {
34-
flex: 1,
35-
justifyContent: 'center',
36-
alignItems: 'center',
37-
backgroundColor: '#F5FCFF',
62+
scrollView: {
63+
backgroundColor: Colors.lighter,
64+
},
65+
body: {
66+
backgroundColor: Colors.white,
67+
},
68+
sectionContainer: {
69+
marginTop: 32,
70+
paddingHorizontal: 24,
3871
},
39-
welcome: {
40-
fontSize: 20,
41-
textAlign: 'center',
42-
margin: 10,
72+
sectionTitle: {
73+
fontSize: 24,
74+
fontWeight: '600',
75+
color: Colors.black,
4376
},
44-
instructions: {
45-
textAlign: 'center',
46-
color: '#333333',
47-
marginBottom: 5,
77+
sectionDescription: {
78+
marginTop: 8,
79+
fontSize: 18,
80+
fontWeight: '400',
81+
color: Colors.dark,
82+
},
83+
highlight: {
84+
fontWeight: '700',
4885
},
4986
});
87+
88+
export default App;

0 commit comments

Comments
 (0)