Make professional mobile apps with React Native and Typescript — Integrate 3rd party components and make your customized components (Chapter 3 — Part 3)

Photo by Kelly Sikkema on Unsplash
git clone -b navigation https://github.com/thinhtran3588/react-native-starter-kit.git
yarn add @ui-kitten/components@next @eva-design/material@next react-native-svg
core/components/index.ts
"paths": {   "@app/*": ["src/*"],   "@core/*": ["src/core/*"],   "@assets/*": ["src/assets/*"],   "@weather/*": ["src/modules/weather/*"],  "@settings/*": ["src/modules/settings/*"]},

Pro tip: By default, Typescript doesn't allow us to import json files (you can look at this discussion). In order to do it, we have to explicitly enable the above flag.

'import/no-unresolved': ['error', { ignore: ['@app', '@core', '@settings', '@weather'] }], // ignore module import
'@assets': './src/assets',
import {Navigation, ApplicationProvider, light, mapping} from '@core/components';
import * as customTheme from '@assets/jsons/custom_theme.json';
return (    <ApplicationProvider mapping={mapping} theme={{...dark,       ...customTheme}}>        <Navigation navItems={navItems} />    </ApplicationProvider>);
app.tsx

Pro tip: sometimes, you need to run yarn start — reset-cache to reset cache if your code is not updated or there are some ‘import' errors.

import {useTheme} from '@ui-kitten/components';
tabBarOptions={{    activeTintColor: theme['color-primary-default'],}}

Pro tip: you can write console.log(theme) to let it show other variables and their color values. Or check here.

screenshots
app_layout

Pro tip: always use destructuring assignment to extract variables from props. It makes you code cleaner and shorter.

git clone -b integrate_3rd_components 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