Add a Component Page

Setup

Make sure to follow the steps on the Contributing to React Native Gallery page to create a fork of the react-native-gallery repo and an a fresh branch which will contain the change to the repo you made in your page addition.

Add Component as a Dependency

If you are adding a page for a core component you can skip this step; it is only necessary if you are working with a community module.

1. Run yarn add <community module> at the root of the repository.

No autolinking?

Some older community module may not support autolinking. If that's the case follow these steps to manual link.

1. Open up windows/rngallery.sln in Visual Studio.
2. Add community module as an Existing Project to solution.
3. Add community module project as a reference to rngallery project.
4. Open pch.h and add #include <winrt/\<module namespace\>.h>.
5. Open App.cpp and add PackageProviders().Append(winrt::<module namespace\>::ReactPackageProvider());.

Patching

Some modules are fine to include directly... others need to be patched from time to time. We use patch-package to accomplish this. As that this app is meant to be an example of best practices, open an issue and an issue on the source repo for the problem you are patching around.

Add Page Source Code

1. Navigate to react-native-gallery repository in your local file system. Open repository by running code . in your Command Line. This will ensure that the linter will properly format your code each time you save.
2. Create a new file in src/examples with the name "<Component>ExamplePage.tsx".
3. Copy the source code from src/examples/TemplateExamplePage into your new file.
4. Follow the instructions provided in the comments on the page to replace the data used for the template page with the data for your component.

• If working with a core component use React Native website to see the list of prop options for the component.
• If working with a community module, visit the repository for the module to see the list of prop options for the component.

4. Delete all comments from the page source code once you have correctly filled the page.

Adding Page to Navigation

1. Open RNGalleryList.ts.
2. Underneath the import statements at the top of the page, import your new page. Follow the syntax of previously added pages as an example.
3. Inside the RNGalleryList array, populate the properties to match your component (see below).

import {FooExamplePage} from './examples/FooExamplePage';

export const RNGalleryList: Array<IRNGalleryExample> = [
  ...
  {
    key: 'Foo',
    component: FooExamplePage,
    textIcon: '\uE734',
    imageIcon: require('../assets/ControlImages/TextBlock.png'),
    subtitle: 'A short description of this component.',
    type: 'Text',
    new: true
  },
];

Where do these values come from?

Prop	Source
key	A unique identifier for your page, used as the navigation route.
component	The actual component type. Will match what you exported.
textIcon	An entry in the Segoe MDL2 Assets font
imageIcon	Optional A full color image icon, matching WinUI gallery if a similar control exists
subtitle	A short description of your component, displayed on the component browsing pages.
type	One of the catgories of component pages, defined by the RNGalleryCategories array in the same file.
new	Set if true if your component is new. After each major release of Gallery, these values should be cleared.
updated	Set if true if your component had significant updates. After each major release of Gallery, these values should be cleared.

Add to snapshot testing

1. Edit __tests__/App-test.js
2. Import your component
3. Add a test method that invokes your component

import {FooExamplePage} from '../src/examples/FooExamplePage';

test('Foo Example Page', () => {
  const tree = create(<FooExamplePage/>).toJSON();
  expect(tree).toMatchSnapshot();
});

4. Run the snapshot tests to generate changes to the __tests__\__snapshots__\App-test.js.snap file, which you should include in your commit