Skip to content

Commit 6b393b2

Browse files
cpojerfacebook-github-bot
cpojer
authored and
facebook-github-bot
committed
Polish the new app screen (#24737)
Summary: Continuation of #24687 > Issue: [Polish the "new app screen"](react-native-community/discussions-and-proposals#122) > This is the pull request for the new intro screen proposal in react native as directed by cpojer This PR was created because the previous one could not be pushed to for some reason. I cleaned up a few small things and added the component as an example to RNTester so we can keep iterating. My plan is to land this, and then polish it and make it the default in a follow-up. [General][Added] - New Intro screen, Icons Removed Lottie Integration 100% React Native 💥 Pull Request resolved: #24737 Differential Revision: D15259092 Pulled By: cpojer fbshipit-source-id: bc141fb1425cf354f29deffd907c37f83fd92c75
1 parent d7447fa commit 6b393b2

File tree

8 files changed

+359
-0
lines changed

8 files changed

+359
-0
lines changed

‎Libraries/NewAppScreen/components/Colors.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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+
'use strict';
12+
13+
export default {
14+
primary: '#1292B4',
15+
white: '#FFF',
16+
lighter: '#F3F3F3',
17+
light: '#DAE1E7',
18+
dark: '#444',
19+
black: '#000',
20+
};

‎Libraries/NewAppScreen/components/Header.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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+
'use strict';
12+
13+
import React from 'react';
14+
import {View, Text, StyleSheet, ImageBackground} from 'react-native';
15+
import Colors from './Colors';
16+
17+
const Header = () => (
18+
<View style={styles.container}>
19+
<ImageBackground
20+
accessibilityRole={'image'}
21+
source={require('./logo.png')}
22+
style={styles.backgroundLogo}
23+
/>
24+
25+
<Text style={styles.text}>Welcome to React Native</Text>
26+
</View>
27+
);
28+
29+
const styles = StyleSheet.create({
30+
container: {
31+
alignItems: 'center',
32+
justifyContent: 'center',
33+
paddingTop: 100,
34+
paddingBottom: 40,
35+
paddingHorizontal: 32,
36+
backgroundColor: Colors.lighter,
37+
},
38+
backgroundLogo: {
39+
position: 'absolute',
40+
top: -20,
41+
left: -200,
42+
opacity: 0.2,
43+
alignItems: 'center',
44+
justifyContent: 'center',
45+
height: 540,
46+
width: 540,
47+
},
48+
text: {
49+
fontSize: 40,
50+
fontWeight: '600',
51+
textAlign: 'center',
52+
color: Colors.black,
53+
},
54+
});
55+
56+
export default Header;

‎Libraries/NewAppScreen/components/LearnMoreLinks.js

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
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+
'use strict';
12+
13+
import React from 'react';
14+
import {View, Text, StyleSheet, TouchableOpacity, Linking} from 'react-native';
15+
import Colors from './Colors';
16+
17+
const links = [
18+
{
19+
title: 'The Basics',
20+
link: 'https://facebook.github.io/react-native/docs/tutorial',
21+
description:
22+
'Read the docs on what to do once seen how to work in React Native.',
23+
},
24+
{
25+
title: 'Style',
26+
link: 'https://facebook.github.io/react-native/docs/style',
27+
description: 'All of the core components accept a prop named style.',
28+
},
29+
{
30+
title: 'Layout',
31+
link: 'https://facebook.github.io/react-native/docs/flexbox',
32+
description:
33+
'A component can specify the layout of its children using the flexbox specification.',
34+
},
35+
{
36+
title: 'Components',
37+
link: 'https://facebook.github.io/react-native/docs/components-and-apis',
38+
description: 'The full list of components and APIs inside React Native.',
39+
},
40+
{
41+
title: 'Navigation',
42+
link: 'https://facebook.github.io/react-native/docs/navigation',
43+
description:
44+
'How to handle moving between screens inside your application.',
45+
},
46+
{
47+
title: 'Networking',
48+
link: 'https://facebook.github.io/react-native/docs/network',
49+
description: 'How to use the Fetch API in React Native.',
50+
},
51+
{
52+
title: 'Help',
53+
link: 'https://facebook.github.io/react-native/help',
54+
description:
55+
'Need more help? There are many other React Native developers who may have the answer.',
56+
},
57+
];
58+
59+
const LinkList = () => (
60+
<View style={styles.container}>
61+
{links.map((item, index) => {
62+
return (
63+
<React.Fragment key={index}>
64+
<View style={styles.separator} />
65+
<TouchableOpacity
66+
accessibilityRole={'button'}
67+
onPress={() => Linking.openURL(item.link)}
68+
style={styles.linkContainer}>
69+
<Text style={styles.link}>{item.title}</Text>
70+
<Text style={styles.description}>{item.description}</Text>
71+
</TouchableOpacity>
72+
</React.Fragment>
73+
);
74+
})}
75+
</View>
76+
);
77+
78+
const styles = StyleSheet.create({
79+
container: {
80+
marginTop: 32,
81+
paddingHorizontal: 24,
82+
},
83+
linkContainer: {
84+
flexWrap: 'wrap',
85+
flexDirection: 'row',
86+
justifyContent: 'space-between',
87+
alignItems: 'center',
88+
paddingVertical: 8,
89+
},
90+
link: {
91+
flex: 2,
92+
fontSize: 18,
93+
fontWeight: '400',
94+
color: Colors.primary,
95+
},
96+
description: {
97+
flex: 3,
98+
paddingVertical: 16,
99+
fontWeight: '400',
100+
fontSize: 18,
101+
color: Colors.dark,
102+
},
103+
separator: {
104+
backgroundColor: Colors.light,
105+
height: 1,
106+
},
107+
});
108+
109+
export default LinkList;

‎Libraries/NewAppScreen/components/logo.png

23.5 KB
Loading

‎Libraries/NewAppScreen/index.js

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

‎RNTester/js/NewAppScreenExample.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+
* @format
8+
* @flow
9+
*/
10+
11+
'use strict';
12+
13+
const React = require('react');
14+
const NewAppScreen = require('../../Libraries/NewAppScreen').default;
15+
16+
exports.title = 'New App Screen';
17+
exports.description = 'Displays the content of the new app screen';
18+
exports.examples = [
19+
{
20+
title: 'New App Screen',
21+
description: 'Displays the content of the new app screen',
22+
render(): React.Element<any> {
23+
return <NewAppScreen />;
24+
},
25+
},
26+
];

‎RNTester/js/RNTesterList.android.js

+4
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,10 @@ const ComponentExamples: Array<RNTesterExample> = [
4141
key: 'MultiColumnExample',
4242
module: require('./MultiColumnExample'),
4343
},
44+
{
45+
key: 'NewAppScreenExample',
46+
module: require('./NewAppScreenExample'),
47+
},
4448
{
4549
key: 'PickerExample',
4650
module: require('./PickerExample'),

‎RNTester/js/RNTesterList.ios.js

+5
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,11 @@ const ComponentExamples: Array<RNTesterExample> = [
7373
module: require('./MultiColumnExample'),
7474
supportsTVOS: true,
7575
},
76+
{
77+
key: 'NewAppScreenExample',
78+
module: require('./NewAppScreenExample'),
79+
supportsTVOS: false,
80+
},
7681
{
7782
key: 'PickerExample',
7883
module: require('./PickerExample'),

0 commit comments

Comments
 (0)