Straple React Native Install Guide

This article walks you through the process of installing Straple Design System for React Native, we'll cover changing variables, examples of themes, properties and any additional information you need. Remember you can also view the portal in your account area to look deeper at all the previews and table of contents for all aspects of The Straple Design System. If you have any questions or issue please contact us and we'll do our best to help you.

Install guide

1. Drag the straplemobile library into your project folder.
2. Run npm install ./straplemobile or yarn add link:straplemobile Note: Yarn is recommended as there may be issues with Victory, the library for handling graphs. If issues with Victory arise, try resinstalling with Yarn.
3. Straple UI Kit is now installed and can be used like any other library.
4. If there is a "undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[18], "./NativeComponents").RNSVGSvg')" error, the react-native-svg folder must be deleted within node_modules - two version of this are installed.

Notes

Changing Variables (e.g. font size, colors, etc)

Editing variables.js (recommended)

Within the Straplemobile library folder, there exists two folders: commonjs and module. Depending on which type of imports and how your project is setup, either version of these may be used.

Within both of these a file named variables.js exists containing all the variables used throughout Straple (and the UI Kit). Changing any of these values will alter all the components. Note: try editing variables.js in both folders to see which version your project is using.

Using a ThemeProvider

A theme provider can also be used. This can be useful if you only want different variables to affect a certain part of the application.

1. Import ThemeProvider from Straplemobile
2. Wrap any components you want to have in this theme
   example: <ThemeProvider><Base>I'm themed</Base></ThemeProvider>
3. The ThemeProvider takes a prop theme which is an object containing all the variables.
4. All variables must be defined. The easiest/best way to do this is create a copy of Variables and alter any objects needed. In the example provided below the font size for a medium Base element has been changed in the theme. The Base element wrapped within the ThemeProvider has a font size of 50px whereas the other Base element has the default font size even though they are using the 'same size' of medium - this is due to theming. The same can be done with every other variable.

Example of ThemeProvider

enum/string (or enum/other data type)

This means that there are predefined options, but ALSO a custom option can be passed.

For example for padding which is enum/string, padding can be 'small', 'regular', 'large' or any custom value such as '10px', '10px 15px', '10px 12px 14px 10px', like regular CSS.

Font weights

Font weights work the same as font family

Due to the way React Native handles font-weights, they are implemented in a different fashion. Each weight is a seperate font (file/import). For example, the primary medium weight (e.g. used in the component <Base family="primary" weight="medium">primary medium</Base>) is defined as 'Inter_500Medium' which is the name of the custom font file (initialized at the start of the app). Each weight is then defined as the corresponding custom font.

extra prop

All components support an extra prop which allows you to supply more CSS to a particular component.

For example:

Would be a regular Base component.

However the following component (with the extra prop):

Would have the CSS 'text-decoration: underline;' and so be rendered underlined.