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.
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.
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.
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 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.
All components support an extra prop which allows you to supply more CSS to a particular component.
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.