React-native: ☂️ Revamp RNTester

[pvinis]

Introduction

RNTester is the easiest way to demostrate what React Native can do. It has been that for a long time, but for a while now it hasn’t received much love. It has been in a kind of maintenance mode. It’s time to make RNTester shine!

Tasks

• [ ] Make sure it works with the current latest release (0.59.5)
  This is just the base of everything.
• [ ] Make sure it always is up to date with any new release
  We can use RNTester as a testbed of the upgrading process. It is also important for people to be able to clone the react-native repo and compile and run RNTester using the latest release.
• [ ] Use a navigation library
  I guess this is self-explanatory. React Native does not provide navigation, so this will make a great example of one, and at the same time we can simplify the current navigation in RNTester.
• [ ] Simplify the way we have the list of examples
  The RNTesterList files can probably be simplified, maybe we can put the key in the actual example. Ideally this list file would be one line per example, not 4-5 like now.
• [ ] Have CI build RNTester and distribute to appstore/playstore
  This will be a good way to show off any new features/UI, and make it easy for someone to just see the app in action, without needing to setup and compile themselves.

Ideas for discussion

• Extract to a separate repo?
  Would that make is easier to handle/upgrade?
• Make sure it always is up to date with latest master?
  Is it useful to have RNTester up to date with master, so new development there can use RNTester as a testbed and showcase of new functionality/features/UI?
• Use react-native-navigation or react-navigation?
  Fight!

Appendix

Inspiration issue

@cpojer

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[cpojer]

Thanks so much for starting this issue! I hope people will sign up to help us with this revamp effort to give RNTester a fresh new look and so that we can be proud of our example app :)

One key thing to me is to apply the styling that we are applying to the new app screen so that we make it look super fresh, see https://github.com/react-native-community/discussions-and-proposals/issues/122. For styling, let's wait until we merge the new app screen and then ask somebody to help us out with restyling RNTester.

[pvinis]

I'm willing to work on the CI stuff, but of course any help is appreciated for that and any other task! :)

[chakrihacker]

I would like to help

[AmFlint]

Hi ☺️
I've been working a lot with React native and expo recently.
I came to experience many different use cases for navigation. I used react-navigation and it worked pretty well after some time getting accustomed to it.
I am willing to help on this RNtester example for navigation or something else if needed :)

[brentvatne]

I don't have a strong opinion on the navigation library to be used here, it probably doesn't matter too much which one we go with. I can help if it uses React Navigation though.

edit: one small argument in favour of React Navigation is that it may be less likely to break between releases because the JS-facing API of React Native is generally a lot more stable than the native side, and usually version changes don't impact React Navigation at all.

[ericlewis]

@brentvatne another argument in favor of React Navigation is simplicity as well, having spent time in React Native Navigation for instance, it is not exactly "newb" friendly.

[RichardLindhout]

Maybe show examples with React Native Paper since most of the components are extracted from core.

Like Flutter does in their example app. Giving it a really customized look so people can see almost anything is possible in React Native.

[RichardLindhout]

Maybe even a web version with React Native web to show the cross platform possibilities!

[gvarandas]

I have just upgraded our app to 0.59 and can definitely work towards that on RNTester.

[dulmandakh]

I think RNTester must target master, because it's much easier to test changes I make, but also make sure that it didn't break anything.

[cpojer]

Thanks everyone for all your enthusiasm on this. RNTester primarily exists to visualize all components that are part of React Native, ideally making them easy to test manually but also enable automated tested in some form. Including third-party libraries like navigation to showcase how to build React Native apps seems like a separate purpose that is best served through a separate app. We have discussed building a "community RNTester" outside of the main repo that includes the top third-party modules to ensure we keep these modules working in new releases. I think that app is much closer to the idea of an example app, and using a third-party navigation solution is a better fit there.

For RNTester itself, I would prefer it to have no dependencies except for what is part of the repo already.

[duggiemitchell]

