Skip to content

Rejuvenate visuals to match current WinUI gallery #405

@chrisglein

Description

@chrisglein

When React Native Gallery was created, it was before the WinUI gallery had experienced a significant visual rejuvenation. We should be able to show the same class of visuals with a bit of effort. Here are the high impact items I can identify.

Splash image and set of useful links

image
Many of these are just as relevant within RN Gallery

  • Getting started (can be link to https://aka.ms/reactnative or specifically the getting started subpage)
  • Windows design
  • Github
  • Template Studio (are there still RNW templates in there?)
  • Code samples (link to our samples repo)
  • Partner Center

Recently added/updated

image
image

Design guidance

image

Control group subpages (with full color icons in page view)

image
image

Contrast with RN Gallery which has groups only on the main page, and the icons are monochromatic:
image

Work in progress snack to get started:
https://snack.expo.dev/4NjQuP5ias-bJa04RLYIk?platform=web
https://snack.expo.dev/wvKq-kD7PqlROjiiiswqx?platform=web

## Tasks
- [x] Add splash image to home page
- [x] Add list container for useful links
- [x] Add link to Getting started (https://aka.ms/reactnative)
- [x] Windows design (https://learn.microsoft.com/en-us/windows/apps/design/_)
- [x] Github (https://github.com/microsoft/react-native-windows/)
- [ ] Template Studio (https://marketplace.visualstudio.com/items?itemName=TemplateStudio.TemplateStudioForUWP)
- [x] Code samples (https://github.com/microsoft/react-native-windows-samples/)
- [x] Partner Center (https://developer.microsoft.com/en-us/windows/)
- [ ] https://github.com/microsoft/react-native-gallery/issues/433
- [ ] https://github.com/microsoft/react-native-gallery/issues/434
- [x] Replace monochromatic icons with full color icons (can take from https://github.com/microsoft/WinUI-Gallery/tree/main/WinUIGallery/Assets/ControlImages)
- [ ] https://github.com/microsoft/react-native-gallery/issues/435
- [x] Reshuffle groups to better align with WinUI gallery's grouping as appropriate (e.g. add Collections and move FlatList and friends into that)
- [ ] https://github.com/microsoft/react-native-gallery/issues/437
- [x] Code examples have a copy button
- [ ] https://github.com/microsoft/react-native-gallery/issues/216
- [x] Add indicator for new/updated samples
- [ ] https://github.com/microsoft/react-native-gallery/issues/436
- [x] Update readme image https://github.com/microsoft/react-native-gallery/blob/main/README.md

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions