Skip to content
Permalink
Browse files

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
  • Loading branch information...
cpojer authored and facebook-github-bot committed May 8, 2019
1 parent d7447fa commit 6b393b27e18e663d39b66fd121ee302bce29d77d
@@ -0,0 +1,20 @@
/**
* 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
*/

'use strict';

export default {
primary: '#1292B4',
white: '#FFF',
lighter: '#F3F3F3',
light: '#DAE1E7',
dark: '#444',
black: '#000',
};
@@ -0,0 +1,56 @@
/**
* 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
*/

'use strict';

import React from 'react';
import {View, Text, StyleSheet, ImageBackground} from 'react-native';
import Colors from './Colors';

const Header = () => (
<View style={styles.container}>
<ImageBackground
accessibilityRole={'image'}
source={require('./logo.png')}
style={styles.backgroundLogo}
/>

<Text style={styles.text}>Welcome to React Native</Text>
</View>
);

const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
paddingTop: 100,
paddingBottom: 40,
paddingHorizontal: 32,
backgroundColor: Colors.lighter,
},
backgroundLogo: {
position: 'absolute',
top: -20,
left: -200,
opacity: 0.2,
alignItems: 'center',
justifyContent: 'center',
height: 540,
width: 540,
},
text: {
fontSize: 40,
fontWeight: '600',
textAlign: 'center',
color: Colors.black,
},
});

export default Header;
@@ -0,0 +1,109 @@
/**
* 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
*/

'use strict';

import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Linking} from 'react-native';
import Colors from './Colors';

const links = [
{
title: 'The Basics',
link: 'https://facebook.github.io/react-native/docs/tutorial',
description:
'Read the docs on what to do once seen how to work in React Native.',
},
{
title: 'Style',
link: 'https://facebook.github.io/react-native/docs/style',
description: 'All of the core components accept a prop named style.',
},
{
title: 'Layout',
link: 'https://facebook.github.io/react-native/docs/flexbox',
description:
'A component can specify the layout of its children using the flexbox specification.',
},
{
title: 'Components',
link: 'https://facebook.github.io/react-native/docs/components-and-apis',
description: 'The full list of components and APIs inside React Native.',
},
{
title: 'Navigation',
link: 'https://facebook.github.io/react-native/docs/navigation',
description:
'How to handle moving between screens inside your application.',
},
{
title: 'Networking',
link: 'https://facebook.github.io/react-native/docs/network',
description: 'How to use the Fetch API in React Native.',
},
{
title: 'Help',
link: 'https://facebook.github.io/react-native/help',
description:
'Need more help? There are many other React Native developers who may have the answer.',
},
];

const LinkList = () => (
<View style={styles.container}>
{links.map((item, index) => {
return (
<React.Fragment key={index}>
<View style={styles.separator} />
<TouchableOpacity
accessibilityRole={'button'}
onPress={() => Linking.openURL(item.link)}
style={styles.linkContainer}>
<Text style={styles.link}>{item.title}</Text>
<Text style={styles.description}>{item.description}</Text>
</TouchableOpacity>
</React.Fragment>
);
})}
</View>
);

const styles = StyleSheet.create({
container: {
marginTop: 32,
paddingHorizontal: 24,
},
linkContainer: {
flexWrap: 'wrap',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 8,
},
link: {
flex: 2,
fontSize: 18,
fontWeight: '400',
color: Colors.primary,
},
description: {
flex: 3,
paddingVertical: 16,
fontWeight: '400',
fontSize: 18,
color: Colors.dark,
},
separator: {
backgroundColor: Colors.light,
height: 1,
},
});

export default LinkList;
Binary file not shown.
@@ -0,0 +1,139 @@
/**
* 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
*/

'use strict';

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

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

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>
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>
<SafeAreaView style={styles.topSafeArea} />

<SafeAreaView style={styles.bottomSafeArea}>
<StatusBar barStyle="dark-content" />
<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>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</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>
</SafeAreaView>
</Fragment>
);
};

const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
topSafeArea: {
flex: 0,
backgroundColor: Colors.lighter,
},
bottomSafeArea: {
flex: 1,
backgroundColor: Colors.white,
},
body: {
backgroundColor: Colors.white,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
});

export default App;
@@ -0,0 +1,26 @@
/**
* 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.
*
* @format
* @flow
*/

'use strict';

const React = require('react');
const NewAppScreen = require('../../Libraries/NewAppScreen').default;

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',
render(): React.Element<any> {
return <NewAppScreen />;
},
},
];
@@ -41,6 +41,10 @@ const ComponentExamples: Array<RNTesterExample> = [
key: 'MultiColumnExample',
module: require('./MultiColumnExample'),
},
{
key: 'NewAppScreenExample',
module: require('./NewAppScreenExample'),
},
{
key: 'PickerExample',
module: require('./PickerExample'),
@@ -73,6 +73,11 @@ const ComponentExamples: Array<RNTesterExample> = [
module: require('./MultiColumnExample'),
supportsTVOS: true,
},
{
key: 'NewAppScreenExample',
module: require('./NewAppScreenExample'),
supportsTVOS: false,
},
{
key: 'PickerExample',
module: require('./PickerExample'),

1 comment on commit 6b393b2

@karanpratapsingh

This comment has been minimized.

Copy link

commented on 6b393b2 May 14, 2019

Excited for this 🎉

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