Merge pull request #6 from 7dp/main

Add sample form layout and image picker capability
reyn-nova · Mar 24, 2021 · 177fe27 · 177fe27
2 parents 482618d + 8d511ac
commit 177fe27
Show file tree

Hide file tree

Showing 25 changed files with 14,907 additions and 243 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img alt="Crocodic" src="./misc/images/crocodic.png" width=250/>
+  <img alt="Crocodic" src="./support-files/images/crocodic.png" width=250/>
 </p>
 
 <p align="center">
@@ -20,46 +20,54 @@
 
 ## Clone Project
 
-Buka **terminal / cmd**, masuk ke folder yang diinginkan, lalu jalan kan ```git clone <LINK_GIT>```
+Buka terminal / cmd, masuk ke folder yang ingin Anda tuju, lalu jalan kan ```git clone <LINK_GIT>```.
 
 
 ## Running
 
 
 #### First Time Running
 
-Karena folder node_modules tidak ikut dalam repositori git, setelah clone perlu install, Buka **terminal / cmd** arahkan posisi folder ke folder project React Native Starter, jalankan ```npm install```
-
-Untuk MacOS ```cd ios``` dan install pod jalankan ```pod install``` lalu kembali ke folder project lagi ```cd ..```
+Karena folder ```node_modules``` tidak ikut dalam repositori git, maka setelah clone berhasil perlu untuk melakukan install modul node.
+Buka terminal / cmd arahkan posisi folder ke folder project (React Native Starter) lalu jalankan perintah ```npm install```.
 
 #### Start React-Native Packager
 
-Buka **terminal / cmd** arahkan posisi folder ke folder project React Native Starter, jalankan ```npm start```
+Buka terminal / cmd arahkan posisi folder ke folder project lalu jalankan ```npm start```.
+
+#### Run on Android
+
+1. Hubungkan perangkat android dengan PC / laptop melalui USB.
+2. Aktifkan **opsi pengembang** di pengaturan perangkat android.
+3. Aktifkan opsi **USB Debugging** dalam list pengaturan **opsi pengembang**.
+4. Buka terminal / cmd (jika React-Native Packager sedang berjalan maka gunakan jendela terminal / cmd baru), arahkan posisi folder ke folder project lalu jalankan ```npx react-native run-android```.
+
+#### Run on iOS
 
-#### Run On Android
+Sebelum run project di perangkat iOS diperlukan untuk melakukan step tambahan berikut untuk menginstal dependency pod:
+a. Masih di folder project jalankan perintah ```cd ios``` untuk berpindah ke folder ```ios```.
+b. Install dependency pod dengan perintah ```pod install```, mungkin akan sedikit memakan waktu.
+c. Setelah seluruh dependency pod terinstall maka jalankan ```cd ..``` untuk kembali ke folder project.
 
-1. Hubungkan device android dengan USB
-2. Aktifkan **opsi pengembang** di device android
-3. Aktifkan opsi **USB Debugging**
-4. Start React-Native Packager jika belum
-5. Buka jendela **terminal / cmd** lain, arahkan posisi folder ke folder project React Native Starter, jalankan ```npx react-native run-android```
+Jalankan langkah di bawah ini untuk run di perangkat iOS:
+1. Hubungkan perangkat iOS dengan perangkat MacOS melalui USB Lightning.
+2. Buka terminal / cmd (jika React-Native Packager sedang berjalan maka gunakan jendela terminal / cmd baru), arahkan posisi folder ke folder project lalu jalankan ```npx react-native run-ios```.
 
-#### Run On iOS
+#### Note
 
-1. Start React-Native Packager jika belum
-5. Buka jendela **terminal / cmd** lain, arahkan posisi folder ke folder project React Native Starter, jalankan ```npx react-native run-ios```
+Apabila dalam proses running Anda belum menjalankan React-Native Packager, maka sistem otomatis akan mendeteksi dan membuka satu jendela terminal / cmd dengan React-Native Packager yang telah running di dalamnya.
 
 
 ## Set-Up EsLint
 
-EsLint membantu untuk menyatakan peraturan - peraturan penulisan code, ini membuat kode lebih disiplin penulisannya dan lebih konsisten.
+EsLint membantu untuk menyatakan peraturan-peraturan penulisan kode, ini membuat penulisan kode menjadi lebih disiplin dan konsisten.
 
-Anda dapat mengubah konfigurasi peraturannya di ```.eslintrc.js```, dan agar peraturan EsLint dapat berjalan, anda terlebih dahulu harus menginstall ekstensi [EsLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).
+Anda dapat mengubah konfigurasi peraturannya di file ```.eslintrc.js```, dan agar peraturan EsLint dapat berjalan, anda terlebih dahulu harus menginstall ekstensi [EsLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) di IDE Visual Studio Code anda.
 
 Setelah terinstal, buka salah satu file javascript atau typescript, lihat di bagian bawah kanan visual studio code terdapat button bertuliskan EsLint, pastikan tercentang yang berarti menandakan bahwa ekstensi EsLint sudah berjalan.
 
 <p align="center">
-  <img alt="Crocodic" src="./misc/images/eslint.jpeg" width=250/>
+  <img alt="Crocodic" src="./support-files/images/eslint.jpeg" width=250/>
 </p>
 
 
@@ -68,8 +76,8 @@ Setelah terinstal, buka salah satu file javascript atau typescript, lihat di bag
 
 #### Build Android APK
 
