sweetrn

🚀
Sweet React Native

Sweet React Native is a template for react native featuring Multi-language, Dark-Light Themes,
Typescript, Context, Styled Components, Jest, Detox, Eslint, Husky, Prettier, and more.

• Video Demo •

PRs and suggestions are always welcome.

📚 Table of Contents

• Installation
• Run project
• Imports
• Languages
  • Translate function
  • Translate with params
  • Change the language
  • Get current language
• Themes

Installation

Before starting, please make sure you have the environment set up for react-native cli.

Next, run the CLI command to create a new project:

npx create-sweetrn

create-sweetrn cli will guide you trought the steps to create your project. You will be able to choose the project name and a custom package bundle id (optional).

Install dependencies

npm install
cd ios
pod install

Run project

Available Scripts

• npm start - start metro bundler (react-native start)

Imports

Absolute imports are configured in tsconfig.json and babel.config.js. You can import whatever you want from src folder using the alias @app - @app/components for example. If you want to change this alias, refer to tsconfig.json and babel.config.js file.

Languages

Languages files are located in src/locale. In there you will see a index.ts file that exports all the languages. You can add as many languages as you want, just make sure to add the lang_code.json file to src/locale, and include it in locales in src/locale/index.ts.

Translate function

The translate function - src/locale - is a simple function that receives a key as a string and returns the text that key refer to in the json file.

// en.json
{
  "hello_world": "Hello World!"
}

//
import { translate } from '@app/locale'
const text = translate('hello_world') // Hello World!

Translate with params

The translate function also accepts params, so that the translations can be more flexible.

// en.json
{
  "there": "there",
  "app_name": "Sweet React Native",
  "hello_user_with_age": "Hello {0}, do you like {1} already?",
}

//
import { translate } from '@app/locale'
const text = translate('hello_user_with_age', ['there', 'app_name']) // Hello there, do you like Sweet React Native already?

Note that the params are an array of string of keys which refer to a translation in the file.

Change language

You may change the language of the app by using the useLanguage hook. This hook returns a function that receives a string with the language code and changes the language of the app.

import { changeLanguage, translate } from '@app/locale'
import { useLanguage } from '@app/contexts/language'

[...]

const [, setLanguage] = useLanguage()

const handleLanguageChange = (value: 'en' | 'es') => {
  changeLanguage(value)
  setLanguage(value)
}

A fix for using just the hook is on the way. For now, you will have to use the changeLanguage too.

Get current language

You may get the current language of the app by using the getLanguage function from src/locale.

import { getLanguage } from '@app/locale'
const currentLanguage = getLanguage() // en

Also, there's a getAvailableLanguages function that returns an array of strings with the available languages.

import { getAvailableLanguages } from '@app/locale'
const availableLanguages = getAvailableLanguages() // [en, es]

Themes

The dark-light theme is configured using the useTheme hook. This hook returns an object with the current theme and a function to change the theme.

import { useTheme } from '@app/contexts/theme'

[...]

const [theme, setTheme] = useTheme()

You will find the palettes for each theme on src/style/palette. Note that there's a defaultPalette object for the shared colors between the themes.

There's also an example of a Switch component on src/screens/app.

import Switch from '@app/components/switch'

import sun from '@app/assets/icons/sun.png'
import moon from '@app/assets/icons/moon.png'

[...]

const handleThemeChange = (value: boolean) => {
  setTheme(value ? 'light' : 'dark')
}

[...]

<Switch
  thumbImages={[sun, moon]}
  onSwitch={handleThemeChange}
  trackColors={['#767577', '#f5dd4b']}
  thumbColors={['#767577', '#f4f3f4']}
/>

🚧 Roadmap 🚧

• Fix the useLanguage hook, so that it doesn't require the changeLanguage function.
• Document providers, context, hooks, components, eslint, husky, prettier.