I'd like to help too 😊

[midastouchprd]

I'd love to get into this as well

[cpojer]

If somebody wants to start sending Pull Requests to simply move files around so they are more organized, that would already be super helpful. Right now all the JS files are in a single folder and it is really hard to navigate.

[gvarandas]

@cpojer Right on.

[pvinis]

I need to also start helping. I'll have some time in the weekend.

[jeanregisser]

Make sure it always is up to date with latest master?
Is it useful to have RNTester up to date with master, so new development there can use RNTester as a testbed and showcase of new functionality/features/UI?

I'm a bit confused about this.

RNTester uses master and is built and tested (unit and integration) on every new commit automatically with Circle CI. Though tests are only targeting iOS AFAIK.

In the past, I have used it as a testbed when adding a new feature or tweaking something.

I haven't followed RN development too closely recently, has this changed?

[ericlewis]

@jeanregisser targets android too. Also includes e2e interaction tests for both platforms.

That said; to OP, idk if I love the if splitting RNTester completely out. Maybe if we just cleaned it up, and adopted more of a monorepo feel, it could live there.

[Johan-dutoit]

@cpojer I've submitted a PR that does the first round of moving things around. I definitely felt the pain of 'hard to navigate'. Should be somewhat simpler now to find the entry point and the examples.

[AndreiCalazans]

Oh man, @Johan-dutoit I should have said something, I did some work on this too on Sunday but I didn't have time to test everything until now. But that's ok, we had similar approaches I guess we can let them choose which one they prefer or let each PR inspire the other. Cheers.

https://github.com/facebook/react-native/pull/25013

[Johan-dutoit]

@AndreiCalazans No worries mate. It looks like you've progressed more than I have. I was planning on doing the rest in the next pass (just wanted to get the ball rolling at least).

I'm happy to bin mine (once yours has been merged in) and continue with that.

[pvinis]

I'm back on Monday and I will review. very cool! 💪

[kdawgwilk]

I would actually vote that react-native-navigation should be used because it is the most likely to break with new react-native releases. They use some APIs that are not common for other libraries and due to this react-native has broken their lib multiple times with API renames that the react-native team didn't think anyone was using. This has been the biggest pain point for us when upgrading to new versions of react-native

[pvinis]

Should or should not? If it's more likely to break, that should be a reason to not use it, right?

[AndreiCalazans]

I think he is suggesting to use it, to try to protect it from future changes.

[pvinis]

Ah ok. Maybe we could have a comparison?

[shirakaba]

[kdawgwilk] I would actually vote that react-native-navigation should be used because it is the most likely to break with new react-native releases.

[cpojer] For RNTester itself, I would prefer it to have no dependencies except for what is part of the repo already.

I agree with cpojer here. I'm building a custom React renderer and am in fact porting the RNTester suite as a representative test set for my renderer; I love how the existing architecture of RNTester solves navigation without bringing in any external libraries (nor even depending on platform-specific navigation functionalities), as it's one less SDK for me to learn and one less library to port.

[RichardLindhout]

Maybe we should have the RNTester application with all basic react native things and another one with a lot of third party features to show what's possible. Flutter also did a very nice preview of their features in the gallery app, I think that we should show a lot more of the possibilities with React Native.

[pvinis]

I think that's a good idea. Let's do this after the revamp is kinda done, and we can copy it and just add a bunch of react-native-community stuff or other libs.
Starting next week I can finally spend some time on RNTester.

[jeremyscatigna]

Is there a way I could help ? :)

[pvinis]

Hey @jeremyscatigna! I am sorry I haven't picked this up sooner.

There is actually. You could pick any of these and make a PR with some basic changes and we can discuss more about any choices we wanna make. For example making it work with the latest RN version is independent. I guess the other things need more attention from me. I will be getting into that after 2 weeks, when I have a bunch of irl stuff finished.

Feel free to try the upgrade and/or ping me again. Also, if you have ideas for a better list structure or file structure, let's discuss :)

