Polish the "new app screen"

[cpojer]

Introduction

React Native has had the same new app screen since it was initially created. The screen is simple and welcomes people to React Native and promotes hot reloading. Let's spend some time thinking how we could make the new app experience more awesome by redesigning this screen, mainly targeted at newcomers to React Native! Ideally it will look simple and elegant but richer than now. The main goal is for people who are just starting out and for experienced people to be delighted.

Possible Ideas:

• Rich content including some icons, a grid layout with multiple buttons.
• Links to the documentation, getting started guides and possibly to StackOverflow to ask questions in the spirit of "You created a new app, congratulations. Now here is what you can do next!".
• Fetch the title of the latest blog post and link to it on the bottom as News (Bonus points for a <marquee> style news banner. Just kidding, or am I?).

In terms of implementation I would imagine a simple component like <AppTemplate /> that will be required through react-native/Libraries/AppTemplate and is not exported through react-native to ensure it does not bloat real apps. A simple invocation like also makes it easy for people to remove.

Recently the community drove a redesign of the "RedBox" screen: #42. I'm curious to hear your ideas and would love to see some mockups of what people can come up with!

The current screen, for reference:

[JofBigHealth]

I've not used the new app for a while so this might not be relevant, but as a proposal I'd be very interested to see some default bundled assets for Android and iOS - perhaps fonts, maybe an image or two (not just SVGs) - at various resolutions. When I started RN way back I remember this being a point of confusion for me. Being able to get moving quicker on these subjects based off a template / best practice (rather then Stack Overflow'ing it all!) would be welcome I suspect.

[cpojer]

@JofBigHealth That's a great point, and I agree this is painful. We are considering rewriting the website and all documentation and hopefully we can improve this. I would prefer us not to include any assets by default that are not necessary (we can download them in the new app experience for example, or embed it in the JS component) so we do not increase people's app size unnecessarily.

[JofBigHealth]

I would prefer us not to include any assets by default that are not necessary

I think a nice RN icon at various sizes (and including the Android notifications icons and all that various other stuff I didn't learn until the app was in production!) would be super helpful though.

On the subject of documentation I think a lot of new users would welcome expanding the content to include some of these more "native" and platform specific elements of configuration. I realise a case could be made that "this isn't RN so shouldn't be in the docs" but I think it'll really help newcomers get a better impression of RN. I watch a number of threads - especially related to Android - where these "native" areas of configuration frustrate new users and give the impression of RN being excessively hard to use. For instance the challenges related to network security settings for RN debugging can turn off developers inexperienced with native dev.

[marcusstenbeck]

How about a multilanguage translation of Welcome to React Native that starts in English and then cycles through a few languages?

[cpojer]

@JofBigHealth I absolutely agree but this is not the right place for that discussion. Let's have that on the website repo.

[marcusstenbeck]

How about a multilanguage translation of Welcome to React Native that starts in English and then cycles through a few languages?

Depending on the scope and size of the screen, it'd be nice to cycle this with a very simple animation.

Or, display the English version in the center with a "cloud" of other languages around it.

[samerdernaika]

simple calculation form that contain buttons and inputs

[xzilja]

Perhaps some sort of light intro to react native via slidable cards? Whenever you swipe to next card, change background colour with animation or something of sorts. Could give good example for people who are starting out on state / animation / gestures etc... as well

It would be a tad much code wise though, but if placed in some sort of "welcome" folder that is easily deletable, won't be too crazy?

[webmasterdevlin]

A LottieFiles animation can be attractive for beginners. Here's a lottie React logo https://lottiefiles.com/296-react-logo

[todorone]

It would be great to have a new fancy intro screen, but please don't make it too bloated... 😊

[pvinis]

This screen should be simple and useful. For showing off stuff, we can use RNTester, to show how to add fonts, lottie, whatever.

[orta]

(disclaimer: I only had 30m so these designs are for discussion and not too polished )

I think there's two angles this could go, depending on the goals:

• 1. Make it feel native - App.jsx should have minimal styling because its goal is to show how a small amount of RN creates native look and feel apps. I only know the Apple Human Interface Guidelines, so I've only done one for that (based on the on boarding flow for a new iOS device)

• 2. Make it feel like a "site" (or fully designed app) where there is no design constraint to fit the platform, here's a rough idea based on making it feel like React website and I put a small bit of thinking into the info hierarchy.

( sketch file )

[retyui]

@cpojer

How about add text where you telling about the minuses

eg:

0. The fact that there is no NAVIGATION out of the box (imagine in the browser each link opened in a modal window)
1. You use many hated metro bandler who does not support symlinks
2. And the fact that everything is common with the native part occurs through the bridge ()
3. And the fact that every update breaks compatibility
4. And that the android is not given due attention so (a good example is x64 support, how much you solved the problem)
   ....

[cpojer]

@orta omg I love both of them and will have to put on my thinking cap to figure out which one I prefer. We can definitely put this up to a vote.

@everyone thanks to your great ideas so far! I think in general "mockups win arguments!" so if you can come up with a mockup for your design idea, then at the end we can put all of them to a vote :)

@retyui thanks for your comment. I think you are making a great point and we could have a section like "How do I…" including things like "add navigation" that links to the docs comparing popular navigation solutions.

[pontusab]

We could just follow the create-react-app pattern with the same animation of the React logo.

[therealadum]

@orta I’d love to take a crack at including your design in the project, if it is alright with @cpojer

[cpojer]

@adamshurson go for it! I think having something to play with is much better than just a design (which is already better than just ideas). It will definitely help us make a decision and explore our options. Just keep in mind that we are currently in the exploratory and discussion stage, so this may be one of those times where you are building an MVP to show off and it may take a couple of iterations until we get something that we are happy with that can be merged! I just wanna make sure you are aware of that before you start :)