-Buka **terminal / cmd** arahkan posisi folder ke folder project React Native Starter, jalankan ```npm run build-android```
+Buka terminal / cmd arahkan posisi folder ke folder project lalu jalankan ```npm run build-android```.
 
 #### Build iOS
 
-Buka **terminal / cmd** arahkan posisi folder ke folder project React Native Starter, jalankan ```npm run bundle-ios```, kemudian build / archive lewat XCode
+Buka terminal / cmd arahkan posisi folder ke folder project lalu jalankan ```npm run bundle-ios```, kemudian build / archive melalui aplikasi XCode (XCode hanya tersedia bagi pengguna MacOS).
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -2,6 +2,9 @@
   package="com.react_native_starter">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <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"/>
 
     <application
       android:name=".MainApplication"

diff --git a/android/build.gradle b/android/build.gradle
@@ -12,7 +12,7 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:3.5.3")
+        classpath("com.android.tools.build:gradle:4.0.1")
         classpath('com.google.gms:google-services:4.3.3')
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -320,10 +320,22 @@ PODS:
     - RNFBApp
   - RNGestureHandler (1.10.3):
     - React-Core
+  - RNImageCropPicker (0.36.0):
+    - React-Core
+    - React-RCTImage
+    - RNImageCropPicker/QBImagePickerController (= 0.36.0)
+    - TOCropViewController
+  - RNImageCropPicker/QBImagePickerController (0.36.0):
+    - React-Core
+    - React-RCTImage
+    - TOCropViewController
   - RNReanimated (1.13.2):
     - React-Core
   - RNScreens (2.18.1):
     - React-Core
+  - RNSnackbar (2.4.0):
+    - React-Core
+  - TOCropViewController (2.6.0)
   - Yoga (1.14.0)
 
 DEPENDENCIES:
@@ -361,8 +373,10 @@ DEPENDENCIES:
   - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
   - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNSnackbar (from `../node_modules/react-native-snackbar`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -378,6 +392,7 @@ SPEC REPOS:
     - GoogleUtilities
     - nanopb
     - PromisesObjC
+    - TOCropViewController
 
 EXTERNAL SOURCES:
   DoubleConversion:
@@ -444,10 +459,14 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-firebase/messaging"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNImageCropPicker:
+    :path: "../node_modules/react-native-image-crop-picker"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNSnackbar:
+    :path: "../node_modules/react-native-snackbar"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -478,7 +497,7 @@ SPEC CHECKSUMS:
   React-jsi: a0418934cf48f25b485631deb27c64dc40fb4c31
   React-jsiexecutor: 93bd528844ad21dc07aab1c67cb10abae6df6949
   React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
-  react-native-safe-area-context: e471852c5ed67eea4b10c5d9d43c1cebae3b231d
+  react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
   React-RCTActionSheet: 89a0ca9f4a06c1f93c26067af074ccdce0f40336
   React-RCTAnimation: 1bde3ecc0c104c55df246eda516e0deb03c4e49b
   React-RCTBlob: a97d378b527740cc667e03ebfa183a75231ab0f0
@@ -489,14 +508,17 @@ SPEC CHECKSUMS:
   React-RCTText: 5c51df3f08cb9dedc6e790161195d12bac06101c
   React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d
   ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b
-  RNCAsyncStorage: 1ab3f6ec0bc2c676dad4a00471d4c9d1a2cf68a2
-  RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459
-  RNCPushNotificationIOS: 5b1cf9ad2aaa107ecb92d5d2d7005ba521b2b97a
+  RNCAsyncStorage: fe58eec522885718d6b297b7b658bf87d7ca557b
+  RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
+  RNCPushNotificationIOS: 61a7c72bd1ebad3568025957d001e0f0e7b32191
   RNFBApp: 1624ffcfc328c00ec3049d2f1bbf09d3e78dcdb7
   RNFBMessaging: 43d7ae1f8b93d20ad3194cac3e31ca446d4e9828
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNImageCropPicker: e641bf83ac47324994cac139bde74635ec52c17c
   RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad
   RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
+  RNSnackbar: be3333a21a453ccc272f41a8add5a71f7d44dfcd
+  TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38
   Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
 
 PODFILE CHECKSUM: 850c117416d6bb178ef92eb25d8de871f4f6c6c1

diff --git a/ios/react_native_starter.xcodeproj/project.pbxproj b/ios/react_native_starter.xcodeproj/project.pbxproj
@@ -230,7 +230,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
+			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
 		};
 		5A80185698F1C6CB070CFCD6 /* [CP-User] [RNFB] Core Configuration */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -271,11 +271,15 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-react_native_starter/Pods-react_native_starter-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;

diff --git a/ios/react_native_starter/Info.plist b/ios/react_native_starter/Info.plist
@@ -39,6 +39,10 @@
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
+	<key>NSCameraUsageDescription</key>
+	<string>Untuk memotret gambar yang akan digunakan sebagai foto profil</string>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>Untuk mengambil gambar yang akan digunakan sebagai foto profil</string>
 	<key>UIBackgroundModes</key>
 	<array>
 		<string>remote-notification</string>
@@ -61,7 +65,7 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-  <key>UIUserInterfaceStyle</key>
-  <string>Light</string>
+	<key>UIUserInterfaceStyle</key>
+	<string>Light</string>
 </dict>
 </plist>