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-async-storage/async-storage": "^1.19.6",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-native-community/datetimepicker": "^7.6.1",
    "@react-native-community/geolocation": "^3.1.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "^11.1.0",
    "@react-native-community/slider": "^4.4.3",
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/material-top-tabs": "^6.6.5",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",
    "axios": "^1.6.2",
    "deprecated-react-native-prop-types": "^5.0.0",
    "html-entities": "^2.4.0",
    "i18n-js": "^4.3.2",
    "install": "^0.13.0",
    "lodash.memoize": "^4.1.2",
    "moment": "^2.29.4",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-addons-shallow-compare": "^15.6.3",
    "react-mixin": "^5.0.0",
    "react-native": "^0.73.1",
    "react-native-calendars": "^1.1302.0",
    "react-native-eject": "^0.2.0",
    "react-native-gesture-handler": "^2.13.4",
    "react-native-image-picker": "^7.0.2",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-maps": "^1.8.0",
    "react-native-paper": "^5.11.1",
    "react-native-reanimated": "^3.5.4",
    "react-native-remote-svg": "^2.0.11",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "^4.7.4",
    "react-native-svg": "^14.0.0",
    "react-native-vector-icons": "^10.0.2",
    "react-native-web": "^0.19.9",
    "react-native-webview": "^13.6.3",
    "react-redux": "^8.1.3",
    "react-timer-mixin": "^0.13.4",
    "redux": "^4.2.1",
    "redux-thunk": "^2.4.2",
    "sprintf-js": "^1.1.3"

Edit your babel.config.js file with the code bellow

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
          'react-native-reanimated/plugin',
      ],
};

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 custom fonts by opening .xcworkspace file in ios folder using Xcode

Browse to assets and drag the folder fonts to your project in Xcode. Make sure your app is checked under “Add to targets” and that “Create groups” is checked.

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 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"

Copy the contents in the assets/fonts folder to android/app/src/main/assets/fonts (note lowercase fonts folder).

Step2: 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.

Step3: Run android app by using the command bellow

npx react-native run-android