Make professional mobile apps with React Native and Typescript — Fetch APIs (Chapter 3 — Part 4)

Photo by Adeolu Eletu on Unsplash
git clone -b integrate_3rd_components https://github.com/thinhtran3588/react-native-starter-kit.git
config/index.ts

Pro tip: It's used for learning so we store the API key directly in our code. However, for a production application, due to security reasons, in this case we should store it in our backend system and expose our own APIs as a proxy to call OpenWeatherMap APIs then call our APIs from our app.

Pro tip: It's a best practice to store all configuration data in a central place so that we can manage and modify them if needed easily. Store it in a ts/json makes IntelliSense available so it's can be referenced automatically from the code.

yarn add dayjs
format_date

Prop tip: store common functions in helpers so they can be reused in the project.

weather services

Pro tip: we can set default values to parameters as we do to parameters unit & lang.

Pro tip: if the number of parameters is less than 3, we can define the function as const func = funcA(para1: string, para2: string) . If not, we should only define 1 object parameter and pass all data as a JSON object const func = funcA(para: {para1: string; para2: string}) . It makes updating easier in the future without worrrying about their orders.

Pro tip: put the logic of retrieving data and formatting it in a separate service make the component cleaner and a preferable way to separate the logic. The result can be reconstructed and formatted into a new model to best fit our app, not always the same structure as the API result.

Pro tip: React Native uses the same Fetch API as the browser. You can learn more about it here.

interfaces
weather_screen
components
weather_item
weather_item.tsx
index.ts
weather_screen.tsx
weather_screen.styles.ts
weather screen
components/index.ts
weather screenshots

Pro tip: Break a big screen into smaller components.

yarn add immer use-immer
const toggleUnit = (): void => {   setConditions((draft) => {      draft.unit =         conditions.unit === config.weather.unitCodes.celsius         ? config.weather.unitCodes.fahrenheit         : config.weather.unitCodes.celsius;   });};

Pro tip: if the state is a primitive value, use useState. Otherwise, use useImmer.

yarn add react-native-snap-carousel
yarn add --dev @types/react-native-snap-carousel
yarn add react-native-fast-image
update components.
core/components/index.ts & core/helpers/format_date.ts
final result
git clone -b fetch_api 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