[therealadum]

@cpojer of course!

[iRoachie]

Awesome design @orta I love them both. I like the layout of the 2nd one, but the light version looks more inviting to me.

Possible light version of the 2nd one?

Figma: https://www.figma.com/file/LiPBm4fCeURQBt2nGTkHGqnD/rn-init?node-id=0%3A1

[Titozzz]

damn @adamshurson, you beat me to it. If you don't want to do it anymore, let me know 😛

[iZaL]

A nice little animation where the welcome text bounces in.

[orta]

Thanks folks - good idea @retyui on making it easy to get to docs, I've added something like that

@iRoachie nice touch, in my copy here I want it to scroll, so I moved the logo up into the header.

I think the white mode kinda offers something a bit more hybrid? I dunno how it would feel seeing this as an android dev ( though it would use system fonts, not the apple system fonts here )

Those buttons would open your Safari/Chrome in your computer and take you to the corresponding pages on the react-native docs. I tried to somewhat give a from-scratch narrative left to right there too.

The code that gets shipped here could well be the first RN code someone sees, so I'd be wary about adding things like animations and anything too complex which we can't safely hide away.

[cpojer]

This is so good @orta. I couldn't have dreamt it better.

[william-normann]

I think the important things of new app screen are simple code, easy to read, to known and imitate.

• Ensure your implementt of design less than 300 LOC
• do not implement awesome things. Just make it pure
• make the UI simple and lean

[karanpratapsingh]

damn this looks amazing, I hope this is soon merged with 0.60.x, this will be like a new beginning for RN 😃

[xzilja]

@orta links like App.js and Cmd + R are a tad hard to read agains white BG on your last screenshot, perhaps make them same dark blue colour as ones at the bottom of the screen in that grid?

[orta]

perhaps make them same dark blue colour

They can't be the same color because they have different actions (one you can click on, the other you can't) but I agree on darkening them somehow 👍

I'm still not sold on the buttons as a metaphor, I want something like this but it doesn't feel like it's what you build in a native app to me yet

[orta]

OK, given it another shot. It's rare to see buttons mixed like that in a mobile context, so I looked at how it's typically handled and this second one feels a lot closer to the sort of designs we've made at Artsy in the past for these problems. So I've tightened up the design of the top and explored a more mobile approach to the learn more section

[xzilja]

@orta Perhaps that separation between Layout and Components sections in "Learn More" is not needed?

Looks much cleaner now 👌

[cpojer]

Lottie comes with native dependencies. We cannot take such a dependency on within React Native itself for technical reasons. I suggest using an image instead and making it look like in @orta’s mockup from above.

[karanpratapsingh]

@cpojer Thoughts on these? I forked @glauberfc 's code and quickly made this, also I removed the Lottie integration.
How about a new default icon? I think let's refresh it too?
Link to code: Code Link

[iRoachie]

How does it look on android?

[karanpratapsingh]

@iRoachie looks identical, tho font appears a little big on small devices

[cpojer]

Nice work and nice group effort! Do you wanna start taking this to RN itself and send a PR so we can give comments on the code and iterate on it from there?

[karanpratapsingh]

@cpojer ok I'll send a pull request asap

[glauberfc]

Good job, @karanpratapsingh!

[karanpratapsingh]

@glauberfc No mate, you did all the heavy lifting. It's a team effort 🎉

[karanpratapsingh]

@cpojer you should see a new pull request by the name of New Intro Screen Proposal

[iRoachie]

Edit the PR to mention this Issue number so it shows here

[karanpratapsingh]

ahhhhh lookes like my builds are working fine but prettier formatting is failing 🤣

[cpojer]

Thanks everyone for the awesome discussion here. I'll close this issue and we can continue to iterate and polish the new screen in the PR on react-native :)

[karanpratapsingh]

great to see this merged 🎉

[cpojer]

Thanks everyone for your awesome work on this new app experience! It is now merged and will be in the next release of React Native. @rickhanlonii and I made a brief video to show off the new screen: https://www.youtube.com/watch?v=ImlAqMZxveg&feature=youtu.be

[karanpratapsingh]

@cpojer Great Video, glad to be a part of this community 🎉

[therealadum]

@cpojer That's awesome!

[xgenem]

Bump... new RN dev here and I'm loving it. Awesome framework and community.

(P.S. Can you consider 8 months as new?) :)

[Monte9]

Loved the video! 😍

off-topic: when is the next version slated to be released? Is there a dedicated thread where we can subscribe to keep up with it?

[karanpratapsingh]

@xgenem glad to have you in the community, we’re all new here, I am also new 😃

[karanpratapsingh]

@Monte9 I was wondering the same thing 🧐

[karanpratapsingh]

@cpojer how do I join as a contributor?? Sorry I’m new here,New app screen was my first pull request in React Native 😀

[Monte9]

@karanpratapsingh there is a /releases repo under this rn-community org.

And here is the discussion thread for 0.60 release: react-native-community/releases#116