Creating New App – NEW – Documentations

Setup development environment

Please follow instructions on React Native CLI Quickstart tab on Getting Started page to setup your development environment https://reactnative.dev/docs/getting-started

Creating a new application

When done, run npx react-native init YourProject to create new your application ( replace YourProject with your app name )

npx react-native init YourProject

Running your React Native application

Run npx react-native run-ios and npx react-native run-android inside your React Native project folder to make sure that everything is set up correctly.

npx react-native run-ios

npx react-native run-android

You should see your new app running in your iOS and Android emulator shortly.

For Android, please make sure that you have an Android emulator running or a device connected

Fix Android bug

* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at ‘/YOUR_APP_PATH/android/local.properties'.

SOLUTION: Create a local.properties file in android folder and setting the sdk.dir path: https://prnt.sc/rb6wrw

warn Failed to connect to development server using "adb reverse": spawnSync adb ENOENT

SOLUTION: Type source ~/.bash_profile to load the config into your current shell. Verify that ANDROID_HOME has been added to your path by running echo $PATH.

Adding CityBook code to your application

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

Step 2: Copy App.js file and src folder from CityBook app to your project folder

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

,
    "@react-native-community/async-storage": "^1.8.1",
    "@react-native-community/datetimepicker": "^2.2.2",
    "@react-native-community/masked-view": "^0.1.7",
    "axios": "^0.19.2",
    "base-64": "^0.1.0",
    "i18n-js": "^3.5.1",
    "native-base": "^2.7.0",
    "prop-types": "^15.6.2",
    "ramda": "^0.27.0",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-linear-gradient": "react-native-community/react-native-linear-gradient",
    "react-native-maps": "^0.26.1",
    "react-native-modal-datetime-picker": "^8.5.1",
    "react-native-picker-select": "^6.5.0",
    "react-native-reanimated": "^1.7.0",
    "react-native-render-html": "^4.2.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.2.0",
    "react-native-scrollable-tab-view": "^1.0.0",
    "react-native-snap-carousel": "^3.7.5",
    "react-native-svg": "^11.0.1",
    "react-native-swipeout": "^2.3.6",
    "react-native-swiper": "^1.5.13",
    "react-native-textinput-effects": "^0.5.1",
    "react-native-video": "^5.0.2",
    "react-native-webview": "^8.1.2",
    "react-navigation": "^2.12.2",
    "react-redux": "^7.2.0",
    "redux": "^4.0.0",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0"

Step 4: Run yarn or npm install on your project folder

yarn

npm install

iOS fixes

Step 1: Add the code bellow to Podfile in ios folder

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

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

<key>UIAppFonts</key>
<array>
	<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>Foundation.ttf</string>
	<string>Ionicons.ttf</string>
	<string>MaterialIcons.ttf</string>
	<string>MaterialCommunityIcons.ttf</string>
	<string>SimpleLineIcons.ttf</string>
	<string>Octicons.ttf</string>
	<string>Zocial.ttf</string>
	<string>Quicksand-Bold.ttf</string>
	<string>Quicksand-Light.ttf</string>
	<string>Quicksand-Medium.ttf</string>
	<string>Quicksand-Regular.ttf</string>
</array>

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

cd ios
pod install
cd ..

Step 4: Run ios app

npx react-native run-ios

Android fixes

Step1: Edit settings.gradle file

include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')

Step2: Edit build.gradle file on android folder

supportLibVersion = "28.0.0"

Step3: Edit build.gradle on android/app folder

implementation project(':react-native-maps')

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"

Step4: Add Google map api key

<!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_GOOGLE_MAP_API_KEY_HERE"/>

Step5: Run android app by using the command bellow

npx react-native run-android

CityBook Apps