To get started create the project using expo-cli
-
npx expo-cli init qaappdesignsystem
-
npm install -g expo-cli
-
Install react-navigation to allow user to navigate around npm install react-navigation
-
Install other Dependencies expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
-
Install React Navigation Stack npm install react-navigation-stack @react-native-community/masked-view
-
Start the app and clear cache with expo r -c
React Navigation v4 Docs: https://reactnavigation.org/docs/4.x/getting-started
expo eject yarn ios yarn android
- Select the Targets: qaappdesignsystem
- Go to Product -> Archive
- Click on Distribute App
- Click Development
- App Thinning: All compatible device variants
- Automatically manage signing
- Export
Login to bit.dev
https://bit.dev/yaradigital/ahua-design-system
Example: AhuaButton
yarn add @yaradigital/ahua-design-system.ui.button
will add the dependencies to the package.json as shown:
"@yaradigital/ahua-design-system.ui.button": "^0.0.13",
Add fonts
https://www.bigbinary.com/learn-react-native/adding-custom-fonts
for this
<Button
type='Primary'
title='Loading Button'
loading={true}
iconPlacement='LEFTICON'
/>
Add the config file react-native.config.js
reference: https://www.bigbinary.com/learn-react-native/adding-custom-fonts
yarn add react-native-svg
cd ios
pod install