RedBox screen is a bit scary

[morishin]

Introduction

isn't it?

The Core of It

How about making it softer color? ☺️
(like YellowBox)

These look like current implementations.

• iOS https://github.com/facebook/react-native/blob/1151c096dab17e5d9a6ac05b61aacecd4305f3db/React/Modules/RCTRedBox.m#L50
• Android https://github.com/facebook/react-native/blob/5c2720b089dd0fb277771b0ac8b0e7788c493e5d/ReactAndroid/src/main/res/devsupport/values/colors.xml#L3

Discussion points

• How about changing the red color?
• What color value is better?

[hramos]

The RedScreen was inspired by Ruby on Rails's error screen:

The idea behind it is to provide high visibility to errors - no need to hunt through logs for the actual error. When the RedBox is contrasted with the RoR inspiration, I do see the RedBox screen could be made less jarring while still successfully displaying all the information we need.

[aleclarson]

A dark mode would be great 😄

[Monte9]

@hramos that's really interesting. Maybe we can use a different shade of red.. maybe more like a pastel red-color?

I did this really quickly to get the ball rolling:

The one in the middle is the current red screen color. Maybe something closer to #E32D31 (the second one) would look better?

ps. I am def not a designer so my color senses might be way off. Just a suggestion tho.

[jamonholmgren]

One quick and easy way to do it would be to keep the red limited to a header/footer and make the body of the error something more muted. Here's a 30-second idea that might spark something.

[morishin]

Maybe we can use a different shade of red.. maybe more like a pastel red-color?

+1 !

How about this? (new RedBox color is the right one)

[hramos]

I think a PR that implements something like #42 (comment) has a good chance of getting merged.

[Monte9]

@jamonholmgren I don't mean to steal your thunder, but I can take a stab at implementing your idea if you don't mind.

I haven't contributed to RN core before and this seems like a fun one to tackle.

[kelset]

@Monte9 go for it 🎉

And thanks for this conversation, I really think it could really help making the DX better :)

[katieisnell]

I like the RN color 'tomato', it is a softer red but still dark enough to imply that you have an error!

[axe-fb]

@morishin - what are the next steps here ? I think everyone loves the idea, so lets see how we can implement it.

[Monte9]

@axe-fb I am working on this. It's currently WIP and this is what it looks like so far:

Still need to get Android working, but if that looks good I can submit a PR for it this weekend.

[AndreiCalazans]

@Monte9 nice job, looks better and less intimidating, can we just improve the color of the file location, it's a little hard to read, maybe use a color with a little more contrast.

I can read executeDispatchesInOrder but the line under it requires some leaning in, maybe just better contrast would improve.

[morishin]

@morishin - what are the next steps here ? I think everyone loves the idea, so lets see how we can implement it.

I think the next step is Pull Request by @Monte9 ! 😍

@Monte9 Cool!! How about making the background red color softer? (like #42 (comment) or #42 (comment))

[Monte9]

@morishin @AndreiCalazans for sure. I'll end up posting a few screenshots here with different variations of colors and you guys can let me know which one you prefer. I'll keep you posted.