Core Elements

Here you will find the list of Linker Studio core elements.

Available for all users

TypeScript

This is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Remember, all files must end in .ts.

It has many advantages like for example:

  • TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.

  • It is more reliable and easier to refactor. This enables developers to evade errors and do rewrites much easier.

  • Access to ES6 and ES7 features, before they become supported by major browsers

Redux Toolkit

Redux Toolkit helps simplify Redux development. It includes utilities for creating and managing Redux stores, as well as for writing Redux actions and reducers.

Click here for more information about redux toolkit

This is an example of the structure for the redux folder.

|-/redux
    |- example
        |- exampleSlice.ts
        |- exampleThunk.ts

In the Slice file we create the initial state, a section for selectors, and the setters.

If the Thunk file is necessary, it will have the asynchronous actions for when a request is needed to be made.

Eslint

ESLint statically analyzes the code to quickly find problems. It allows creating a series of assertions called lint rules around what the code should look or behave like, as well as auto-fixer suggestions to improve code for us, and loading in lint rules from shared plugins.

We have set up a the basic eslint configuration which is in the .eslintrc.js file.

module.exports = {
  root: true,
  extends: '@react-native-community',
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      rules: {
        '@typescript-eslint/no-shadow': ['error'],
        'no-shadow': 'off',
        'no-undef': 'off',
      },
    },
  ],
};

To test eslint on your code, you can run the following command on the terminal:

yarn lint

Localization

This library helps us support multiple languages in the app based on the language configuration of the user's device. It helps organize all the strings that will be displayed to the user, avoiding hardcoded strings in the components. Each module will have a localization folder that contains each language in a different file. By default, it only supports English and stores those strings into an object in the en.ts file.

To support another language, you will need the following:

  • Create a separate file for this language (e.g., es.ts inside the localization folder for Spanish support). Create an exact copy of the current en.ts file and replace the quoted text with the translation for each string.

  • Then, add the es object import to the Localization.ts file and add the es object into the LocalizedStrings object.

import LocalizedStrings from 'react-native-localization';
import en from './en';
import es from './es';

const strings = new LocalizedStrings({en, es});

export default strings;

If your app doesn't support the user's device language, it will display English as the default language.

You can force a language programmatically with this code line:

strings.setLanguage("es");

Dates

To manage Dates and Time Zone, use the included libraries luxon and localize respectively. You can retrieve the user's Time Zone using localize to use it with the luxon date constructors.

Example of use: Retrieve user's current Date based on the user's device time zone.

You can find the following helper functions in the LinkerStudio/core/utils/date/Date.ts file:

  • getCurrentDate: Retrieves user's current date based on the user's device time zone.

import {DateTime, IANAZone} from 'luxon';
import {getTimeZone} from 'react-native-localize';

export const getCurrentDate = () => {
  const deviceTimeZone = getTimeZone();
  const timeZone = IANAZone.isValidZone(deviceTimeZone)
    ? deviceTimeZone
    : 'utc';
  return DateTime.now().setZone(timeZone);
};

  • getCurrentISODate: Returns the current DateTime based on the user's time zone in ISO format, example: '2017-04-22T20:47:05.335-04:00'.

export const getCurrentISODate = () => {
  return getCurrentDate().toISO();
};

  • isValidDate: Receives a string date and a string format, and returns if the provided date is valid based on the provided format.

export const isValidDate = (date: string, format: string) => {
  return DateTime.fromFormat(date, format).isValid;
};
PreviousTemplatesNextHooks

Last updated