Since the layout of components takes up to about 60% of the total code of my lessons, I decided to put all the components in a separate library, thereby, in subsequent lessons, we will focus on business logic, and not on typesetting of components.
UI Kit Unicorn supports dark and light mode.
Go!
Step 1
Add the library:
yarn add react-native-unicorn-uikitStep 2
Add dependencies:
yarn add react-native-appearance react-native-screens @react-navigation/native @react-navigation/native-stack react-native-safe-area-context react-native-spinkit yup formik fakerStep 3
Add a library with icons:
yarn add react-native-vector-iconsCarefully add the icons as written here
Step 4
Install Pods:
cd ios && pod install && cd ..Step 5
Add fonts:
Create a file in the root of the project /react-native.config.js
module.exports = {
project: {
ios: {},
android: {}
},
assets: ['./assets/fonts/']
}Download fonts here and after in the created directory ./assets/fonts/ put them, and after link.
react-native linkIf, like me, you get these warnings: warning: duplicate output file errors, then go to Xcode and delete duplicate fonts, except for connected ones.
Step 6
In App.js we connect default themes and ThemeProvider
Step 7
Create a UIKit file and attach a list of all components:
Step 8
Add a file with fake data data.js:
Step 9
Putting together a project:
react-native run-iosor
react-native run-androidDone ✅
