Replace new app template with new app screen

[eliperkins]

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

Changelog

[General] [Changed] - Updated new app template design 💖

Test Plan

1. Checkout this pull request (git fetch origin pull/ID/head:BRANCHNAME && git checkout BRANCHNAME, see also: https://help.github.com/en/articles/checking-out-pull-requests-locally).
2. Change the react-native field in react-native/template/package.json to the absolute path of the react native repo, for example: "react-native": "file:///Users/username/react-native".
3. Run npx @react-native-community/cli@next init TestApp --template file:///Users/username/react-native (If you don't have npx, run brew install npm).
4. Note that a new app built with this template looks like the designs from Polish the "new app screen" react-native-community/discussions-and-proposals#122 !

[eliperkins]

So this ends up clocking in at ~120 lines of code, which is over our ideal new app template of ~35-45 LoC.

One thought I have is to pull out the reload and debug instructions into the react-native/Libraries/NewAppScreen module itself, which should cut out ~25-30 LoC.

My second thought is to turn Section and it's subsequent Text usages into a more refined component, and tuck that into the NewAppScreen module as well. This seems to be where we introduce a lot of LoC. However, this is also the core usage of <View> and <Text>, so it'd be great to keep that around somehow.

I'm keen on some other ideas on how to reduce the lines of code here too!

[orta]

I don't know where the number comes from but 30-40 LOC of the JSX in the render I think is totally fine 👍

Whether there value in having the two platform-y functions is a good Q - but I'm pretty happy with the rest of the code.

[cpojer]

I agree we should trim it down. Let's tuck ReloadInstructions and DebugInstructions into the NewAppScreen and also put those sections into the LeanMoreLinks component (possibly named differently?). In terms of size that should trim it enough to be small but it will still have View/Text in it. Does that make sense?

[cpojer]

Oops, meant to request changes :D

[eliperkins]

I don't know where the number comes from but 30-40 LOC of the JSX in the render I think is totally fine 👍

@orta I think this was an arbitrary number we pulled out that seems like it could be a good amount of code to leave as a first impression to RN. For some context, create-react-app's template clocks in at 26LoC, granted their styling is imported from a CSS module: https://github.com/facebook/create-react-app/blob/e2f43a06a60646f2db00ff0558acb6d2a3355a36/packages/react-scripts/template/src/App.js

I'll move stuff around like @cpojer recommended and we'll see how that feels!

[eliperkins]

Let's tuck ReloadInstructions and DebugInstructions into the NewAppScreen

Done in b266a5c

and also put those sections into the LeanMoreLinks component (possibly named differently?).

Hmmmm, I'm not sure how this would work, without losing all the <Text>, in the app template. Currently (as of this PR), the structure is as follows:

<Fragment>
  <StatusBar/>
  <ScrollView>
    <Header />
    <View>{/* Sections with title & descriptions */}
      <Section>
        <Text />
        <Text />
      </Section>
      <Section>
        <Text />
        <Text>
          <ReloadInstructions />
        </Text>
      </Section>
      <Section>
        <Text />
        <Text>
          <DebugInstructions />
        </Text>
      </Section>
      <Section>
        <Text />
        <Text />
      </Section>
      <LearnMoreLinks />
    </View>
  </ScrollView>
</Fragment>;

In order to move <ReloadInstructions> and <DebugInstructions> into <LearnMoreLinks>, we'd likely have to move everything in the Sections with title & descriptions section into somewhere, leaving us with zero <Text> components.

@cpojer can you explain your thought process on how to move Reload and Debug into LearnMore for me?

[cpojer]

Right now it looks like this:

          <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>
            <Text style={styles.sectionDescription}>
              <DebugInstructions />
            </Text>
          </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 />

I think a bunch of this is superfluous. We only need a single <Text> in the template. Here is my suggestion:

          <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>
          <LearnMoreLinks /> {/* Everything removed compared to above is inside this component know */}

It still uses the same type of components as before at least once and is much much shorter in App.js.

[thymikee]

this definitely needs an annotation that importing stuff from react-native/Libraries is only for demonstration purposes and one should never do it in a real app because it may break.

[cpojer]

Fantastic! Thank you so much for the hard work on this. I'm going to land this version but we can update the comment in a follow-up.

@thymikee instead of a comment, what do you think of moving the index file of NewAppScript to react-native/NewAppScreen? That way it should be clear not to reach into libraries as it special cases this file only.

[facebook-github-bot]

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[thymikee]

@cpojer makes sense

[react-native-bot]

This pull request was successfully merged by @eliperkins in fe88e9e.

^{When will my fix make it into a release? | Upcoming Releases}