1. Home
  2. Docs
  3. CTH Directory Apps
  4. Installation
  5. Adding CTH Directory code to your application

Adding CTH Directory code to your application

Step 1: Backup your App.js and package.json file

Step 2: Copy App.js file, react-native.config.js file, src folder and assets folder from Source Code folder to your project folder.

Step 3: Copy dependencies modules bellow into dependencies property of your package.json file

    "@ptomasroos/react-native-multi-slider": "^2.2.2",
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/clipboard": "^1.2.3",
    "@react-native-community/datetimepicker": "^2.6.1",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/netinfo": "^5.9.6",
    "@react-native-community/slider": "^3.0.3",
    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/material-top-tabs": "^5.2.16",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "axios": "^0.19.2",
    "html-entities": "^1.3.1",
    "i18n-js": "^3.7.1",
    "install": "^0.13.0",
    "lodash.memoize": "^4.1.2",
    "moment": "^2.27.0",
    "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-calendars": "^1.301.0",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-image-gallery": "^2.1.5",
    "react-native-image-picker": "^2.3.3",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-maps": "^0.27.1",
    "react-native-paper": "^4.0.1",
    "react-native-reanimated": "^1.10.1",
    "react-native-remote-svg": "^2.0.6",
    "react-native-render-html": "^4.2.2",
    "react-native-safe-area-context": "^3.1.1",
    "react-native-screens": "^2.9.0",
    "react-native-snap-carousel": "^4.0.0-beta.5",
    "react-native-svg": "^12.1.0",
    "react-native-vector-icons": "^7.0.0",
    "react-native-web": "^0.13.5",
    "react-native-webview": "^10.3.3",
    "react-redux": "^7.2.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "sprintf-js": "^1.1.2"

Step 4: Run yarn or npm install command on your project folder. yarn is recommended.

yarn
npm install

iOS fixes

Step 1: Copy fonts list bellow into Info.plist file on ios/YOUR_APP_NAME folder

<key>UIAppFonts</key>
<array>
	<string>AvenirNextLTPro-Bold.ttf</string>
	<string>AvenirNextLTPro-Heavy.ttf</string>
	<string>AvenirNextLTPro-Medium.ttf</string>
	<string>AvenirNextLTPro-Regular.ttf</string>
	<string>AntDesign.ttf</string>
	<string>Entypo.ttf</string>
	<string>EvilIcons.ttf</string>
	<string>Feather.ttf</string>
	<string>FontAwesome.ttf</string>
	<string>FontAwesome5_Brands.ttf</string>
	<string>FontAwesome5_Regular.ttf</string>
	<string>FontAwesome5_Solid.ttf</string>
	<string>Fontisto.ttf</string>
	<string>Foundation.ttf</string>
	<string>Ionicons.ttf</string>
	<string>MaterialCommunityIcons.ttf</string>
	<string>MaterialIcons.ttf</string>
	<string>Octicons.ttf</string>
	<string>SimpleLineIcons.ttf</string>
	<string>Zocial.ttf</string>
</array>

You also need properties for current user location and access photo gallery

<key>NSLocationWhenInUseUsageDescription</key>
<string>Your location is required for showing listings near you</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) would like access to your photo gallery to change your profile picture</string>
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your camera</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your microphone (for videos)</string>

<key>LSApplicationQueriesSchemes</key>
<array>
	<string>tel</string>
	<string>telprompt</string>
</array>

Step 2: Link assets using react native link

npx react-native link

Step 3: Run the following comment from your project folder to update CocoaPods

cd ios
pod install 
cd ..

Step 4: Open .xcworkspace file in ios folder using Xcode to delete vector icons font entries from Build Phases tab -> Copy Bundle Resources. Do not delete AvenirNexLTPro-xxx.ttf fonts, they are custom fonts.

Step 5: Run ios app

npx react-native run-ios

Android fixes

Step1: Edit build.gradle file on android folder to add code bellow ( see screenshot )

This step is deprecated from React Native version 0.63.2

supportLibVersion = "28.0.0"
playServicesVersion = "17.0.0" // or find latest version
androidMapsUtilsVersion = "0.5"

Step2: Edit build.gradle on android/app folder

 // react native vector icons
project.ext.vectoricons = [
    iconFontNames: [ 
    'Entypo.ttf', 
    'EvilIcons.ttf',
    'Feather.ttf',
    'FontAwesome.ttf',
    'FontAwesome5_Brands.ttf',
    'FontAwesome5_Regular.ttf',
    'FontAwesome5_Solid.ttf',
    'Foundation.ttf',
    'Ionicons.ttf',
    'MaterialIcons.ttf',
    'MaterialCommunityIcons.ttf',
    'SimpleLineIcons.ttf',
    'Octicons.ttf',
    'Zocial.ttf',
    ] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Step3: Add multiDexEnabled variable on build.gradle on android/app folder

Step4: Edit /android/app/src/main/AndroidManifest.xml file to add Google Map API key and user location permission ( for getting user location for nearby filter )

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="YOUR_GOOGLE_MAP_API_KEY_HERE"/>

You must enable API key for the Android SDK to make your map working on Android.

Step5: Run android app by using the command bellow

npx react-native run-android

Was this article helpful to you? Yes No 3