how to start a new react native finzen app:
- run: react-native init finzen
- run: yarn add react-native-animatable react-native-router-flux firebase react-native-circular-progress react-native-image-crop-picker react-native-keyboard-aware-scroll-view react-native-linear-gradient react-native-material-kit@0.4.1 react-native-router-flux react-native-search-bar react-native-share react-native-snackbar react-native-snap-carousel@1.6.1 react-native-spinkit react-native-tab-view react-native-vector-icons react-native-view-transformer redux react-redux react-timer-mixin redux-thunk
- Link packages
- run: react-native link
- Verify that the following packages have been linked: react-native-share react-native-vector-icons react-native-spinkit react-native-snackbar react-native-linear-gradient react-native-material-kit react-native-search-bar
- Add and link react-native-maps with google maps:
- run: yarn add react-native-maps@0.13.0
- Create a Podfile at “PROJECT_FOLDER/ios/Podfile” and copy code from here: https://github.com/tedjames/finzenPodfile/blob/master/Podfile
- Navigate to your ios folder and run “pod install”
- Open the new .xcworkspace file. This is your project’s new home
- Drop the AirMaps and AirGoogleMaps folders into the root of your project from “/Users/tedwerbel/Documents/CodingProjects/finzen/finzen/node_modules/react-native-maps/ios” (Make sure Copy items if needed is ticked)
- Generate API key from: https://developers.google.com/maps/documentation/ios-sdk/get-api-key OR use this one: AIzaSyBF5tbxPwQSA0YPFmM2eDr1LmXviGE68r4
- Add the API key to AppDelegate.m
- Add “@import GoogleMaps;”, “[GMSServices provideAPIKey:@"AIzaSyBF5tbxPwQSA0YPFmM2eDr1LmXviGE68r4"];” to AppDelegate.m (image: https://imgur.com/a/1fOfN)
- Add “$(SRCROOT)/../node_modules/react-native-maps/ios/AirMaps” to header search paths for Pods project in build settings and change from non-recursive to recursive (image: https://gist.github.com/heron2014/e60fa003e9b117ce80d56bb1d5bfe9e0/raw/bab92a8621a8a940780a18796dbec69bd5ae8345/x2-images.png)
- References:
- Link ReactART for react-native-circular-progress:
- Go to: node_modules/react-native/Libraries/ART/ART.xcodeproj
- Drag that Xcode project to the “Libraries” folder
- Add libART.a under “Build Phases” and “Link Binary with Libraries”
- Link react-native-image-crop-picker:
- Add the following 4 lines to info.plist just above the first key/string pair:
-
<key>NSPhotoLibraryUsageDescription</key>
-
<string>To upload receipts and images</string>
-
<key>NSCameraUsageDescription</key>
-
<string>To upload receipts and images</string>
-
- ONLY CONTINUE IF RNICP IS STILL NOT WORKING
- Drag and drop “react-native-image-crop-picker/ios/ImageCropPickerSDK” folder to your xcode project (Make sure Copy items if needed is ticked)
- Click on project General tab:
- Under Deployment Info set Deployment Target to 8.0
- Under Embedded Binaries click + and add “RSKImageCropper.framework” and “QBImagePicker.framework”
- Add the following 4 lines to info.plist just above the first key/string pair:
- Drag and drop fonts to Resources folder (be sure to add to target, select the option to copy items and select the option to create groups)
- Add fonts to info.plist:
<key>UIAppFonts</key>
<array>
<string>Montserrat-Bold.ttf</string>
<string>Montserrat-Regular.ttf</string>
<string>OpenSans-Bold.ttf</string>
<string>OpenSans-BoldItalic.ttf</string>
<string>OpenSans-ExtraBold.ttf</string>
<string>OpenSans-ExtraBoldItalic.ttf</string>
<string>OpenSans-Italic.ttf</string>
<string>OpenSans-Light.ttf</string>
<string>OpenSans-LightItalic.ttf</string>
<string>OpenSans-Regular.ttf</string>
<string>OpenSans-Semibold.ttf</string>
<string>OpenSans-SemiboldItalic.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>FontAwesome.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>
<string>rubicon-icon-font.ttf</string>
<string>Rubik-Black.ttf</string>
<string>Rubik-BlackItalic.ttf</string>
<string>Rubik-Bold.ttf</string>
<string>Rubik-BoldItalic.ttf</string>
<string>Rubik-Italic.ttf</string>
<string>Rubik-Light.ttf</string>
<string>Rubik-LightItalic.ttf</string>
<string>Rubik-Medium.ttf</string>
<string>Rubik-MediumItalic.ttf</string>
<string>Rubik-Regular.ttf</string>
</array>
Deployment notes:
- Preparing image-crop-picker sdk for production: https://github.com/ivpusic/react-native-image-crop-picker#production-build