Skip to main content

Design system

Styled components:​

In our template, we are using styled-components, we chose this library for multiple reasons:

  • Cleaner code: styled-components allow you to name each component with its purpose. For instance, if we have a <Text> component as a title, we can call our component <Title>.

  • Simple dynamic styling: Styled components helps you to add variables to your CSS and easily have dynamic styling. Example:

const Button = styled(TouchableOpacity)<{isDisabled: boolean}>(
  ({isDisabled}) => ({
     opacity: isDisabled ? 0.5 : 1,
  }),
);

  • Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.

  • Custom theme: You can define your custom theme, and you have access to it through props.

Example:

const Button = styled(TouchableOpacity)<{isDisabled: boolean}>(
  ({theme:{ spacingValues }}) => ({
     paddingHorizontal: spacingValues.vXl,
  }),
);

Responsive design:​

One of the main issues we are facing is that design is not consistent between all phone sizes, which may impact user experience.

For this purpose, we adapted the approach used in this library: react-native-size-matters

basically, in our theme, we have two functions that scale the size based on the length and width of the device.

For example:

  • If we use a vertical size, such as paddingTop or marginBottom, we use the function verticalScale(16) to get the right size that we should have based on the screen's height.
  • If we use horizontal size such as paddingRight, we use the function horizontalScale(16).

Here is the definition of the two functions:

src/ui/theme/scaling.ts

import {Dimensions} from 'react-native';

export const {width, height} = Dimensions.get('window');
//Guideline sizes are based on standard around 5 inches screen mobile device
export const guidelineBaseWidth = 326;

export const guidelineBaseHeight = 680;

// Will return a linear scaled result of the provided size, based on your device's screen width.
export const horizontalScale = (size: number): number =>
  parseFloat(((width / guidelineBaseWidth) * size).toFixed(2));

// Will return a linear scaled result of the provided size, based on your device's screen height.
export const verticalScale = (size: number): number =>
  parseFloat(((height / guidelineBaseHeight) * size).toFixed(2));

Theme:​

In our template, the theme is created by default, but you can change it how you want to fit your design system. You can find the template here src/ui/theme/index.ts.

Also, make sure you update the typing for your template in this file: src/types/styled.d.ts

Sources:​

Styled components

react-native-size-matters