update launch-screen with react-native's new default generated home s…

…creen

boilerplate/app/modules/home/launch-screen.js

@@ -1,7 +1,9 @@
 import React from 'react'
 import { ScrollView, Text, Image, View } from 'react-native'
+import { DebugInstructions, ReloadInstructions } from 'react-native/Libraries/NewAppScreen'
 import { Navigation } from 'react-native-navigation'
 
+import LearnMoreLinks from './learn-more-links.component.js'
 import { Images } from '../../shared/themes'
 import styles from './launch-screen.styles'
 
@@ -36,22 +38,47 @@ export default class LaunchScreen extends React.Component {
     this.showSideMenu()
   }
 
-  render () {
+  render() {
     return (
-      <View style={styles.mainContainer} testID='launchScreen'>
-        <Image source={Images.background} style={styles.backgroundImage} resizeMode='stretch' />
-        <ScrollView style={styles.container}>
+      <View style={styles.mainContainer} testID="launchScreen">
+        <Image source={Images.background} style={styles.backgroundImage} resizeMode="stretch" />
+        <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}>
           <View style={styles.centered}>
             <Image source={Images.logoJhipster} style={styles.logo} />
+            <Text style={styles.welcomeText}>{'Welcome to your Ignite JHipster app.'}</Text>
           </View>
-
-          <View style={styles.section} >
-            <Image source={Images.ready} />
-            <Text style={styles.sectionText}>
-              {'Welcome to your Ignite JHipster app.'}
-            </Text>
+          <View style={styles.hairline} />
+          {/* <Header /> */}
+          {global.HermesInternal == null ? null : (
+            <View style={styles.engine}>
+              <Text style={styles.footer}>Engine: Hermes</Text>
+            </View>
+          )}
+          <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/modules/home/launch-screen.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>
+            </View>
+            <LearnMoreLinks />
           </View>
-
         </ScrollView>
       </View>
     )

boilerplate/app/modules/home/launch-screen.styles.js

@@ -4,18 +4,61 @@ import { Metrics, ApplicationStyles, Colors } from '../../shared/themes/'
 
 export default StyleSheet.create({
   ...ApplicationStyles.screen,
-  container: {
-    flex: 1,
-    paddingBottom: Metrics.baseMargin,
-    backgroundColor: Colors.transparent
+  welcomeText: {
+    fontSize: 20,
+    color: Colors.snow,
+    fontWeight: '600',
+  },
+  hairline: {
+    borderBottomColor: Colors.snow,
+    borderBottomWidth: 1,
+    marginHorizontal: 20,
+    marginTop: 32,
   },
   logo: {
-    marginTop: Metrics.doubleSection,
+    marginTop: Metrics.section,
     height: Metrics.images.logo,
     width: Metrics.images.logo,
-    resizeMode: 'contain'
+    resizeMode: 'contain',
   },
   centered: {
-    alignItems: 'center'
-  }
+    alignItems: 'center',
+  },
+  scrollView: {
+    paddingBottom: Metrics.baseMargin,
+    backgroundColor: Colors.lighter,
+  },
+  engine: {
+    position: 'absolute',
+    right: 0,
+  },
+  body: {
+    backgroundColor: Colors.transparent,
+  },
+  sectionContainer: {
+    marginTop: 32,
+    paddingHorizontal: 24,
+  },
+  sectionTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+    color: Colors.snow,
+  },
+  sectionDescription: {
+    marginTop: 8,
+    fontSize: 18,
+    fontWeight: '400',
+    color: Colors.snow,
+  },
+  highlight: {
+    fontWeight: '700',
+  },
+  footer: {
+    color: Colors.snow,
+    fontSize: 12,
+    fontWeight: '600',
+    padding: 4,
+    paddingRight: 12,
+    textAlign: 'right',
+  },
 })

boilerplate/app/modules/home/learn-more-links.component.js.ejs