[satheeshwaran]

I am a mobile developer recently getting my hands dirty with React native and it is simply awesome. I would like to help. Please tell me what to do!

[pvinis]

This particular issue might not be the friendliest for a newcomer. Maybe try one of the other issues?

@kelset could you actually remove the Good First Issue from here, until we have it set up for people to help, please? :)

[satheeshwaran]

@pvinis I can try!

[satheeshwaran]

@pvinis @kelset Can I work on a simple warning like this?

i.e. Instead of using Slider from react-native I will use Slider from react-native-community?

[shirakaba]

Hi @satheeshwaran, good to see your enthusiasm to contribute. Now I may be mistaken but that looks like a warning about your own app’s source code importing Slider from the core (which is deprecated) rather than from its newer community module. There’s therefore no relevant issue to be fixed in the core to address this.

I believe this is getting off-topic from the purpose of the RNTester discussion, however. I would suggest looking through the list of issues marked “good first issue”, and assessing whether any of those look manageable for you. Upon finding a suitable issue, I’d encourage raising discussion there.

[TheSavior]

@shirakaba, I believe the error @satheeshwaran is pointing at is a yellow box that appears in RNTester because it includes tests for Slider. I believe that instead of changing RNTester to pull in the community module we are more likely to just remove the slider tests from the core RNTester.

[satheeshwaran]

@shirakaba Yes @TheSavior is right, this is the warning in the RNTester app(the screenshots says RNTesterApp.ios.bundle right?). There are a huge set of warnings in the RNTester app, can I start to work on fixing them. It should be easy for me to start actually :-)

[shirakaba]

I see now, my mistake! Thanks for clearing that up @TheSavior.

That raises another question, then. Should RNTester really have a dependency on community modules? I think it would be better for it to simply stop showcasing any non-core components. My reasoning follows @cpojer's thoughts from before:

For RNTester itself, I would prefer it to have no dependencies except for what is part of the repo already.

[satheeshwaran]

@shirakaba Ok I have started to work on removing non-core component examples, will get back soon.

[satheeshwaran]

I made the changes, please review and merge - https://github.com/facebook/react-native/pull/25746

[henrymoulton]

Would like to get involved - have started the process by trying to get the test_ios_e2e workflow green in https://github.com/facebook/react-native/pull/26111

[henrymoulton]

It'd be good to update the list of tasks with removal of tasks that are no longer desired:

In particular:

Introduction

RNTester is the easiest way to demonstrate what React Native can do. It has been that for a long time, but for a while now it hasn’t received much love. It has been in a kind of maintenance mode. It’s time to make RNTester shine!

Tasks

• [ ] Use a navigation library
  I guess this is self-explanatory. React Native does not provide navigation, so this will make a great example of one, and at the same time we can simplify the current navigation in RNTester.

Ideas for discussion

• Use react-native-navigation or react-navigation?

@cpojer has mentioned:

For RNTester itself, I would prefer it to have no dependencies except for what is part of the repo already.

I imagine this removes this task from the list?

Commenters have mentioned having a React Native project that new users can demo/view that demonstrates:

• Navigation, using React Navigation or React Native Navigation
• React Native Paper
• React Native Web

Perhaps the React Native Community organisation would be a good fit for this?

This could then be done in conjunction with:

Have CI build RNTester and distribute to App Store/Play Store. This will be a good way to show off any new features/UI, and make it easy for someone to just see > the app in action, without needing to setup and compile themselves.

[cpojer]

Since we didn't have a lot of time to make RNTester better, what if we started simple: Could we update the design to look as pretty as the new app screen in terms of colors, fonts, spacing and all that? We can keep all the functionality the same and just iterate on the design and I think it could quickly improve the perception of RNTester. Anybody wanna take a stab at this?

[gvarandas]

I could propose some changes.
If anyone with a design background wants to contribute as well, we can co-author a PR.