React Native

Styling

Inline styling is much harder to maintain and results in inconsistencies through out the code base.

A well-defined stylesheet is extremely helpful while building complex React Native apps. Use React Native’s Stylesheet object to add styles specific to a certain component.

<View style={{ margin: 20 }}>{/*...*/}</View>

<View style={ApplicationStyles.margin}>{/*...*/}</View>

File structue

Assets

This folder contains Fonts and Images used in the app.

Components

One of the basic principles of software development is Don’t Repeat Yourself (DRY). We must not write the same piece of code twice. Whenever you write the same piece of code twice, you must try to refactor it into something reusable, even if not completely.

Containers

This folder contains all the screens of the app. Also the modals are kept in this folder.

Helpers

This folder contains helpers that are used multiple times or compute complex tasks within the app. For example formatting an integer to a currency string. Or making a Unix timestamp a readable string.

Navigators

This folder contains all the navigators within the app. There is always an AuthNavigator present in this folder as a starting point for the navigation. When a user is not logged in the AuthStack will be presented. Otherwise the Roostack will be presented to the user.

Services

This folder contains services that interact with external services such as an API. Requests are dispatched from the service and the data is manipulated if needed and then returned.

Stores

This folder contains MobX stores for state management in the project.

Theme

This folder contains global styling, colors and images.

Document structure

All variables should be declared before used. JavaScript does not require this, but doing so makes the program easier to read and makes it easier to detect undeclared variables that may become implied.

// Imports
import { inject, observer } from "mobx-react";
import React, { useState, useEffect } from "react";
import { View } from "react-native";
import { wishlistService } from 'Services/WishlistService'

function ExampleScreen(props) {
  // Constants at the top.
  const [variable, setVariable] = useState(null);

  useEffect(() => {
    // Always after the constants before the functions
    // ...
  }, []);

  // Functions
  const function = (param) => {
    // ...
  };

  return <View>{/* ... */}</View>
}

export default inject("exampleStore")(observer(ExampleScreen));