Make professional mobile apps with React Native and Typescript — Manage your data. Make Dark mode and theme your app (Chapter 3 — Part 5)

Photo by Balázs Kétyi on Unsplash

Contexts & Custom hooks

git clone -b fetch_api https://github.com/thinhtran3588/react-native-starter-kit.git
interfaces
hooks
contexts & app.tsx
components

Pro tip: the icon component is the sample of how we can extend an existing component, change its default props or even extend its behaviors. Since we only reference it in our other components, we only have to modify the code in one place.

Pro tip: Normally, we should follow all eslint rules we define. However, in some special cases, we have to ignore them because of using 3rd libraries which are not compliant. Another case is when we extend a component, we need to pass all the props into the child component which is normally forbidden with eslint rule react/jsx-props-no-spreading.

settings_screen
components
dark_mode
dark_mode.tsx
index.ts
settings_screen.tsx
settings
navigation & weather_screen
screenshots
root_layout
import {Navigation, ApplicationProvider, light, dark, mapping, RootLayout} from '@core/components';
<ModeContext.Provider value={mode}>  <ApplicationProvider mapping={mapping} theme={{...theme, ...customTheme}}>    <RootLayout>      <Navigation navItems={navItems} />    </RootLayout>  </ApplicationProvider></ModeContext.Provider>
dark/light screenshots
yarn add @react-native-community/async-storage
use_mode.ts

Rematch

yarn add @rematch/core @rematch/persist react-redux redux-persist
yarn add --dev @types/react-redux
store.ts
settings model

Pro top: Rematch also has effects to asynchronously update state (for example, when you need to call an API, get data and update state). But from my experiences, we should keep the same approach as Redux and don't use it. Instead, we should call an asynchronous action in services, get the result and update the store's state via reducers.

app.tsx
updated components
updated components
git clone -b manage_data https://github.com/thinhtran3588/react-native-starter-kit.git
git clone -b manage_data_rematch https://github.com/thinhtran3588/react-native-starter-kit.git

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store