@@ -0,0 +1,125 @@
+/**
+ * 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.
+ *
+ */
+// slightly modified version of https://github.com/facebook/react-native/blob/e028ac7af2d5b48860f01055f3bbacf91f6b6956/Libraries/NewAppScreen/components/LearnMoreLinks.js
+
+import openURLInBrowser from 'react-native/Libraries/Core/Devtools/openURLInBrowser'
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
+import React from 'react'
+import { Colors } from '../../shared/themes/'
+
+const links = [
+  <%_ if (props.authType === 'oauth2') { _%>
+  {
+    id: 0,
+    title: 'OAuth2 Login Config',
+    link: 'https://github.com/ruddell/ignite-jhipster/blob/master/docs/oauth2-oidc.md',
+    description: 'Configuring Keycloak or Okta for login.',
+  },
+  <%_ } _%>
+  {
+    id: 1,
+    title: 'Project Structure',
+    link: 'https://github.com/ruddell/ignite-jhipster/blob/master/docs/project-structure.md',
+    description: "Explains this app's project structure.",
+  },
+  {
+    id: 2,
+    title: 'The Basics',
+    link: 'https://facebook.github.io/react-native/docs/tutorial',
+    description: 'Explains a Hello World for React Native.',
+  },
+  {
+    id: 3,
+    title: 'Style',
+    link: 'https://facebook.github.io/react-native/docs/style',
+    description: 'Covers how to use the prop named style which controls the visuals.',
+  },
+  {
+    id: 4,
+    title: 'Layout',
+    link: 'https://facebook.github.io/react-native/docs/flexbox',
+    description: 'React Native uses flexbox for layout, learn how it works.',
+  },
+  {
+    id: 5,
+    title: 'Components',
+    link: 'https://facebook.github.io/react-native/docs/components-and-apis',
+    description: 'The full list of components and APIs inside React Native.',
+  },
+  {
+    id: 6,
+    title: 'Navigation',
+    link: 'https://wix.github.io/react-native-navigation/#/docs/Usage',
+    description: 'How to handle moving between screens inside your application.',
+  },
+  {
+    id: 7,
+    title: 'Storybook',
+    link: 'https://github.com/ruddell/ignite-jhipster/blob/master/docs/storybook.md',
+    description: 'How to use Storybook with React Native.',
+  },
+  <%_ if (props.websockets) { _%>
+  {
+    id: 8,
+    title: 'Websockets Demo',
+    link: 'https://github.com/ruddell/ignite-jhipster/blob/master/docs/websockets.md',
+    description: 'Websockets "chat" demo screen.',
+  },
+  <%_ } _%>
+]
+
+const LinkList = () => (
+  <View style={styles.container}>
+    {links.map(({ id, title, link, description }) => {
+      return (
+        <React.Fragment key={id}>
+          <View style={styles.separator} />
+          <TouchableOpacity
+            accessibilityRole={'button'}
+            onPress={() => openURLInBrowser(link)}
+            style={styles.linkContainer}>
+            <Text style={styles.link}>{title}</Text>
+            <Text style={styles.description}>{description}</Text>
+          </TouchableOpacity>
+        </React.Fragment>
+      )
+    })}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 24,
+  },
+  linkContainer: {
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 8,
+  },
+  link: {
+    flex: 2,
+    fontSize: 18,
+    fontWeight: '600',
+    color: Colors.snow,
+  },
+  description: {
+    flex: 3,
+    paddingVertical: 5,
+    fontWeight: '400',
+    fontSize: 18,
+    color: Colors.snow,
+  },
+  separator: {
+    backgroundColor: Colors.light,
+    height: 1,
+  },
+})
+
+export default LinkList

boilerplate/app/shared/themes/metrics.js

@@ -28,7 +28,7 @@ const metrics = {
     small: 20,
     medium: 40,
     large: 60,
-    logo: 200
+    logo: 100
   }
 }
 

src/boilerplate/files.js

@@ -94,6 +94,10 @@ module.exports = async function (context, props, jhipsterConfig) {
       template: 'app/navigation/layouts.js.ejs',
       target: 'app/navigation/layouts.js'
     },
+    {
+      template: 'app/modules/home/learn-more-links.component.js.ejs',
+      target: 'app/modules/home/learn-more-links.component.js'
+    },
     {
       template: 'app/modules/login/login-screen.js.ejs',
       target: 'app/modules/login/login-screen.js'