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.
2. If the community module supports autolinking, you are done. Otherwise continue to Step 3.
3. Open up windows/rngallery.sln in Visual Studio.
4. Add community module as an Existing Project to solution.
5. Add community module project as a reference to rngallery project.
6. Open pch.h and add "#include <winrt/module_namespace.h>".
7. Open App.cpp and add "PackageProviders().Append(winrt::module_namespace::ReactPackageProvider());".

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 "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, add an entry for your page with the key equal to the name of your component and the component equal to your new page.