├── .buckconfig ├── .editorconfig ├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.tsx ├── __tests__ └── App-test.tsx ├── android ├── app │ ├── _BUCK │ ├── build.gradle │ ├── build_defs.bzl │ ├── debug.keystore │ ├── proguard-rules.pro │ └── src │ │ ├── debug │ │ ├── AndroidManifest.xml │ │ └── java │ │ │ └── com │ │ │ └── articlesapp │ │ │ └── ReactNativeFlipper.java │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ └── com │ │ │ └── articlesapp │ │ │ ├── MainActivity.java │ │ │ └── MainApplication.java │ │ └── res │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle ├── api ├── articles.ts ├── auth.ts ├── client.ts ├── comments.ts └── types.ts ├── app.json ├── babel.config.js ├── components ├── ArticleActionButtons.tsx ├── ArticleItem.tsx ├── ArticleView.tsx ├── Articles.tsx ├── AskDialog.tsx ├── AuthForm.tsx ├── CommentInput.tsx ├── CommentItem.tsx ├── CommentModal.tsx ├── MenuItem.tsx └── WriteButton.tsx ├── contexts └── UserContext.tsx ├── hooks ├── useAuthLoadEffect.tsx ├── useInform.ts ├── useLogin.ts └── useRegister.ts ├── index.js ├── ios ├── ArticlesApp.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ └── ArticlesApp.xcscheme ├── ArticlesApp.xcworkspace │ └── contents.xcworkspacedata ├── ArticlesApp │ ├── AppDelegate.h │ ├── AppDelegate.m │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ └── Contents.json │ ├── Info.plist │ ├── LaunchScreen.storyboard │ └── main.m ├── ArticlesAppTests │ ├── ArticlesAppTests.m │ └── Info.plist ├── Podfile └── Podfile.lock ├── metro.config.js ├── package.json ├── screens ├── ArticleScreen.tsx ├── ArticlesScreen.tsx ├── LoginScreen.tsx ├── MainTab.tsx ├── MyArticlesScreen.tsx ├── RegisterScreen.tsx ├── RootStack.tsx ├── UserMenuScreen.tsx ├── WriteScreen.tsx └── types.ts ├── storages └── authStorage.ts ├── tsconfig.json └── yarn.lock /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Windows files 2 | [*.bat] 3 | end_of_line = crlf 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Windows files should use crlf line endings 2 | # https://help.github.com/articles/dealing-with-line-endings/ 3 | *.bat text eol=crlf 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # Android/IntelliJ 25 | # 26 | build/ 27 | .idea 28 | .gradle 29 | local.properties 30 | *.iml 31 | 32 | # node.js 33 | # 34 | node_modules/ 35 | npm-debug.log 36 | yarn-error.log 37 | 38 | # BUCK 39 | buck-out/ 40 | \.buckd/ 41 | *.keystore 42 | !debug.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://docs.fastlane.tools/best-practices/source-control/ 50 | 51 | */fastlane/report.xml 52 | */fastlane/Preview.html 53 | */fastlane/screenshots 54 | 55 | # Bundle artifact 56 | *.jsbundle 57 | 58 | # CocoaPods 59 | /ios/Pods/ 60 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | arrowParens: 'avoid', 7 | }; 8 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {NavigationContainer} from '@react-navigation/native'; 3 | import RootStack from './screens/RootStack'; 4 | import {QueryClient, QueryClientProvider} from 'react-query'; 5 | import {UserContextProvider} from './contexts/UserContext'; 6 | 7 | const queryClient = new QueryClient(); 8 | 9 | function App() { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /__tests__/App-test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /android/app/_BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.articlesapp", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.articlesapp", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation. If none specified and 19 | * // "index.android.js" exists, it will be used. Otherwise "index.js" is 20 | * // default. Can be overridden with ENTRY_FILE environment variable. 21 | * entryFile: "index.android.js", 22 | * 23 | * // https://reactnative.dev/docs/performance#enable-the-ram-format 24 | * bundleCommand: "ram-bundle", 25 | * 26 | * // whether to bundle JS and assets in debug mode 27 | * bundleInDebug: false, 28 | * 29 | * // whether to bundle JS and assets in release mode 30 | * bundleInRelease: true, 31 | * 32 | * // whether to bundle JS and assets in another build variant (if configured). 33 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 34 | * // The configuration property can be in the following formats 35 | * // 'bundleIn${productFlavor}${buildType}' 36 | * // 'bundleIn${buildType}' 37 | * // bundleInFreeDebug: true, 38 | * // bundleInPaidRelease: true, 39 | * // bundleInBeta: true, 40 | * 41 | * // whether to disable dev mode in custom build variants (by default only disabled in release) 42 | * // for example: to disable dev mode in the staging build type (if configured) 43 | * devDisabledInStaging: true, 44 | * // The configuration property can be in the following formats 45 | * // 'devDisabledIn${productFlavor}${buildType}' 46 | * // 'devDisabledIn${buildType}' 47 | * 48 | * // the root of your project, i.e. where "package.json" lives 49 | * root: "../../", 50 | * 51 | * // where to put the JS bundle asset in debug mode 52 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 53 | * 54 | * // where to put the JS bundle asset in release mode 55 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 56 | * 57 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 58 | * // require('./image.png')), in debug mode 59 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 60 | * 61 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 62 | * // require('./image.png')), in release mode 63 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 64 | * 65 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 66 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 67 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 68 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 69 | * // for example, you might want to remove it from here. 70 | * inputExcludes: ["android/**", "ios/**"], 71 | * 72 | * // override which node gets called and with what additional arguments 73 | * nodeExecutableAndArgs: ["node"], 74 | * 75 | * // supply additional arguments to the packager 76 | * extraPackagerArgs: [] 77 | * ] 78 | */ 79 | 80 | project.ext.react = [ 81 | enableHermes: false, // clean and rebuild if changing 82 | ] 83 | 84 | apply from: "../../node_modules/react-native/react.gradle" 85 | 86 | /** 87 | * Set this to true to create two separate APKs instead of one: 88 | * - An APK that only works on ARM devices 89 | * - An APK that only works on x86 devices 90 | * The advantage is the size of the APK is reduced by about 4MB. 91 | * Upload all the APKs to the Play Store and people will download 92 | * the correct one based on the CPU architecture of their device. 93 | */ 94 | def enableSeparateBuildPerCPUArchitecture = false 95 | 96 | /** 97 | * Run Proguard to shrink the Java bytecode in release builds. 98 | */ 99 | def enableProguardInReleaseBuilds = false 100 | 101 | /** 102 | * The preferred build flavor of JavaScriptCore. 103 | * 104 | * For example, to use the international variant, you can use: 105 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 106 | * 107 | * The international variant includes ICU i18n library and necessary data 108 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 109 | * give correct results when using with locales other than en-US. Note that 110 | * this variant is about 6MiB larger per architecture than default. 111 | */ 112 | def jscFlavor = 'org.webkit:android-jsc:+' 113 | 114 | /** 115 | * Whether to enable the Hermes VM. 116 | * 117 | * This should be set on project.ext.react and mirrored here. If it is not set 118 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode 119 | * and the benefits of using Hermes will therefore be sharply reduced. 120 | */ 121 | def enableHermes = project.ext.react.get("enableHermes", false); 122 | 123 | android { 124 | ndkVersion rootProject.ext.ndkVersion 125 | 126 | compileSdkVersion rootProject.ext.compileSdkVersion 127 | 128 | compileOptions { 129 | sourceCompatibility JavaVersion.VERSION_1_8 130 | targetCompatibility JavaVersion.VERSION_1_8 131 | } 132 | 133 | defaultConfig { 134 | applicationId "com.articlesapp" 135 | minSdkVersion rootProject.ext.minSdkVersion 136 | targetSdkVersion rootProject.ext.targetSdkVersion 137 | versionCode 1 138 | versionName "1.0" 139 | } 140 | splits { 141 | abi { 142 | reset() 143 | enable enableSeparateBuildPerCPUArchitecture 144 | universalApk false // If true, also generate a universal APK 145 | include "armeabi-v7a", "x86", "arm64-v8a", "x86_64" 146 | } 147 | } 148 | signingConfigs { 149 | debug { 150 | storeFile file('debug.keystore') 151 | storePassword 'android' 152 | keyAlias 'androiddebugkey' 153 | keyPassword 'android' 154 | } 155 | } 156 | buildTypes { 157 | debug { 158 | signingConfig signingConfigs.debug 159 | } 160 | release { 161 | // Caution! In production, you need to generate your own keystore file. 162 | // see https://reactnative.dev/docs/signed-apk-android. 163 | signingConfig signingConfigs.debug 164 | minifyEnabled enableProguardInReleaseBuilds 165 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 166 | } 167 | } 168 | 169 | // applicationVariants are e.g. debug, release 170 | applicationVariants.all { variant -> 171 | variant.outputs.each { output -> 172 | // For each separate APK per architecture, set a unique version code as described here: 173 | // https://developer.android.com/studio/build/configure-apk-splits.html 174 | // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. 175 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] 176 | def abi = output.getFilter(OutputFile.ABI) 177 | if (abi != null) { // null for the universal-debug, universal-release variants 178 | output.versionCodeOverride = 179 | defaultConfig.versionCode * 1000 + versionCodes.get(abi) 180 | } 181 | 182 | } 183 | } 184 | } 185 | 186 | dependencies { 187 | implementation fileTree(dir: "libs", include: ["*.jar"]) 188 | //noinspection GradleDynamicVersion 189 | implementation "com.facebook.react:react-native:+" // From node_modules 190 | 191 | implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0" 192 | 193 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { 194 | exclude group:'com.facebook.fbjni' 195 | } 196 | 197 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 198 | exclude group:'com.facebook.flipper' 199 | exclude group:'com.squareup.okhttp3', module:'okhttp' 200 | } 201 | 202 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { 203 | exclude group:'com.facebook.flipper' 204 | } 205 | 206 | if (enableHermes) { 207 | def hermesPath = "../../node_modules/hermes-engine/android/"; 208 | debugImplementation files(hermesPath + "hermes-debug.aar") 209 | releaseImplementation files(hermesPath + "hermes-release.aar") 210 | } else { 211 | implementation jscFlavor 212 | } 213 | } 214 | 215 | // Run this once to be able to run the application with BUCK 216 | // puts all compile dependencies into folder libs for BUCK to use 217 | task copyDownloadableDepsToLibs(type: Copy) { 218 | from configurations.compile 219 | into 'libs' 220 | } 221 | 222 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 223 | 224 | project.ext.vectoricons = [ 225 | iconFontNames: ['MaterialIcons.ttf'] 226 | ] 227 | 228 | apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle") 229 | 230 | -------------------------------------------------------------------------------- /android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/ArticlesApp/83033c27fba10f440757556d19f1ca6ffba1d088/android/app/debug.keystore -------------------------------------------------------------------------------- /android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /android/app/src/debug/java/com/articlesapp/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.articlesapp; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin; 21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 22 | import com.facebook.react.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | public class ReactNativeFlipper { 28 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 29 | if (FlipperUtils.shouldEnableFlipper(context)) { 30 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 31 | 32 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 33 | client.addPlugin(new ReactFlipperPlugin()); 34 | client.addPlugin(new DatabasesFlipperPlugin(context)); 35 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 36 | client.addPlugin(CrashReporterPlugin.getInstance()); 37 | 38 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 39 | NetworkingModule.setCustomClientBuilder( 40 | new NetworkingModule.CustomClientBuilder() { 41 | @Override 42 | public void apply(OkHttpClient.Builder builder) { 43 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 44 | } 45 | }); 46 | client.addPlugin(networkFlipperPlugin); 47 | client.start(); 48 | 49 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 50 | // Hence we run if after all native modules have been initialized 51 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 52 | if (reactContext == null) { 53 | reactInstanceManager.addReactInstanceEventListener( 54 | new ReactInstanceManager.ReactInstanceEventListener() { 55 | @Override 56 | public void onReactContextInitialized(ReactContext reactContext) { 57 | reactInstanceManager.removeReactInstanceEventListener(this); 58 | reactContext.runOnNativeModulesQueueThread( 59 | new Runnable() { 60 | @Override 61 | public void run() { 62 | client.addPlugin(new FrescoFlipperPlugin()); 63 | } 64 | }); 65 | } 66 | }); 67 | } else { 68 | client.addPlugin(new FrescoFlipperPlugin()); 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/articlesapp/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.articlesapp; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. This is used to schedule 9 | * rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "ArticlesApp"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/articlesapp/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.articlesapp; 2 | 3 | import android.app.Application; 4 | import android.content.Context; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.soloader.SoLoader; 11 | import java.lang.reflect.InvocationTargetException; 12 | import java.util.List; 13 | 14 | public class MainApplication extends Application implements ReactApplication { 15 | 16 | private final ReactNativeHost mReactNativeHost = 17 | new ReactNativeHost(this) { 18 | @Override 19 | public boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | @SuppressWarnings("UnnecessaryLocalVariable") 26 | List packages = new PackageList(this).getPackages(); 27 | // Packages that cannot be autolinked yet can be added manually here, for example: 28 | // packages.add(new MyReactNativePackage()); 29 | return packages; 30 | } 31 | 32 | @Override 33 | protected String getJSMainModuleName() { 34 | return "index"; 35 | } 36 | }; 37 | 38 | @Override 39 | public ReactNativeHost getReactNativeHost() { 40 | return mReactNativeHost; 41 | } 42 | 43 | @Override 44 | public void onCreate() { 45 | super.onCreate(); 46 | SoLoader.init(this, /* native exopackage */ false); 47 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 48 | } 49 | 50 | /** 51 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 52 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 53 | * 54 | * @param context 55 | * @param reactInstanceManager 56 | */ 57 | private static void initializeFlipper( 58 | Context context, ReactInstanceManager reactInstanceManager) { 59 | if (BuildConfig.DEBUG) { 60 | try { 61 | /* 62 | We use reflection here to pick up the class that initializes Flipper, 63 | since Flipper library is not available in release mode 64 | */ 65 | Class aClass = Class.forName("com.articlesapp.ReactNativeFlipper"); 66 | aClass 67 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 68 | .invoke(null, context, reactInstanceManager); 69 | } catch (ClassNotFoundException e) { 70 | e.printStackTrace(); 71 | } catch (NoSuchMethodException e) { 72 | e.printStackTrace(); 73 | } catch (IllegalAccessException e) { 74 | e.printStackTrace(); 75 | } catch (InvocationTargetException e) { 76 | e.printStackTrace(); 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/ArticlesApp/83033c27fba10f440757556d19f1ca6ffba1d088/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/ArticlesApp/83033c27fba10f440757556d19f1ca6ffba1d088/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/ArticlesApp/83033c27fba10f440757556d19f1ca6ffba1d088/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/ArticlesApp/83033c27fba10f440757556d19f1ca6ffba1d088/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/ArticlesApp/83033c27fba10f440757556d19f1ca6ffba1d088/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/ArticlesApp/83033c27fba10f440757556d19f1ca6ffba1d088/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/ArticlesApp/83033c27fba10f440757556d19f1ca6ffba1d088/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/ArticlesApp/83033c27fba10f440757556d19f1ca6ffba1d088/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/ArticlesApp/83033c27fba10f440757556d19f1ca6ffba1d088/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/ArticlesApp/83033c27fba10f440757556d19f1ca6ffba1d088/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ArticlesApp 3 | 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "29.0.3" 6 | minSdkVersion = 21 7 | compileSdkVersion = 29 8 | targetSdkVersion = 29 9 | ndkVersion = "20.1.5948944" 10 | } 11 | repositories { 12 | google() 13 | jcenter() 14 | } 15 | dependencies { 16 | classpath("com.android.tools.build:gradle:4.1.0") 17 | // NOTE: Do not place your application dependencies here; they belong 18 | // in the individual module build.gradle files 19 | } 20 | } 21 | 22 | allprojects { 23 | repositories { 24 | mavenLocal() 25 | maven { 26 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 27 | url("$rootDir/../node_modules/react-native/android") 28 | } 29 | maven { 30 | // Android JSC is installed from npm 31 | url("$rootDir/../node_modules/jsc-android/dist") 32 | } 33 | 34 | google() 35 | jcenter() 36 | maven { url 'https://www.jitpack.io' } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.75.1 29 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/velopert/ArticlesApp/83033c27fba10f440757556d19f1ca6ffba1d088/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 4 | # Copyright 2015 the original author or authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | ## 21 | ## Gradle start up script for UN*X 22 | ## 23 | ############################################################################## 24 | 25 | # Attempt to set APP_HOME 26 | # Resolve links: $0 may be a link 27 | PRG="$0" 28 | # Need this for relative symlinks. 29 | while [ -h "$PRG" ] ; do 30 | ls=`ls -ld "$PRG"` 31 | link=`expr "$ls" : '.*-> \(.*\)$'` 32 | if expr "$link" : '/.*' > /dev/null; then 33 | PRG="$link" 34 | else 35 | PRG=`dirname "$PRG"`"/$link" 36 | fi 37 | done 38 | SAVED="`pwd`" 39 | cd "`dirname \"$PRG\"`/" >/dev/null 40 | APP_HOME="`pwd -P`" 41 | cd "$SAVED" >/dev/null 42 | 43 | APP_NAME="Gradle" 44 | APP_BASE_NAME=`basename "$0"` 45 | 46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 48 | 49 | # Use the maximum available, or set MAX_FD != -1 to use that value. 50 | MAX_FD="maximum" 51 | 52 | warn () { 53 | echo "$*" 54 | } 55 | 56 | die () { 57 | echo 58 | echo "$*" 59 | echo 60 | exit 1 61 | } 62 | 63 | # OS specific support (must be 'true' or 'false'). 64 | cygwin=false 65 | msys=false 66 | darwin=false 67 | nonstop=false 68 | case "`uname`" in 69 | CYGWIN* ) 70 | cygwin=true 71 | ;; 72 | Darwin* ) 73 | darwin=true 74 | ;; 75 | MINGW* ) 76 | msys=true 77 | ;; 78 | NONSTOP* ) 79 | nonstop=true 80 | ;; 81 | esac 82 | 83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 84 | 85 | 86 | # Determine the Java command to use to start the JVM. 87 | if [ -n "$JAVA_HOME" ] ; then 88 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 89 | # IBM's JDK on AIX uses strange locations for the executables 90 | JAVACMD="$JAVA_HOME/jre/sh/java" 91 | else 92 | JAVACMD="$JAVA_HOME/bin/java" 93 | fi 94 | if [ ! -x "$JAVACMD" ] ; then 95 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 96 | 97 | Please set the JAVA_HOME variable in your environment to match the 98 | location of your Java installation." 99 | fi 100 | else 101 | JAVACMD="java" 102 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 103 | 104 | Please set the JAVA_HOME variable in your environment to match the 105 | location of your Java installation." 106 | fi 107 | 108 | # Increase the maximum file descriptors if we can. 109 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 110 | MAX_FD_LIMIT=`ulimit -H -n` 111 | if [ $? -eq 0 ] ; then 112 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 113 | MAX_FD="$MAX_FD_LIMIT" 114 | fi 115 | ulimit -n $MAX_FD 116 | if [ $? -ne 0 ] ; then 117 | warn "Could not set maximum file descriptor limit: $MAX_FD" 118 | fi 119 | else 120 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 121 | fi 122 | fi 123 | 124 | # For Darwin, add options to specify how the application appears in the dock 125 | if $darwin; then 126 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 127 | fi 128 | 129 | # For Cygwin or MSYS, switch paths to Windows format before running java 130 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then 131 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 132 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 133 | 134 | JAVACMD=`cygpath --unix "$JAVACMD"` 135 | 136 | # We build the pattern for arguments to be converted via cygpath 137 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 138 | SEP="" 139 | for dir in $ROOTDIRSRAW ; do 140 | ROOTDIRS="$ROOTDIRS$SEP$dir" 141 | SEP="|" 142 | done 143 | OURCYGPATTERN="(^($ROOTDIRS))" 144 | # Add a user-defined pattern to the cygpath arguments 145 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 146 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 147 | fi 148 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 149 | i=0 150 | for arg in "$@" ; do 151 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 152 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 153 | 154 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 155 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 156 | else 157 | eval `echo args$i`="\"$arg\"" 158 | fi 159 | i=`expr $i + 1` 160 | done 161 | case $i in 162 | 0) set -- ;; 163 | 1) set -- "$args0" ;; 164 | 2) set -- "$args0" "$args1" ;; 165 | 3) set -- "$args0" "$args1" "$args2" ;; 166 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;; 167 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 168 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 169 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 170 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 171 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 172 | esac 173 | fi 174 | 175 | # Escape application args 176 | save () { 177 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 178 | echo " " 179 | } 180 | APP_ARGS=`save "$@"` 181 | 182 | # Collect all arguments for the java command, following the shell quoting and substitution rules 183 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 184 | 185 | exec "$JAVACMD" "$@" 186 | -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'ArticlesApp' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /api/articles.ts: -------------------------------------------------------------------------------- 1 | import client from './client'; 2 | import {Article} from './types'; 3 | 4 | export async function getArticles({ 5 | limit = 10, 6 | cursor, 7 | prevCursor, 8 | }: { 9 | limit?: number; 10 | cursor?: number; 11 | prevCursor?: number; 12 | }) { 13 | const response = await client.get('/articles', { 14 | params: { 15 | _sort: 'id:DESC', 16 | _limit: limit, 17 | id_lt: cursor, 18 | id_gt: prevCursor, 19 | }, 20 | }); 21 | console.log( 22 | JSON.stringify({ 23 | _sort: 'id:DESC', 24 | _limit: limit, 25 | id_lt: cursor, 26 | id_gt: prevCursor, 27 | }), 28 | ); 29 | return response.data; 30 | } 31 | 32 | export async function getArticle(id: number) { 33 | const response = await client.get

(`/articles/${id}`); 34 | return response.data; 35 | } 36 | 37 | export async function writeArticle(params: {title: string; body: string}) { 38 | const response = await client.post
('/articles', params); 39 | return response.data; 40 | } 41 | 42 | export async function modifyArticle(params: { 43 | id: number; 44 | title: string; 45 | body: string; 46 | }) { 47 | const {id, title, body} = params; 48 | const response = await client.put
(`/articles/${id}`, {title, body}); 49 | return response.data; 50 | } 51 | 52 | export async function deleteArticle(id: number) { 53 | await client.delete
(`/articles/${id}`); 54 | return null; // 응답 결과가 없기 때문에 null 반환 55 | } 56 | -------------------------------------------------------------------------------- /api/auth.ts: -------------------------------------------------------------------------------- 1 | import client from './client'; 2 | import {AuthResult, User} from './types'; 3 | 4 | export async function register(params: RegisterParams) { 5 | const response = await client.post( 6 | '/auth/local/register', 7 | params, 8 | ); 9 | return response.data; 10 | } 11 | 12 | export async function login(params: LoginParams) { 13 | const response = await client.post('/auth/local', params); 14 | return response.data; 15 | } 16 | 17 | export async function getLoginStatus() { 18 | const response = await client.get('/users/me'); 19 | return response.data; 20 | } 21 | 22 | interface RegisterParams { 23 | username: string; 24 | email: string; 25 | password: string; 26 | } 27 | 28 | interface LoginParams { 29 | identifier: string; 30 | password: string; 31 | } 32 | -------------------------------------------------------------------------------- /api/client.ts: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | // __DEV__ 값을 통해 현재 환경이 개발 환경인지 아닌지 판단할 수 있습니다. 4 | const baseURL = __DEV__ 5 | ? 'http://localhost:1337' 6 | : 'https://articles.example.com'; 7 | 8 | const client = axios.create({ 9 | baseURL, 10 | }); 11 | 12 | export function applyToken(jwt: string) { 13 | client.defaults.headers.Authorization = `Bearer ${jwt}`; 14 | } 15 | 16 | export function clearToken() { 17 | delete client.defaults.headers.Authorization; 18 | } 19 | 20 | export default client; 21 | -------------------------------------------------------------------------------- /api/comments.ts: -------------------------------------------------------------------------------- 1 | import client from './client'; 2 | import {Comment} from './types'; 3 | 4 | export async function getComments(articleId: number) { 5 | const response = await client.get( 6 | `/articles/${articleId}/comments`, 7 | ); 8 | return response.data; 9 | } 10 | 11 | export async function writeComment(params: { 12 | articleId: number; 13 | message: string; 14 | }) { 15 | const {articleId, message} = params; 16 | const response = await client.post( 17 | `/articles/${articleId}/comments`, 18 | {message}, 19 | ); 20 | return response.data; 21 | } 22 | 23 | export async function modifyComment(params: { 24 | articleId: number; 25 | message: string; 26 | id: number; 27 | }) { 28 | const {articleId, message, id} = params; 29 | const response = await client.put( 30 | `/articles/${articleId}/comments/${id}`, 31 | {message}, 32 | ); 33 | return response.data; 34 | } 35 | 36 | export async function deleteComment(params: {articleId: number; id: number}) { 37 | const {articleId, id} = params; 38 | await client.delete(`/articles/${articleId}/comments/${id}`); 39 | return null; 40 | } 41 | -------------------------------------------------------------------------------- /api/types.ts: -------------------------------------------------------------------------------- 1 | import {AxiosError} from 'axios'; 2 | 3 | export interface User { 4 | id: number; 5 | username: string; 6 | email: string; 7 | provider: string; 8 | confirmed: boolean; 9 | blocked: null | boolean; 10 | role: number; 11 | created_at: string; 12 | updated_at: string; 13 | } 14 | 15 | export interface Article { 16 | id: number; 17 | title: string; 18 | body: string; 19 | user: User; 20 | published_at: string; 21 | created_at: string; 22 | updated_at: string; 23 | } 24 | 25 | export interface Comment { 26 | id: number; 27 | message: string; 28 | user: User; 29 | published_at: string; 30 | created_at: string; 31 | updated_at: string; 32 | } 33 | 34 | export interface AuthResult { 35 | jwt: string; 36 | user: User; 37 | } 38 | 39 | type AuthErrorData = { 40 | messages: { 41 | id: string; 42 | message: string; 43 | }[]; 44 | }[]; 45 | 46 | export type AuthError = AxiosError<{ 47 | statusCode: number; 48 | error: string; 49 | message: AuthErrorData; 50 | data: AuthErrorData; 51 | }>; 52 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ArticlesApp", 3 | "displayName": "ArticlesApp" 4 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /components/ArticleActionButtons.tsx: -------------------------------------------------------------------------------- 1 | import {useNavigation} from '@react-navigation/core'; 2 | import React, {useState} from 'react'; 3 | import {View, StyleSheet, Pressable, Text} from 'react-native'; 4 | import {RootStackNavigationProp} from '../screens/types'; 5 | import AskDialog from './AskDialog'; 6 | import {InfiniteData, useMutation, useQueryClient} from 'react-query'; 7 | import {deleteArticle} from '../api/articles'; 8 | import {Article} from '../api/types'; 9 | 10 | export interface ArticleActionButtonsProps { 11 | articleId: number; 12 | } 13 | 14 | function ArticleActionButtons({articleId}: ArticleActionButtonsProps) { 15 | const [askRemove, setAskRemove] = useState(false); 16 | 17 | const navigation = useNavigation(); 18 | const queryClient = useQueryClient(); 19 | 20 | const {mutate} = useMutation(deleteArticle, { 21 | onSuccess: () => { 22 | navigation.goBack(); 23 | queryClient.setQueryData>('articles', data => { 24 | if (!data) { 25 | return {pageParams: [], pages: []}; 26 | } 27 | 28 | return { 29 | pageParams: data!.pageParams, 30 | pages: data!.pages.map(page => 31 | page.find(a => a.id === articleId) // 우리가 수정할 항목이 있는 페이지를 찾고 32 | ? page.filter(a => a.id !== articleId) // articleId와 일치하는것은 제외 33 | : page, 34 | ), 35 | }; 36 | }); 37 | }, 38 | }); 39 | 40 | const onPressModify = () => { 41 | navigation.navigate('Write', {articleId}); 42 | }; 43 | const onPressRemove = () => { 44 | setAskRemove(true); 45 | }; 46 | const onCancelRemove = () => { 47 | setAskRemove(false); 48 | }; 49 | const onConfirmRemove = () => { 50 | setAskRemove(false); 51 | mutate(articleId); 52 | }; 53 | 54 | return ( 55 | 56 | pressed && styles.pressed} 58 | onPress={onPressModify}> 59 | 수정 60 | 61 | 62 | pressed && styles.pressed}> 65 | 삭제 66 | 67 | 76 | 77 | ); 78 | } 79 | 80 | const styles = StyleSheet.create({ 81 | block: { 82 | marginTop: -16, 83 | paddingVertical: 12, 84 | flexDirection: 'row', 85 | justifyContent: 'flex-end', 86 | }, 87 | separator: { 88 | width: 8, 89 | }, 90 | buttonText: { 91 | color: '#2196f3', 92 | fontSize: 14, 93 | }, 94 | pressed: { 95 | opacity: 0.75, 96 | }, 97 | }); 98 | 99 | export default ArticleActionButtons; 100 | -------------------------------------------------------------------------------- /components/ArticleItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, Pressable, Text, View, Platform} from 'react-native'; 3 | import {useNavigation} from '@react-navigation/core'; 4 | import {MainTabNavigationProp} from '../screens/types'; 5 | 6 | export interface ArticleItemProps { 7 | id: number; 8 | title: string; 9 | publishedAt: string; 10 | username: string; 11 | } 12 | 13 | function ArticleItem({id, title, publishedAt, username}: ArticleItemProps) { 14 | const navigation = useNavigation(); 15 | const onPress = () => { 16 | navigation.navigate('Article', { 17 | id, 18 | }); 19 | }; 20 | 21 | const formattedDate = new Date(publishedAt).toLocaleString(); 22 | 23 | return ( 24 | [ 26 | styles.block, 27 | Platform.OS === 'ios' && pressed && styles.pressed, 28 | ]} 29 | onPress={onPress} 30 | android_ripple={{color: '#eeeeee'}}> 31 | {title} 32 | 33 | {username} 34 | {formattedDate} 35 | 36 | 37 | ); 38 | } 39 | 40 | const styles = StyleSheet.create({ 41 | block: { 42 | paddingVertical: 16, 43 | paddingHorizontal: 12, 44 | backgroundColor: 'white', 45 | }, 46 | pressed: { 47 | backgroundColor: '#eeeeee', 48 | }, 49 | title: { 50 | fontSize: 14, 51 | fontWeight: 'bold', 52 | }, 53 | footer: { 54 | marginTop: 16, 55 | }, 56 | smallText: { 57 | fontSize: 10, 58 | color: '#546e7a', 59 | }, 60 | }); 61 | 62 | export default ArticleItem; 63 | -------------------------------------------------------------------------------- /components/ArticleView.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, StyleSheet, Text} from 'react-native'; 3 | import ArticleActionButtons from './ArticleActionButtons'; 4 | 5 | export interface ArticleViewProps { 6 | title: string; 7 | body: string; 8 | publishedAt: string; 9 | username: string; 10 | id: number; 11 | isMyArticle: boolean; 12 | } 13 | 14 | function ArticleView({ 15 | title, 16 | body, 17 | publishedAt, 18 | username, 19 | id, 20 | isMyArticle, 21 | }: ArticleViewProps) { 22 | const formattedDate = new Date(publishedAt).toLocaleString(); 23 | 24 | return ( 25 | 26 | {title} 27 | {username} 28 | {formattedDate} 29 | 30 | {isMyArticle && } 31 | {body} 32 | 33 | ); 34 | } 35 | 36 | const styles = StyleSheet.create({ 37 | block: { 38 | paddingTop: 24, 39 | paddingBottom: 64, 40 | borderBottomColor: '#eeeeee', 41 | borderBottomWidth: 1, 42 | marginBottom: 16, 43 | }, 44 | title: { 45 | fontSize: 16, 46 | fontWeight: 'bold', 47 | }, 48 | username: { 49 | fontSize: 12, 50 | marginTop: 16, 51 | fontWeight: 'bold', 52 | }, 53 | date: { 54 | marginTop: 4, 55 | fontSize: 12, 56 | color: '#546e7a', 57 | }, 58 | separator: { 59 | marginTop: 24, 60 | marginBottom: 24, 61 | height: 1, 62 | backgroundColor: '#eeeeee', 63 | }, 64 | }); 65 | 66 | export default ArticleView; 67 | -------------------------------------------------------------------------------- /components/Articles.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | View, 4 | StyleSheet, 5 | FlatList, 6 | ActivityIndicator, 7 | RefreshControl, 8 | } from 'react-native'; 9 | import {Article} from '../api/types'; 10 | import ArticleItem from './ArticleItem'; 11 | import WriteButton from './WriteButton'; 12 | 13 | export interface ArticlesProps { 14 | articles: Article[]; 15 | showWriteButton?: boolean; 16 | isFetchingNextPage: boolean; 17 | fetchNextPage(): void; 18 | refresh(): void; 19 | isRefreshing: boolean; 20 | } 21 | 22 | function Articles({ 23 | articles, 24 | showWriteButton, 25 | isFetchingNextPage, 26 | fetchNextPage, 27 | refresh, 28 | isRefreshing, 29 | }: ArticlesProps) { 30 | // TODO: renderItem 구현 예정 31 | return ( 32 | ( 35 | 41 | )} 42 | keyExtractor={item => item.id.toString()} 43 | style={styles.list} 44 | ItemSeparatorComponent={() => } 45 | ListHeaderComponent={() => (showWriteButton ? : null)} 46 | ListFooterComponent={() => ( 47 | <> 48 | {articles.length > 0 ? : null} 49 | {isFetchingNextPage && ( 50 | 55 | )} 56 | 57 | )} 58 | onEndReachedThreshold={0.5} 59 | onEndReached={fetchNextPage} 60 | refreshControl={ 61 | 62 | } 63 | /> 64 | ); 65 | } 66 | 67 | const styles = StyleSheet.create({ 68 | list: { 69 | flex: 1, 70 | }, 71 | separator: { 72 | width: '100%', 73 | height: 1, 74 | backgroundColor: '#cfd8dc', 75 | }, 76 | spinner: { 77 | backgroundColor: 'white', 78 | paddingTop: 32, 79 | paddingBottom: 32, 80 | }, 81 | }); 82 | 83 | export default Articles; 84 | -------------------------------------------------------------------------------- /components/AskDialog.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, StyleSheet, Modal, Text, Pressable} from 'react-native'; 3 | 4 | export interface AskDialogProps { 5 | visible: boolean; 6 | title: string; 7 | message: string; 8 | confirmText: string; 9 | cancelText?: string; 10 | isDestructive?: boolean; 11 | onClose(): void; 12 | onConfirm(): void; 13 | } 14 | 15 | function AskDialog({ 16 | visible, 17 | title, 18 | message, 19 | confirmText, 20 | cancelText = '취소', 21 | isDestructive, 22 | onConfirm, 23 | onClose, 24 | }: AskDialogProps) { 25 | return ( 26 | 27 | 28 | 29 | {title} 30 | {message} 31 | 32 | pressed && styles.pressed} 34 | hitSlop={8} 35 | onPress={onClose}> 36 | 37 | {cancelText} 38 | 39 | 40 | 41 | pressed && styles.pressed} 43 | hitSlop={8} 44 | onPress={onConfirm}> 45 | 51 | {confirmText} 52 | 53 | 54 | 55 | 56 | 57 | 58 | ); 59 | } 60 | 61 | const styles = StyleSheet.create({ 62 | block: { 63 | flex: 1, 64 | backgroundColor: 'rgba(0,0,0,0.5)', 65 | alignItems: 'center', 66 | justifyContent: 'center', 67 | }, 68 | whiteBox: { 69 | borderRadius: 4, 70 | width: 320, 71 | paddingVertical: 24, 72 | paddingHorizontal: 24, 73 | backgroundColor: 'white', 74 | }, 75 | title: { 76 | fontSize: 18, 77 | fontWeight: 'bold', 78 | }, 79 | message: { 80 | marginTop: 16, 81 | marginBottom: 32, 82 | }, 83 | buttons: { 84 | flexDirection: 'row', 85 | justifyContent: 'flex-end', 86 | }, 87 | buttonText: { 88 | fontSize: 12, 89 | }, 90 | cancelText: { 91 | color: '#454545', 92 | }, 93 | confirmText: { 94 | fontWeight: 'bold', 95 | color: '#2196f3', 96 | }, 97 | destructive: { 98 | color: '#f44336', 99 | }, 100 | pressed: { 101 | opacity: 0.75, 102 | }, 103 | separator: { 104 | width: 16, 105 | }, 106 | }); 107 | 108 | export default AskDialog; 109 | -------------------------------------------------------------------------------- /components/AuthForm.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import { 3 | View, 4 | StyleSheet, 5 | Pressable, 6 | Platform, 7 | Text, 8 | TextInput, 9 | KeyboardAvoidingView, 10 | ActivityIndicator, 11 | } from 'react-native'; 12 | import useLogin from '../hooks/useLogin'; 13 | import useRegister from '../hooks/useRegister'; 14 | 15 | export interface AuthFormProps { 16 | isRegister?: boolean; 17 | } 18 | 19 | function AuthForm({isRegister}: AuthFormProps) { 20 | const [email, setEmail] = useState(''); 21 | const [username, setUsername] = useState(''); 22 | const [identifier, setIdentifier] = useState(''); 23 | const [password, setPassword] = useState(''); 24 | 25 | const {mutate: login, isLoading: loginLoading} = useLogin(); 26 | const {mutate: register, isLoading: registerLoading} = useRegister(); 27 | 28 | const isLoading = loginLoading || registerLoading; 29 | 30 | const onPress = () => { 31 | if (isLoading) { 32 | return; 33 | } 34 | 35 | if (isRegister) { 36 | register({ 37 | email, 38 | username, 39 | password, 40 | }); 41 | } else { 42 | login({ 43 | identifier, 44 | password, 45 | }); 46 | } 47 | }; 48 | 49 | return ( 50 | 53 | 54 | 55 | {isRegister ? ( 56 | <> 57 | 65 | 72 | 73 | ) : ( 74 | 81 | )} 82 | 89 | [ 91 | styles.submit, 92 | Platform.OS === 'ios' && pressed && styles.submitPressed, 93 | ]} 94 | android_ripple={{color: '#42a5f5'}} 95 | onPress={onPress}> 96 | {isLoading ? ( 97 | 98 | ) : ( 99 | 100 | {isRegister ? '회원가입' : '로그인'} 101 | 102 | )} 103 | 104 | 105 | 106 | 107 | ); 108 | } 109 | 110 | const styles = StyleSheet.create({ 111 | block: { 112 | flex: 1, 113 | justifyContent: 'center', 114 | paddingHorizontal: 12, 115 | }, 116 | input: { 117 | backgroundColor: 'white', 118 | padding: 8, 119 | borderColor: '#dddddd', 120 | borderWidth: 1, 121 | marginBottom: 8, 122 | }, 123 | submit: { 124 | marginTop: 24, 125 | backgroundColor: '#2196f3', 126 | height: 56, 127 | borderRadius: 4, 128 | alignItems: 'center', 129 | justifyContent: 'center', 130 | }, 131 | submitPressed: { 132 | opacity: 0.75, 133 | }, 134 | submitText: { 135 | fontSize: 16, 136 | color: 'white', 137 | fontWeight: 'bold', 138 | }, 139 | }); 140 | 141 | export default AuthForm; 142 | -------------------------------------------------------------------------------- /components/CommentInput.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {StyleSheet, Text, Pressable} from 'react-native'; 3 | import {useMutation, useQueryClient} from 'react-query'; 4 | import {writeComment} from '../api/comments'; 5 | import {Comment} from '../api/types'; 6 | import CommentModal from './CommentModal'; 7 | 8 | export interface CommentInputProps { 9 | articleId: number; 10 | } 11 | 12 | function CommentInput({articleId}: CommentInputProps) { 13 | const [writingComment, setWritingComment] = useState(false); 14 | 15 | const queryClient = useQueryClient(); 16 | const {mutate} = useMutation(writeComment, { 17 | onSuccess: comment => { 18 | queryClient.setQueryData(['comments', articleId], comments => 19 | (comments || []).concat(comment), 20 | ); 21 | }, 22 | }); 23 | 24 | const onPress = () => { 25 | setWritingComment(true); 26 | }; 27 | const onClose = () => { 28 | setWritingComment(false); 29 | }; 30 | const onSubmit = (message: string) => { 31 | setWritingComment(false); 32 | mutate({ 33 | articleId, 34 | message, 35 | }); 36 | }; 37 | 38 | return ( 39 | <> 40 | 41 | 댓글을 입력하세요 42 | 43 | 48 | 49 | ); 50 | } 51 | 52 | const styles = StyleSheet.create({ 53 | block: { 54 | paddingHorizontal: 16, 55 | height: 48, 56 | justifyContent: 'center', 57 | borderWidth: 1, 58 | borderColor: '#cdcdcd', 59 | borderRadius: 4, 60 | marginTop: 8, 61 | marginBottom: 16, 62 | fontSize: 12, 63 | }, 64 | text: { 65 | fontSize: 12, 66 | color: '#898989', 67 | }, 68 | }); 69 | 70 | export default CommentInput; 71 | -------------------------------------------------------------------------------- /components/CommentItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View, StyleSheet, Text, Pressable} from 'react-native'; 3 | 4 | export interface CommentItemProps { 5 | id: number; 6 | message: string; 7 | username: string; 8 | publishedAt: string; 9 | isMyComment: boolean; 10 | onRemove(id: number): void; 11 | onModify(id: number): void; 12 | } 13 | 14 | function CommentItem({ 15 | id, 16 | message, 17 | username, 18 | publishedAt, 19 | isMyComment, 20 | onRemove, 21 | onModify, 22 | }: CommentItemProps) { 23 | const formattedDate = new Date(publishedAt).toDateString(); 24 | 25 | const handleRemove = () => onRemove(id); 26 | const handleModify = () => onModify(id); 27 | 28 | return ( 29 | 30 | 31 | {username} 32 | {formattedDate} 33 | 34 | {message} 35 | {isMyComment && ( 36 | 37 | pressed && styles.pressed} 39 | hitSlop={8} 40 | onPress={handleModify}> 41 | 수정 42 | 43 | 44 | pressed && styles.pressed} 46 | hitSlop={8} 47 | onPress={handleRemove}> 48 | 삭제 49 | 50 | 51 | )} 52 | 53 | ); 54 | } 55 | 56 | const styles = StyleSheet.create({ 57 | block: { 58 | paddingTop: 8, 59 | paddingBottom: 16, 60 | }, 61 | head: { 62 | flexDirection: 'row', 63 | justifyContent: 'space-between', 64 | }, 65 | username: { 66 | fontWeight: 'bold', 67 | }, 68 | date: { 69 | color: '#546e7a', 70 | fontSize: 10, 71 | marginTop: 4, 72 | }, 73 | message: { 74 | marginTop: 4, 75 | }, 76 | actionButtons: { 77 | marginTop: 24, 78 | justifyContent: 'flex-end', 79 | flexDirection: 'row', 80 | }, 81 | separator: { 82 | width: 8, 83 | }, 84 | buttonText: { 85 | fontSize: 12, 86 | color: '#546e7a', 87 | }, 88 | pressed: { 89 | opacity: 0.75, 90 | }, 91 | }); 92 | 93 | export default CommentItem; 94 | -------------------------------------------------------------------------------- /components/CommentModal.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react'; 2 | import { 3 | View, 4 | StyleSheet, 5 | Modal, 6 | KeyboardAvoidingView, 7 | Pressable, 8 | Platform, 9 | TextInput, 10 | } from 'react-native'; 11 | import {useSafeAreaInsets} from 'react-native-safe-area-context'; 12 | 13 | export interface CommentFormProps { 14 | visible: boolean; 15 | onClose(): void; 16 | onSubmit(message: string): void; 17 | initialMessage?: string; 18 | } 19 | 20 | function CommentModal({ 21 | visible, 22 | onClose, 23 | onSubmit, 24 | initialMessage, 25 | }: CommentFormProps) { 26 | const {bottom} = useSafeAreaInsets(); // Home 키 없는 iOS 기종 대응 27 | const [message, setMessage] = useState(''); 28 | 29 | // initialMessage가 변경되면 message 변경 30 | useEffect(() => { 31 | setMessage(initialMessage ?? ''); 32 | }, [initialMessage]); 33 | 34 | return ( 35 | 40 | 44 | 45 | 46 | 47 | { 54 | onSubmit(message); 55 | setMessage(''); 56 | }} 57 | placeholder="댓글을 입력하세요" 58 | /> 59 | 60 | 61 | 62 | 63 | ); 64 | } 65 | 66 | const styles = StyleSheet.create({ 67 | block: { 68 | backgroundColor: 'rgba(0,0,0,0.5)', 69 | width: '100%', 70 | flex: 1, 71 | }, 72 | dismissArea: { 73 | flex: 1, 74 | }, 75 | keyboardAvoiding: {flex: 1}, 76 | whiteBox: { 77 | backgroundColor: 'white', 78 | paddingTop: 24, 79 | paddingHorizontal: 16, 80 | }, 81 | input: { 82 | paddingLeft: 16, 83 | paddingRight: 16, 84 | height: 48, 85 | fontSize: 12, 86 | borderColor: '#ababab', 87 | borderWidth: 1, 88 | borderRadius: 4, 89 | }, 90 | }); 91 | 92 | export default CommentModal; 93 | -------------------------------------------------------------------------------- /components/MenuItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, Pressable, Text, Platform} from 'react-native'; 3 | 4 | export interface MenuItemProps { 5 | onPress(): void; 6 | name: string; 7 | } 8 | 9 | function MenuItem({name, onPress}: MenuItemProps) { 10 | return ( 11 | [ 13 | styles.block, 14 | Platform.OS === 'ios' && pressed && styles.pressed, 15 | ]} 16 | onPress={onPress} 17 | android_ripple={{color: '#eeeeee'}}> 18 | {name} 19 | 20 | ); 21 | } 22 | 23 | const styles = StyleSheet.create({ 24 | block: { 25 | paddingHorizontal: 12, 26 | paddingVertical: 16, 27 | backgroundColor: 'white', 28 | borderBottomColor: '#eeeeee', 29 | borderBottomWidth: 1, 30 | }, 31 | pressed: { 32 | backgroundColor: '#eeeeee', 33 | }, 34 | }); 35 | 36 | export default MenuItem; 37 | -------------------------------------------------------------------------------- /components/WriteButton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {StyleSheet, Pressable, Platform, Text} from 'react-native'; 3 | import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; 4 | import {useNavigation} from '@react-navigation/core'; 5 | import {RootStackNavigationProp} from '../screens/types'; 6 | 7 | function WriteButton() { 8 | const navigation = useNavigation(); 9 | 10 | const onPress = () => { 11 | navigation.navigate('Write', {}); 12 | }; 13 | 14 | return ( 15 | [ 17 | styles.button, 18 | Platform.OS === 'ios' && pressed && styles.pressed, 19 | ]} 20 | android_ripple={{color: '#eeeeee'}} 21 | onPress={onPress}> 22 | 23 | 새 게시글 작성 24 | 25 | ); 26 | } 27 | 28 | const styles = StyleSheet.create({ 29 | button: { 30 | backgroundColor: 'white', 31 | borderBottomColor: '#cfd8dc', 32 | borderBottomWidth: 1, 33 | paddingVertical: 16, 34 | paddingHorizontal: 12, 35 | justifyContent: 'center', 36 | alignItems: 'center', 37 | flexDirection: 'row', 38 | }, 39 | text: { 40 | marginLeft: 8, 41 | }, 42 | pressed: { 43 | backgroundColor: '#eeeeee', 44 | }, 45 | }); 46 | 47 | export default WriteButton; 48 | -------------------------------------------------------------------------------- /contexts/UserContext.tsx: -------------------------------------------------------------------------------- 1 | import React, {createContext, useContext, useState} from 'react'; 2 | import {User} from '../api/types'; 3 | 4 | // UserContext의 값은 [값, 업데이터 함수] 타입을 지닙니다. 5 | // useState를 통해 반환된 값을 그대로 UserContext에 담겠습니다. 6 | type UserContextState = [User | null, (user: User | null) => void]; 7 | 8 | const UserContext = createContext(null); 9 | 10 | export function UserContextProvider({children}: {children: React.ReactNode}) { 11 | const userState = useState(null); 12 | return ( 13 | {children} 14 | ); 15 | } 16 | 17 | // Context를 추후 더 편하게 사용할 수 있도록 만든 Hook 입니다. 18 | export function useUserState() { 19 | const userState = useContext(UserContext); 20 | if (!userState) { 21 | throw new Error('UserContext is not used'); 22 | } 23 | return userState; 24 | } 25 | -------------------------------------------------------------------------------- /hooks/useAuthLoadEffect.tsx: -------------------------------------------------------------------------------- 1 | import {useEffect} from 'react'; 2 | import {applyToken} from '../api/client'; 3 | import {useUserState} from '../contexts/UserContext'; 4 | import authStorage from '../storages/authStorage'; 5 | 6 | export default function useAuthLoadEffect() { 7 | const [, setUser] = useUserState(); 8 | 9 | useEffect(() => { 10 | const fn = async () => { 11 | const auth = await authStorage.get(); 12 | if (!auth) { 13 | return; 14 | } 15 | setUser(auth.user); 16 | applyToken(auth.jwt); 17 | }; 18 | fn(); 19 | }, [setUser]); 20 | } 21 | -------------------------------------------------------------------------------- /hooks/useInform.ts: -------------------------------------------------------------------------------- 1 | import {useCallback} from 'react'; 2 | import {Alert, Platform, ToastAndroid} from 'react-native'; 3 | 4 | export default function useInform() { 5 | const inform = useCallback(({title, message}: InformParams) => { 6 | if (Platform.OS === 'ios') { 7 | Alert.alert(title ?? '알림', message); 8 | } else { 9 | ToastAndroid.show(message, ToastAndroid.SHORT); 10 | } 11 | }, []); 12 | 13 | return inform; 14 | } 15 | 16 | interface InformParams { 17 | title?: string; 18 | message: string; 19 | } 20 | -------------------------------------------------------------------------------- /hooks/useLogin.ts: -------------------------------------------------------------------------------- 1 | import {useMutation} from 'react-query'; 2 | import {login} from '../api/auth'; 3 | import {AuthError} from '../api/types'; 4 | import {useNavigation} from '@react-navigation/core'; 5 | import {useUserState} from '../contexts/UserContext'; 6 | import {RootStackNavigationProp} from '../screens/types'; 7 | import {applyToken} from '../api/client'; 8 | import authStorage from '../storages/authStorage'; 9 | import useInform from './useInform'; 10 | 11 | export default function useLogin() { 12 | const [, setUser] = useUserState(); 13 | const navigation = useNavigation(); 14 | const inform = useInform(); 15 | 16 | const mutation = useMutation(login, { 17 | onSuccess: data => { 18 | setUser(data.user); 19 | navigation.pop(); 20 | applyToken(data.jwt); 21 | authStorage.set(data); 22 | }, 23 | onError: (error: AuthError) => { 24 | const message = 25 | error.response?.data?.data?.[0]?.messages[0].message ?? '로그인 실패'; 26 | inform({ 27 | title: '오류', 28 | message, 29 | }); 30 | }, 31 | }); 32 | return mutation; 33 | } 34 | -------------------------------------------------------------------------------- /hooks/useRegister.ts: -------------------------------------------------------------------------------- 1 | import {useMutation} from 'react-query'; 2 | import {register} from '../api/auth'; 3 | import {AuthError} from '../api/types'; 4 | import {useNavigation} from '@react-navigation/core'; 5 | import {useUserState} from '../contexts/UserContext'; 6 | import {RootStackNavigationProp} from '../screens/types'; 7 | import {applyToken} from '../api/client'; 8 | import authStorage from '../storages/authStorage'; 9 | import useInform from './useInform'; 10 | 11 | export default function useRegister() { 12 | const [, setUser] = useUserState(); 13 | const navigation = useNavigation(); 14 | const inform = useInform(); 15 | 16 | const mutation = useMutation(register, { 17 | onSuccess: data => { 18 | setUser(data.user); 19 | navigation.pop(); 20 | applyToken(data.jwt); 21 | authStorage.set(data); 22 | }, 23 | onError: (error: AuthError) => { 24 | console.log(error.response?.data); 25 | const message = 26 | error.response?.data?.data?.[0]?.messages[0].message ?? '회원가입 실패'; 27 | inform({ 28 | title: '오류', 29 | message, 30 | }); 31 | }, 32 | }); 33 | return mutation; 34 | } 35 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry, LogBox} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | LogBox.ignoreLogs(['Setting a timer']); 11 | -------------------------------------------------------------------------------- /ios/ArticlesApp.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 54; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 00E356F31AD99517003FC87E /* ArticlesAppTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* ArticlesAppTests.m */; }; 11 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; }; 12 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 13 | 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 14 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; 15 | BA41EB9D80E78867A1354589 /* libPods-ArticlesApp.a in Frameworks */ = {isa = PBXBuildFile; fileRef = C570741A50E8B61BD9AF7D95 /* libPods-ArticlesApp.a */; }; 16 | C423AC053B5324D95C682B84 /* libPods-ArticlesApp-ArticlesAppTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 732B83EC13C2E6D02A86467E /* libPods-ArticlesApp-ArticlesAppTests.a */; }; 17 | /* End PBXBuildFile section */ 18 | 19 | /* Begin PBXContainerItemProxy section */ 20 | 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { 21 | isa = PBXContainerItemProxy; 22 | containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; 23 | proxyType = 1; 24 | remoteGlobalIDString = 13B07F861A680F5B00A75B9A; 25 | remoteInfo = ArticlesApp; 26 | }; 27 | /* End PBXContainerItemProxy section */ 28 | 29 | /* Begin PBXFileReference section */ 30 | 00E356EE1AD99517003FC87E /* ArticlesAppTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = ArticlesAppTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 31 | 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 32 | 00E356F21AD99517003FC87E /* ArticlesAppTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ArticlesAppTests.m; sourceTree = ""; }; 33 | 13B07F961A680F5B00A75B9A /* ArticlesApp.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = ArticlesApp.app; sourceTree = BUILT_PRODUCTS_DIR; }; 34 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = ArticlesApp/AppDelegate.h; sourceTree = ""; }; 35 | 13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = ArticlesApp/AppDelegate.m; sourceTree = ""; }; 36 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = ArticlesApp/Images.xcassets; sourceTree = ""; }; 37 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = ArticlesApp/Info.plist; sourceTree = ""; }; 38 | 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = ArticlesApp/main.m; sourceTree = ""; }; 39 | 14B5C1E217787A38149393A6 /* Pods-ArticlesApp-ArticlesAppTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ArticlesApp-ArticlesAppTests.release.xcconfig"; path = "Target Support Files/Pods-ArticlesApp-ArticlesAppTests/Pods-ArticlesApp-ArticlesAppTests.release.xcconfig"; sourceTree = ""; }; 40 | 60E0582C5C20133E4DA43E0C /* Pods-ArticlesApp.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ArticlesApp.release.xcconfig"; path = "Target Support Files/Pods-ArticlesApp/Pods-ArticlesApp.release.xcconfig"; sourceTree = ""; }; 41 | 732B83EC13C2E6D02A86467E /* libPods-ArticlesApp-ArticlesAppTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-ArticlesApp-ArticlesAppTests.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 42 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = ArticlesApp/LaunchScreen.storyboard; sourceTree = ""; }; 43 | A9D2C46926464D1561FCB661 /* Pods-ArticlesApp.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ArticlesApp.debug.xcconfig"; path = "Target Support Files/Pods-ArticlesApp/Pods-ArticlesApp.debug.xcconfig"; sourceTree = ""; }; 44 | C570741A50E8B61BD9AF7D95 /* libPods-ArticlesApp.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-ArticlesApp.a"; sourceTree = BUILT_PRODUCTS_DIR; }; 45 | DE51983675102FAF07B1F6E8 /* Pods-ArticlesApp-ArticlesAppTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ArticlesApp-ArticlesAppTests.debug.xcconfig"; path = "Target Support Files/Pods-ArticlesApp-ArticlesAppTests/Pods-ArticlesApp-ArticlesAppTests.debug.xcconfig"; sourceTree = ""; }; 46 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; 47 | /* End PBXFileReference section */ 48 | 49 | /* Begin PBXFrameworksBuildPhase section */ 50 | 00E356EB1AD99517003FC87E /* Frameworks */ = { 51 | isa = PBXFrameworksBuildPhase; 52 | buildActionMask = 2147483647; 53 | files = ( 54 | C423AC053B5324D95C682B84 /* libPods-ArticlesApp-ArticlesAppTests.a in Frameworks */, 55 | ); 56 | runOnlyForDeploymentPostprocessing = 0; 57 | }; 58 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 59 | isa = PBXFrameworksBuildPhase; 60 | buildActionMask = 2147483647; 61 | files = ( 62 | BA41EB9D80E78867A1354589 /* libPods-ArticlesApp.a in Frameworks */, 63 | ); 64 | runOnlyForDeploymentPostprocessing = 0; 65 | }; 66 | /* End PBXFrameworksBuildPhase section */ 67 | 68 | /* Begin PBXGroup section */ 69 | 00E356EF1AD99517003FC87E /* ArticlesAppTests */ = { 70 | isa = PBXGroup; 71 | children = ( 72 | 00E356F21AD99517003FC87E /* ArticlesAppTests.m */, 73 | 00E356F01AD99517003FC87E /* Supporting Files */, 74 | ); 75 | path = ArticlesAppTests; 76 | sourceTree = ""; 77 | }; 78 | 00E356F01AD99517003FC87E /* Supporting Files */ = { 79 | isa = PBXGroup; 80 | children = ( 81 | 00E356F11AD99517003FC87E /* Info.plist */, 82 | ); 83 | name = "Supporting Files"; 84 | sourceTree = ""; 85 | }; 86 | 13B07FAE1A68108700A75B9A /* ArticlesApp */ = { 87 | isa = PBXGroup; 88 | children = ( 89 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 90 | 13B07FB01A68108700A75B9A /* AppDelegate.m */, 91 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 92 | 13B07FB61A68108700A75B9A /* Info.plist */, 93 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */, 94 | 13B07FB71A68108700A75B9A /* main.m */, 95 | ); 96 | name = ArticlesApp; 97 | sourceTree = ""; 98 | }; 99 | 2D16E6871FA4F8E400B85C8A /* Frameworks */ = { 100 | isa = PBXGroup; 101 | children = ( 102 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */, 103 | C570741A50E8B61BD9AF7D95 /* libPods-ArticlesApp.a */, 104 | 732B83EC13C2E6D02A86467E /* libPods-ArticlesApp-ArticlesAppTests.a */, 105 | ); 106 | name = Frameworks; 107 | sourceTree = ""; 108 | }; 109 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 110 | isa = PBXGroup; 111 | children = ( 112 | ); 113 | name = Libraries; 114 | sourceTree = ""; 115 | }; 116 | 83CBB9F61A601CBA00E9B192 = { 117 | isa = PBXGroup; 118 | children = ( 119 | 13B07FAE1A68108700A75B9A /* ArticlesApp */, 120 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 121 | 00E356EF1AD99517003FC87E /* ArticlesAppTests */, 122 | 83CBBA001A601CBA00E9B192 /* Products */, 123 | 2D16E6871FA4F8E400B85C8A /* Frameworks */, 124 | E3FC2BAF5F3AC61FD423A479 /* Pods */, 125 | ); 126 | indentWidth = 2; 127 | sourceTree = ""; 128 | tabWidth = 2; 129 | usesTabs = 0; 130 | }; 131 | 83CBBA001A601CBA00E9B192 /* Products */ = { 132 | isa = PBXGroup; 133 | children = ( 134 | 13B07F961A680F5B00A75B9A /* ArticlesApp.app */, 135 | 00E356EE1AD99517003FC87E /* ArticlesAppTests.xctest */, 136 | ); 137 | name = Products; 138 | sourceTree = ""; 139 | }; 140 | E3FC2BAF5F3AC61FD423A479 /* Pods */ = { 141 | isa = PBXGroup; 142 | children = ( 143 | A9D2C46926464D1561FCB661 /* Pods-ArticlesApp.debug.xcconfig */, 144 | 60E0582C5C20133E4DA43E0C /* Pods-ArticlesApp.release.xcconfig */, 145 | DE51983675102FAF07B1F6E8 /* Pods-ArticlesApp-ArticlesAppTests.debug.xcconfig */, 146 | 14B5C1E217787A38149393A6 /* Pods-ArticlesApp-ArticlesAppTests.release.xcconfig */, 147 | ); 148 | name = Pods; 149 | path = Pods; 150 | sourceTree = ""; 151 | }; 152 | /* End PBXGroup section */ 153 | 154 | /* Begin PBXNativeTarget section */ 155 | 00E356ED1AD99517003FC87E /* ArticlesAppTests */ = { 156 | isa = PBXNativeTarget; 157 | buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "ArticlesAppTests" */; 158 | buildPhases = ( 159 | 48671DD6923870268084B0F5 /* [CP] Check Pods Manifest.lock */, 160 | 00E356EA1AD99517003FC87E /* Sources */, 161 | 00E356EB1AD99517003FC87E /* Frameworks */, 162 | 00E356EC1AD99517003FC87E /* Resources */, 163 | 9181257AA66B8D3E8689769B /* [CP] Embed Pods Frameworks */, 164 | D9DED4D86FB4D3BC049E2654 /* [CP] Copy Pods Resources */, 165 | ); 166 | buildRules = ( 167 | ); 168 | dependencies = ( 169 | 00E356F51AD99517003FC87E /* PBXTargetDependency */, 170 | ); 171 | name = ArticlesAppTests; 172 | productName = ArticlesAppTests; 173 | productReference = 00E356EE1AD99517003FC87E /* ArticlesAppTests.xctest */; 174 | productType = "com.apple.product-type.bundle.unit-test"; 175 | }; 176 | 13B07F861A680F5B00A75B9A /* ArticlesApp */ = { 177 | isa = PBXNativeTarget; 178 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "ArticlesApp" */; 179 | buildPhases = ( 180 | 835A9103AF16D729B26E42E1 /* [CP] Check Pods Manifest.lock */, 181 | FD10A7F022414F080027D42C /* Start Packager */, 182 | 13B07F871A680F5B00A75B9A /* Sources */, 183 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 184 | 13B07F8E1A680F5B00A75B9A /* Resources */, 185 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 186 | 0C5C08E4C6EAB531F79E9511 /* [CP] Embed Pods Frameworks */, 187 | D3030B6845EE220403FFF853 /* [CP] Copy Pods Resources */, 188 | ); 189 | buildRules = ( 190 | ); 191 | dependencies = ( 192 | ); 193 | name = ArticlesApp; 194 | productName = ArticlesApp; 195 | productReference = 13B07F961A680F5B00A75B9A /* ArticlesApp.app */; 196 | productType = "com.apple.product-type.application"; 197 | }; 198 | /* End PBXNativeTarget section */ 199 | 200 | /* Begin PBXProject section */ 201 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 202 | isa = PBXProject; 203 | attributes = { 204 | LastUpgradeCheck = 1210; 205 | TargetAttributes = { 206 | 00E356ED1AD99517003FC87E = { 207 | CreatedOnToolsVersion = 6.2; 208 | TestTargetID = 13B07F861A680F5B00A75B9A; 209 | }; 210 | 13B07F861A680F5B00A75B9A = { 211 | LastSwiftMigration = 1120; 212 | }; 213 | }; 214 | }; 215 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "ArticlesApp" */; 216 | compatibilityVersion = "Xcode 12.0"; 217 | developmentRegion = en; 218 | hasScannedForEncodings = 0; 219 | knownRegions = ( 220 | en, 221 | Base, 222 | ); 223 | mainGroup = 83CBB9F61A601CBA00E9B192; 224 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 225 | projectDirPath = ""; 226 | projectRoot = ""; 227 | targets = ( 228 | 13B07F861A680F5B00A75B9A /* ArticlesApp */, 229 | 00E356ED1AD99517003FC87E /* ArticlesAppTests */, 230 | ); 231 | }; 232 | /* End PBXProject section */ 233 | 234 | /* Begin PBXResourcesBuildPhase section */ 235 | 00E356EC1AD99517003FC87E /* Resources */ = { 236 | isa = PBXResourcesBuildPhase; 237 | buildActionMask = 2147483647; 238 | files = ( 239 | ); 240 | runOnlyForDeploymentPostprocessing = 0; 241 | }; 242 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 243 | isa = PBXResourcesBuildPhase; 244 | buildActionMask = 2147483647; 245 | files = ( 246 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */, 247 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 248 | ); 249 | runOnlyForDeploymentPostprocessing = 0; 250 | }; 251 | /* End PBXResourcesBuildPhase section */ 252 | 253 | /* Begin PBXShellScriptBuildPhase section */ 254 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { 255 | isa = PBXShellScriptBuildPhase; 256 | buildActionMask = 2147483647; 257 | files = ( 258 | ); 259 | inputPaths = ( 260 | ); 261 | name = "Bundle React Native code and images"; 262 | outputPaths = ( 263 | ); 264 | runOnlyForDeploymentPostprocessing = 0; 265 | shellPath = /bin/sh; 266 | shellScript = "set -e\n\nexport NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n"; 267 | }; 268 | 0C5C08E4C6EAB531F79E9511 /* [CP] Embed Pods Frameworks */ = { 269 | isa = PBXShellScriptBuildPhase; 270 | buildActionMask = 2147483647; 271 | files = ( 272 | ); 273 | inputFileListPaths = ( 274 | "${PODS_ROOT}/Target Support Files/Pods-ArticlesApp/Pods-ArticlesApp-frameworks-${CONFIGURATION}-input-files.xcfilelist", 275 | ); 276 | name = "[CP] Embed Pods Frameworks"; 277 | outputFileListPaths = ( 278 | "${PODS_ROOT}/Target Support Files/Pods-ArticlesApp/Pods-ArticlesApp-frameworks-${CONFIGURATION}-output-files.xcfilelist", 279 | ); 280 | runOnlyForDeploymentPostprocessing = 0; 281 | shellPath = /bin/sh; 282 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ArticlesApp/Pods-ArticlesApp-frameworks.sh\"\n"; 283 | showEnvVarsInLog = 0; 284 | }; 285 | 48671DD6923870268084B0F5 /* [CP] Check Pods Manifest.lock */ = { 286 | isa = PBXShellScriptBuildPhase; 287 | buildActionMask = 2147483647; 288 | files = ( 289 | ); 290 | inputFileListPaths = ( 291 | ); 292 | inputPaths = ( 293 | "${PODS_PODFILE_DIR_PATH}/Podfile.lock", 294 | "${PODS_ROOT}/Manifest.lock", 295 | ); 296 | name = "[CP] Check Pods Manifest.lock"; 297 | outputFileListPaths = ( 298 | ); 299 | outputPaths = ( 300 | "$(DERIVED_FILE_DIR)/Pods-ArticlesApp-ArticlesAppTests-checkManifestLockResult.txt", 301 | ); 302 | runOnlyForDeploymentPostprocessing = 0; 303 | shellPath = /bin/sh; 304 | shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; 305 | showEnvVarsInLog = 0; 306 | }; 307 | 835A9103AF16D729B26E42E1 /* [CP] Check Pods Manifest.lock */ = { 308 | isa = PBXShellScriptBuildPhase; 309 | buildActionMask = 2147483647; 310 | files = ( 311 | ); 312 | inputFileListPaths = ( 313 | ); 314 | inputPaths = ( 315 | "${PODS_PODFILE_DIR_PATH}/Podfile.lock", 316 | "${PODS_ROOT}/Manifest.lock", 317 | ); 318 | name = "[CP] Check Pods Manifest.lock"; 319 | outputFileListPaths = ( 320 | ); 321 | outputPaths = ( 322 | "$(DERIVED_FILE_DIR)/Pods-ArticlesApp-checkManifestLockResult.txt", 323 | ); 324 | runOnlyForDeploymentPostprocessing = 0; 325 | shellPath = /bin/sh; 326 | shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; 327 | showEnvVarsInLog = 0; 328 | }; 329 | 9181257AA66B8D3E8689769B /* [CP] Embed Pods Frameworks */ = { 330 | isa = PBXShellScriptBuildPhase; 331 | buildActionMask = 2147483647; 332 | files = ( 333 | ); 334 | inputFileListPaths = ( 335 | "${PODS_ROOT}/Target Support Files/Pods-ArticlesApp-ArticlesAppTests/Pods-ArticlesApp-ArticlesAppTests-frameworks-${CONFIGURATION}-input-files.xcfilelist", 336 | ); 337 | name = "[CP] Embed Pods Frameworks"; 338 | outputFileListPaths = ( 339 | "${PODS_ROOT}/Target Support Files/Pods-ArticlesApp-ArticlesAppTests/Pods-ArticlesApp-ArticlesAppTests-frameworks-${CONFIGURATION}-output-files.xcfilelist", 340 | ); 341 | runOnlyForDeploymentPostprocessing = 0; 342 | shellPath = /bin/sh; 343 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ArticlesApp-ArticlesAppTests/Pods-ArticlesApp-ArticlesAppTests-frameworks.sh\"\n"; 344 | showEnvVarsInLog = 0; 345 | }; 346 | D3030B6845EE220403FFF853 /* [CP] Copy Pods Resources */ = { 347 | isa = PBXShellScriptBuildPhase; 348 | buildActionMask = 2147483647; 349 | files = ( 350 | ); 351 | inputFileListPaths = ( 352 | "${PODS_ROOT}/Target Support Files/Pods-ArticlesApp/Pods-ArticlesApp-resources-${CONFIGURATION}-input-files.xcfilelist", 353 | ); 354 | name = "[CP] Copy Pods Resources"; 355 | outputFileListPaths = ( 356 | "${PODS_ROOT}/Target Support Files/Pods-ArticlesApp/Pods-ArticlesApp-resources-${CONFIGURATION}-output-files.xcfilelist", 357 | ); 358 | runOnlyForDeploymentPostprocessing = 0; 359 | shellPath = /bin/sh; 360 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ArticlesApp/Pods-ArticlesApp-resources.sh\"\n"; 361 | showEnvVarsInLog = 0; 362 | }; 363 | D9DED4D86FB4D3BC049E2654 /* [CP] Copy Pods Resources */ = { 364 | isa = PBXShellScriptBuildPhase; 365 | buildActionMask = 2147483647; 366 | files = ( 367 | ); 368 | inputFileListPaths = ( 369 | "${PODS_ROOT}/Target Support Files/Pods-ArticlesApp-ArticlesAppTests/Pods-ArticlesApp-ArticlesAppTests-resources-${CONFIGURATION}-input-files.xcfilelist", 370 | ); 371 | name = "[CP] Copy Pods Resources"; 372 | outputFileListPaths = ( 373 | "${PODS_ROOT}/Target Support Files/Pods-ArticlesApp-ArticlesAppTests/Pods-ArticlesApp-ArticlesAppTests-resources-${CONFIGURATION}-output-files.xcfilelist", 374 | ); 375 | runOnlyForDeploymentPostprocessing = 0; 376 | shellPath = /bin/sh; 377 | shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ArticlesApp-ArticlesAppTests/Pods-ArticlesApp-ArticlesAppTests-resources.sh\"\n"; 378 | showEnvVarsInLog = 0; 379 | }; 380 | FD10A7F022414F080027D42C /* Start Packager */ = { 381 | isa = PBXShellScriptBuildPhase; 382 | buildActionMask = 2147483647; 383 | files = ( 384 | ); 385 | inputFileListPaths = ( 386 | ); 387 | inputPaths = ( 388 | ); 389 | name = "Start Packager"; 390 | outputFileListPaths = ( 391 | ); 392 | outputPaths = ( 393 | ); 394 | runOnlyForDeploymentPostprocessing = 0; 395 | shellPath = /bin/sh; 396 | shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 2\n fi\n else\n open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n"; 397 | showEnvVarsInLog = 0; 398 | }; 399 | /* End PBXShellScriptBuildPhase section */ 400 | 401 | /* Begin PBXSourcesBuildPhase section */ 402 | 00E356EA1AD99517003FC87E /* Sources */ = { 403 | isa = PBXSourcesBuildPhase; 404 | buildActionMask = 2147483647; 405 | files = ( 406 | 00E356F31AD99517003FC87E /* ArticlesAppTests.m in Sources */, 407 | ); 408 | runOnlyForDeploymentPostprocessing = 0; 409 | }; 410 | 13B07F871A680F5B00A75B9A /* Sources */ = { 411 | isa = PBXSourcesBuildPhase; 412 | buildActionMask = 2147483647; 413 | files = ( 414 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */, 415 | 13B07FC11A68108700A75B9A /* main.m in Sources */, 416 | ); 417 | runOnlyForDeploymentPostprocessing = 0; 418 | }; 419 | /* End PBXSourcesBuildPhase section */ 420 | 421 | /* Begin PBXTargetDependency section */ 422 | 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { 423 | isa = PBXTargetDependency; 424 | target = 13B07F861A680F5B00A75B9A /* ArticlesApp */; 425 | targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; 426 | }; 427 | /* End PBXTargetDependency section */ 428 | 429 | /* Begin XCBuildConfiguration section */ 430 | 00E356F61AD99517003FC87E /* Debug */ = { 431 | isa = XCBuildConfiguration; 432 | baseConfigurationReference = DE51983675102FAF07B1F6E8 /* Pods-ArticlesApp-ArticlesAppTests.debug.xcconfig */; 433 | buildSettings = { 434 | BUNDLE_LOADER = "$(TEST_HOST)"; 435 | GCC_PREPROCESSOR_DEFINITIONS = ( 436 | "DEBUG=1", 437 | "$(inherited)", 438 | ); 439 | INFOPLIST_FILE = ArticlesAppTests/Info.plist; 440 | IPHONEOS_DEPLOYMENT_TARGET = 10.0; 441 | LD_RUNPATH_SEARCH_PATHS = ( 442 | "$(inherited)", 443 | "@executable_path/Frameworks", 444 | "@loader_path/Frameworks", 445 | ); 446 | OTHER_LDFLAGS = ( 447 | "-ObjC", 448 | "-lc++", 449 | "$(inherited)", 450 | ); 451 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 452 | PRODUCT_NAME = "$(TARGET_NAME)"; 453 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/ArticlesApp.app/ArticlesApp"; 454 | }; 455 | name = Debug; 456 | }; 457 | 00E356F71AD99517003FC87E /* Release */ = { 458 | isa = XCBuildConfiguration; 459 | baseConfigurationReference = 14B5C1E217787A38149393A6 /* Pods-ArticlesApp-ArticlesAppTests.release.xcconfig */; 460 | buildSettings = { 461 | BUNDLE_LOADER = "$(TEST_HOST)"; 462 | COPY_PHASE_STRIP = NO; 463 | INFOPLIST_FILE = ArticlesAppTests/Info.plist; 464 | IPHONEOS_DEPLOYMENT_TARGET = 10.0; 465 | LD_RUNPATH_SEARCH_PATHS = ( 466 | "$(inherited)", 467 | "@executable_path/Frameworks", 468 | "@loader_path/Frameworks", 469 | ); 470 | OTHER_LDFLAGS = ( 471 | "-ObjC", 472 | "-lc++", 473 | "$(inherited)", 474 | ); 475 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 476 | PRODUCT_NAME = "$(TARGET_NAME)"; 477 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/ArticlesApp.app/ArticlesApp"; 478 | }; 479 | name = Release; 480 | }; 481 | 13B07F941A680F5B00A75B9A /* Debug */ = { 482 | isa = XCBuildConfiguration; 483 | baseConfigurationReference = A9D2C46926464D1561FCB661 /* Pods-ArticlesApp.debug.xcconfig */; 484 | buildSettings = { 485 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 486 | CLANG_ENABLE_MODULES = YES; 487 | CURRENT_PROJECT_VERSION = 1; 488 | ENABLE_BITCODE = NO; 489 | INFOPLIST_FILE = ArticlesApp/Info.plist; 490 | LD_RUNPATH_SEARCH_PATHS = ( 491 | "$(inherited)", 492 | "@executable_path/Frameworks", 493 | ); 494 | OTHER_LDFLAGS = ( 495 | "$(inherited)", 496 | "-ObjC", 497 | "-lc++", 498 | ); 499 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 500 | PRODUCT_NAME = ArticlesApp; 501 | SWIFT_OPTIMIZATION_LEVEL = "-Onone"; 502 | SWIFT_VERSION = 5.0; 503 | VERSIONING_SYSTEM = "apple-generic"; 504 | }; 505 | name = Debug; 506 | }; 507 | 13B07F951A680F5B00A75B9A /* Release */ = { 508 | isa = XCBuildConfiguration; 509 | baseConfigurationReference = 60E0582C5C20133E4DA43E0C /* Pods-ArticlesApp.release.xcconfig */; 510 | buildSettings = { 511 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 512 | CLANG_ENABLE_MODULES = YES; 513 | CURRENT_PROJECT_VERSION = 1; 514 | INFOPLIST_FILE = ArticlesApp/Info.plist; 515 | LD_RUNPATH_SEARCH_PATHS = ( 516 | "$(inherited)", 517 | "@executable_path/Frameworks", 518 | ); 519 | OTHER_LDFLAGS = ( 520 | "$(inherited)", 521 | "-ObjC", 522 | "-lc++", 523 | ); 524 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 525 | PRODUCT_NAME = ArticlesApp; 526 | SWIFT_VERSION = 5.0; 527 | VERSIONING_SYSTEM = "apple-generic"; 528 | }; 529 | name = Release; 530 | }; 531 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 532 | isa = XCBuildConfiguration; 533 | buildSettings = { 534 | ALWAYS_SEARCH_USER_PATHS = NO; 535 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 536 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 537 | CLANG_CXX_LIBRARY = "libc++"; 538 | CLANG_ENABLE_MODULES = YES; 539 | CLANG_ENABLE_OBJC_ARC = YES; 540 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 541 | CLANG_WARN_BOOL_CONVERSION = YES; 542 | CLANG_WARN_COMMA = YES; 543 | CLANG_WARN_CONSTANT_CONVERSION = YES; 544 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 545 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 546 | CLANG_WARN_EMPTY_BODY = YES; 547 | CLANG_WARN_ENUM_CONVERSION = YES; 548 | CLANG_WARN_INFINITE_RECURSION = YES; 549 | CLANG_WARN_INT_CONVERSION = YES; 550 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 551 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 552 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 553 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 554 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 555 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 556 | CLANG_WARN_STRICT_PROTOTYPES = YES; 557 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 558 | CLANG_WARN_UNREACHABLE_CODE = YES; 559 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 560 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 561 | COPY_PHASE_STRIP = NO; 562 | ENABLE_STRICT_OBJC_MSGSEND = YES; 563 | ENABLE_TESTABILITY = YES; 564 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = ""; 565 | GCC_C_LANGUAGE_STANDARD = gnu99; 566 | GCC_DYNAMIC_NO_PIC = NO; 567 | GCC_NO_COMMON_BLOCKS = YES; 568 | GCC_OPTIMIZATION_LEVEL = 0; 569 | GCC_PREPROCESSOR_DEFINITIONS = ( 570 | "DEBUG=1", 571 | "$(inherited)", 572 | ); 573 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 574 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 575 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 576 | GCC_WARN_UNDECLARED_SELECTOR = YES; 577 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 578 | GCC_WARN_UNUSED_FUNCTION = YES; 579 | GCC_WARN_UNUSED_VARIABLE = YES; 580 | IPHONEOS_DEPLOYMENT_TARGET = 10.0; 581 | LD_RUNPATH_SEARCH_PATHS = ( 582 | /usr/lib/swift, 583 | "$(inherited)", 584 | ); 585 | LIBRARY_SEARCH_PATHS = ( 586 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 587 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"", 588 | "\"$(inherited)\"", 589 | ); 590 | MTL_ENABLE_DEBUG_INFO = YES; 591 | ONLY_ACTIVE_ARCH = YES; 592 | SDKROOT = iphoneos; 593 | }; 594 | name = Debug; 595 | }; 596 | 83CBBA211A601CBA00E9B192 /* Release */ = { 597 | isa = XCBuildConfiguration; 598 | buildSettings = { 599 | ALWAYS_SEARCH_USER_PATHS = NO; 600 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 601 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 602 | CLANG_CXX_LIBRARY = "libc++"; 603 | CLANG_ENABLE_MODULES = YES; 604 | CLANG_ENABLE_OBJC_ARC = YES; 605 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 606 | CLANG_WARN_BOOL_CONVERSION = YES; 607 | CLANG_WARN_COMMA = YES; 608 | CLANG_WARN_CONSTANT_CONVERSION = YES; 609 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 610 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 611 | CLANG_WARN_EMPTY_BODY = YES; 612 | CLANG_WARN_ENUM_CONVERSION = YES; 613 | CLANG_WARN_INFINITE_RECURSION = YES; 614 | CLANG_WARN_INT_CONVERSION = YES; 615 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 616 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 617 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 618 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 619 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 620 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 621 | CLANG_WARN_STRICT_PROTOTYPES = YES; 622 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 623 | CLANG_WARN_UNREACHABLE_CODE = YES; 624 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 625 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 626 | COPY_PHASE_STRIP = YES; 627 | ENABLE_NS_ASSERTIONS = NO; 628 | ENABLE_STRICT_OBJC_MSGSEND = YES; 629 | "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = ""; 630 | GCC_C_LANGUAGE_STANDARD = gnu99; 631 | GCC_NO_COMMON_BLOCKS = YES; 632 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 633 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 634 | GCC_WARN_UNDECLARED_SELECTOR = YES; 635 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 636 | GCC_WARN_UNUSED_FUNCTION = YES; 637 | GCC_WARN_UNUSED_VARIABLE = YES; 638 | IPHONEOS_DEPLOYMENT_TARGET = 10.0; 639 | LD_RUNPATH_SEARCH_PATHS = ( 640 | /usr/lib/swift, 641 | "$(inherited)", 642 | ); 643 | LIBRARY_SEARCH_PATHS = ( 644 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 645 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"", 646 | "\"$(inherited)\"", 647 | ); 648 | MTL_ENABLE_DEBUG_INFO = NO; 649 | SDKROOT = iphoneos; 650 | VALIDATE_PRODUCT = YES; 651 | }; 652 | name = Release; 653 | }; 654 | /* End XCBuildConfiguration section */ 655 | 656 | /* Begin XCConfigurationList section */ 657 | 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "ArticlesAppTests" */ = { 658 | isa = XCConfigurationList; 659 | buildConfigurations = ( 660 | 00E356F61AD99517003FC87E /* Debug */, 661 | 00E356F71AD99517003FC87E /* Release */, 662 | ); 663 | defaultConfigurationIsVisible = 0; 664 | defaultConfigurationName = Release; 665 | }; 666 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "ArticlesApp" */ = { 667 | isa = XCConfigurationList; 668 | buildConfigurations = ( 669 | 13B07F941A680F5B00A75B9A /* Debug */, 670 | 13B07F951A680F5B00A75B9A /* Release */, 671 | ); 672 | defaultConfigurationIsVisible = 0; 673 | defaultConfigurationName = Release; 674 | }; 675 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "ArticlesApp" */ = { 676 | isa = XCConfigurationList; 677 | buildConfigurations = ( 678 | 83CBBA201A601CBA00E9B192 /* Debug */, 679 | 83CBBA211A601CBA00E9B192 /* Release */, 680 | ); 681 | defaultConfigurationIsVisible = 0; 682 | defaultConfigurationName = Release; 683 | }; 684 | /* End XCConfigurationList section */ 685 | }; 686 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 687 | } 688 | -------------------------------------------------------------------------------- /ios/ArticlesApp.xcodeproj/xcshareddata/xcschemes/ArticlesApp.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /ios/ArticlesApp.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /ios/ArticlesApp/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /ios/ArticlesApp/AppDelegate.m: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | 7 | #ifdef FB_SONARKIT_ENABLED 8 | #import 9 | #import 10 | #import 11 | #import 12 | #import 13 | #import 14 | 15 | static void InitializeFlipper(UIApplication *application) { 16 | FlipperClient *client = [FlipperClient sharedClient]; 17 | SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults]; 18 | [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]]; 19 | [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; 20 | [client addPlugin:[FlipperKitReactPlugin new]]; 21 | [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; 22 | [client start]; 23 | } 24 | #endif 25 | 26 | @implementation AppDelegate 27 | 28 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 29 | { 30 | #ifdef FB_SONARKIT_ENABLED 31 | InitializeFlipper(application); 32 | #endif 33 | 34 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 35 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 36 | moduleName:@"ArticlesApp" 37 | initialProperties:nil]; 38 | 39 | if (@available(iOS 13.0, *)) { 40 | rootView.backgroundColor = [UIColor systemBackgroundColor]; 41 | } else { 42 | rootView.backgroundColor = [UIColor whiteColor]; 43 | } 44 | 45 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 46 | UIViewController *rootViewController = [UIViewController new]; 47 | rootViewController.view = rootView; 48 | self.window.rootViewController = rootViewController; 49 | [self.window makeKeyAndVisible]; 50 | return YES; 51 | } 52 | 53 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 54 | { 55 | #if DEBUG 56 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 57 | #else 58 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 59 | #endif 60 | } 61 | 62 | @end 63 | -------------------------------------------------------------------------------- /ios/ArticlesApp/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /ios/ArticlesApp/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /ios/ArticlesApp/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | ArticlesApp 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | UILaunchStoryboardName 41 | LaunchScreen 42 | UIRequiredDeviceCapabilities 43 | 44 | armv7 45 | 46 | UISupportedInterfaceOrientations 47 | 48 | UIInterfaceOrientationPortrait 49 | UIInterfaceOrientationLandscapeLeft 50 | UIInterfaceOrientationLandscapeRight 51 | 52 | UIViewControllerBasedStatusBarAppearance 53 | 54 | UIAppFonts 55 | 56 | MaterialIcons.ttf 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /ios/ArticlesApp/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /ios/ArticlesApp/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char * argv[]) { 6 | @autoreleasepool { 7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /ios/ArticlesAppTests/ArticlesAppTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface ArticlesAppTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation ArticlesAppTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 38 | if (level >= RCTLogLevelError) { 39 | redboxError = message; 40 | } 41 | }); 42 | #endif 43 | 44 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 45 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 46 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | 48 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 49 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 50 | return YES; 51 | } 52 | return NO; 53 | }]; 54 | } 55 | 56 | #ifdef DEBUG 57 | RCTSetLogFunction(RCTDefaultLogFunction); 58 | #endif 59 | 60 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 61 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 62 | } 63 | 64 | 65 | @end 66 | -------------------------------------------------------------------------------- /ios/ArticlesAppTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /ios/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native/scripts/react_native_pods' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | platform :ios, '10.0' 5 | 6 | target 'ArticlesApp' do 7 | config = use_native_modules! 8 | 9 | use_react_native!( 10 | :path => config[:reactNativePath], 11 | # to enable hermes on iOS, change `false` to `true` and then install pods 12 | :hermes_enabled => false 13 | ) 14 | 15 | target 'ArticlesAppTests' do 16 | inherit! :complete 17 | # Pods for testing 18 | end 19 | 20 | # Enables Flipper. 21 | # 22 | # Note that if you have use_frameworks! enabled, Flipper will not work and 23 | # you should disable the next line. 24 | use_flipper!() 25 | 26 | post_install do |installer| 27 | react_native_post_install(installer) 28 | end 29 | end -------------------------------------------------------------------------------- /ios/Podfile.lock: -------------------------------------------------------------------------------- 1 | PODS: 2 | - boost-for-react-native (1.63.0) 3 | - CocoaAsyncSocket (7.6.5) 4 | - DoubleConversion (1.1.6) 5 | - FBLazyVector (0.64.1) 6 | - FBReactNativeSpec (0.64.1): 7 | - RCT-Folly (= 2020.01.13.00) 8 | - RCTRequired (= 0.64.1) 9 | - RCTTypeSafety (= 0.64.1) 10 | - React-Core (= 0.64.1) 11 | - React-jsi (= 0.64.1) 12 | - ReactCommon/turbomodule/core (= 0.64.1) 13 | - Flipper (0.75.1): 14 | - Flipper-Folly (~> 2.5) 15 | - Flipper-RSocket (~> 1.3) 16 | - Flipper-DoubleConversion (1.1.7) 17 | - Flipper-Folly (2.5.3): 18 | - boost-for-react-native 19 | - Flipper-DoubleConversion 20 | - Flipper-Glog 21 | - libevent (~> 2.1.12) 22 | - OpenSSL-Universal (= 1.1.180) 23 | - Flipper-Glog (0.3.6) 24 | - Flipper-PeerTalk (0.0.4) 25 | - Flipper-RSocket (1.3.1): 26 | - Flipper-Folly (~> 2.5) 27 | - FlipperKit (0.75.1): 28 | - FlipperKit/Core (= 0.75.1) 29 | - FlipperKit/Core (0.75.1): 30 | - Flipper (~> 0.75.1) 31 | - FlipperKit/CppBridge 32 | - FlipperKit/FBCxxFollyDynamicConvert 33 | - FlipperKit/FBDefines 34 | - FlipperKit/FKPortForwarding 35 | - FlipperKit/CppBridge (0.75.1): 36 | - Flipper (~> 0.75.1) 37 | - FlipperKit/FBCxxFollyDynamicConvert (0.75.1): 38 | - Flipper-Folly (~> 2.5) 39 | - FlipperKit/FBDefines (0.75.1) 40 | - FlipperKit/FKPortForwarding (0.75.1): 41 | - CocoaAsyncSocket (~> 7.6) 42 | - Flipper-PeerTalk (~> 0.0.4) 43 | - FlipperKit/FlipperKitHighlightOverlay (0.75.1) 44 | - FlipperKit/FlipperKitLayoutPlugin (0.75.1): 45 | - FlipperKit/Core 46 | - FlipperKit/FlipperKitHighlightOverlay 47 | - FlipperKit/FlipperKitLayoutTextSearchable 48 | - YogaKit (~> 1.18) 49 | - FlipperKit/FlipperKitLayoutTextSearchable (0.75.1) 50 | - FlipperKit/FlipperKitNetworkPlugin (0.75.1): 51 | - FlipperKit/Core 52 | - FlipperKit/FlipperKitReactPlugin (0.75.1): 53 | - FlipperKit/Core 54 | - FlipperKit/FlipperKitUserDefaultsPlugin (0.75.1): 55 | - FlipperKit/Core 56 | - FlipperKit/SKIOSNetworkPlugin (0.75.1): 57 | - FlipperKit/Core 58 | - FlipperKit/FlipperKitNetworkPlugin 59 | - glog (0.3.5) 60 | - libevent (2.1.12) 61 | - OpenSSL-Universal (1.1.180) 62 | - RCT-Folly (2020.01.13.00): 63 | - boost-for-react-native 64 | - DoubleConversion 65 | - glog 66 | - RCT-Folly/Default (= 2020.01.13.00) 67 | - RCT-Folly/Default (2020.01.13.00): 68 | - boost-for-react-native 69 | - DoubleConversion 70 | - glog 71 | - RCTRequired (0.64.1) 72 | - RCTTypeSafety (0.64.1): 73 | - FBLazyVector (= 0.64.1) 74 | - RCT-Folly (= 2020.01.13.00) 75 | - RCTRequired (= 0.64.1) 76 | - React-Core (= 0.64.1) 77 | - React (0.64.1): 78 | - React-Core (= 0.64.1) 79 | - React-Core/DevSupport (= 0.64.1) 80 | - React-Core/RCTWebSocket (= 0.64.1) 81 | - React-RCTActionSheet (= 0.64.1) 82 | - React-RCTAnimation (= 0.64.1) 83 | - React-RCTBlob (= 0.64.1) 84 | - React-RCTImage (= 0.64.1) 85 | - React-RCTLinking (= 0.64.1) 86 | - React-RCTNetwork (= 0.64.1) 87 | - React-RCTSettings (= 0.64.1) 88 | - React-RCTText (= 0.64.1) 89 | - React-RCTVibration (= 0.64.1) 90 | - React-callinvoker (0.64.1) 91 | - React-Core (0.64.1): 92 | - glog 93 | - RCT-Folly (= 2020.01.13.00) 94 | - React-Core/Default (= 0.64.1) 95 | - React-cxxreact (= 0.64.1) 96 | - React-jsi (= 0.64.1) 97 | - React-jsiexecutor (= 0.64.1) 98 | - React-perflogger (= 0.64.1) 99 | - Yoga 100 | - React-Core/CoreModulesHeaders (0.64.1): 101 | - glog 102 | - RCT-Folly (= 2020.01.13.00) 103 | - React-Core/Default 104 | - React-cxxreact (= 0.64.1) 105 | - React-jsi (= 0.64.1) 106 | - React-jsiexecutor (= 0.64.1) 107 | - React-perflogger (= 0.64.1) 108 | - Yoga 109 | - React-Core/Default (0.64.1): 110 | - glog 111 | - RCT-Folly (= 2020.01.13.00) 112 | - React-cxxreact (= 0.64.1) 113 | - React-jsi (= 0.64.1) 114 | - React-jsiexecutor (= 0.64.1) 115 | - React-perflogger (= 0.64.1) 116 | - Yoga 117 | - React-Core/DevSupport (0.64.1): 118 | - glog 119 | - RCT-Folly (= 2020.01.13.00) 120 | - React-Core/Default (= 0.64.1) 121 | - React-Core/RCTWebSocket (= 0.64.1) 122 | - React-cxxreact (= 0.64.1) 123 | - React-jsi (= 0.64.1) 124 | - React-jsiexecutor (= 0.64.1) 125 | - React-jsinspector (= 0.64.1) 126 | - React-perflogger (= 0.64.1) 127 | - Yoga 128 | - React-Core/RCTActionSheetHeaders (0.64.1): 129 | - glog 130 | - RCT-Folly (= 2020.01.13.00) 131 | - React-Core/Default 132 | - React-cxxreact (= 0.64.1) 133 | - React-jsi (= 0.64.1) 134 | - React-jsiexecutor (= 0.64.1) 135 | - React-perflogger (= 0.64.1) 136 | - Yoga 137 | - React-Core/RCTAnimationHeaders (0.64.1): 138 | - glog 139 | - RCT-Folly (= 2020.01.13.00) 140 | - React-Core/Default 141 | - React-cxxreact (= 0.64.1) 142 | - React-jsi (= 0.64.1) 143 | - React-jsiexecutor (= 0.64.1) 144 | - React-perflogger (= 0.64.1) 145 | - Yoga 146 | - React-Core/RCTBlobHeaders (0.64.1): 147 | - glog 148 | - RCT-Folly (= 2020.01.13.00) 149 | - React-Core/Default 150 | - React-cxxreact (= 0.64.1) 151 | - React-jsi (= 0.64.1) 152 | - React-jsiexecutor (= 0.64.1) 153 | - React-perflogger (= 0.64.1) 154 | - Yoga 155 | - React-Core/RCTImageHeaders (0.64.1): 156 | - glog 157 | - RCT-Folly (= 2020.01.13.00) 158 | - React-Core/Default 159 | - React-cxxreact (= 0.64.1) 160 | - React-jsi (= 0.64.1) 161 | - React-jsiexecutor (= 0.64.1) 162 | - React-perflogger (= 0.64.1) 163 | - Yoga 164 | - React-Core/RCTLinkingHeaders (0.64.1): 165 | - glog 166 | - RCT-Folly (= 2020.01.13.00) 167 | - React-Core/Default 168 | - React-cxxreact (= 0.64.1) 169 | - React-jsi (= 0.64.1) 170 | - React-jsiexecutor (= 0.64.1) 171 | - React-perflogger (= 0.64.1) 172 | - Yoga 173 | - React-Core/RCTNetworkHeaders (0.64.1): 174 | - glog 175 | - RCT-Folly (= 2020.01.13.00) 176 | - React-Core/Default 177 | - React-cxxreact (= 0.64.1) 178 | - React-jsi (= 0.64.1) 179 | - React-jsiexecutor (= 0.64.1) 180 | - React-perflogger (= 0.64.1) 181 | - Yoga 182 | - React-Core/RCTSettingsHeaders (0.64.1): 183 | - glog 184 | - RCT-Folly (= 2020.01.13.00) 185 | - React-Core/Default 186 | - React-cxxreact (= 0.64.1) 187 | - React-jsi (= 0.64.1) 188 | - React-jsiexecutor (= 0.64.1) 189 | - React-perflogger (= 0.64.1) 190 | - Yoga 191 | - React-Core/RCTTextHeaders (0.64.1): 192 | - glog 193 | - RCT-Folly (= 2020.01.13.00) 194 | - React-Core/Default 195 | - React-cxxreact (= 0.64.1) 196 | - React-jsi (= 0.64.1) 197 | - React-jsiexecutor (= 0.64.1) 198 | - React-perflogger (= 0.64.1) 199 | - Yoga 200 | - React-Core/RCTVibrationHeaders (0.64.1): 201 | - glog 202 | - RCT-Folly (= 2020.01.13.00) 203 | - React-Core/Default 204 | - React-cxxreact (= 0.64.1) 205 | - React-jsi (= 0.64.1) 206 | - React-jsiexecutor (= 0.64.1) 207 | - React-perflogger (= 0.64.1) 208 | - Yoga 209 | - React-Core/RCTWebSocket (0.64.1): 210 | - glog 211 | - RCT-Folly (= 2020.01.13.00) 212 | - React-Core/Default (= 0.64.1) 213 | - React-cxxreact (= 0.64.1) 214 | - React-jsi (= 0.64.1) 215 | - React-jsiexecutor (= 0.64.1) 216 | - React-perflogger (= 0.64.1) 217 | - Yoga 218 | - React-CoreModules (0.64.1): 219 | - FBReactNativeSpec (= 0.64.1) 220 | - RCT-Folly (= 2020.01.13.00) 221 | - RCTTypeSafety (= 0.64.1) 222 | - React-Core/CoreModulesHeaders (= 0.64.1) 223 | - React-jsi (= 0.64.1) 224 | - React-RCTImage (= 0.64.1) 225 | - ReactCommon/turbomodule/core (= 0.64.1) 226 | - React-cxxreact (0.64.1): 227 | - boost-for-react-native (= 1.63.0) 228 | - DoubleConversion 229 | - glog 230 | - RCT-Folly (= 2020.01.13.00) 231 | - React-callinvoker (= 0.64.1) 232 | - React-jsi (= 0.64.1) 233 | - React-jsinspector (= 0.64.1) 234 | - React-perflogger (= 0.64.1) 235 | - React-runtimeexecutor (= 0.64.1) 236 | - React-jsi (0.64.1): 237 | - boost-for-react-native (= 1.63.0) 238 | - DoubleConversion 239 | - glog 240 | - RCT-Folly (= 2020.01.13.00) 241 | - React-jsi/Default (= 0.64.1) 242 | - React-jsi/Default (0.64.1): 243 | - boost-for-react-native (= 1.63.0) 244 | - DoubleConversion 245 | - glog 246 | - RCT-Folly (= 2020.01.13.00) 247 | - React-jsiexecutor (0.64.1): 248 | - DoubleConversion 249 | - glog 250 | - RCT-Folly (= 2020.01.13.00) 251 | - React-cxxreact (= 0.64.1) 252 | - React-jsi (= 0.64.1) 253 | - React-perflogger (= 0.64.1) 254 | - React-jsinspector (0.64.1) 255 | - React-perflogger (0.64.1) 256 | - React-RCTActionSheet (0.64.1): 257 | - React-Core/RCTActionSheetHeaders (= 0.64.1) 258 | - React-RCTAnimation (0.64.1): 259 | - FBReactNativeSpec (= 0.64.1) 260 | - RCT-Folly (= 2020.01.13.00) 261 | - RCTTypeSafety (= 0.64.1) 262 | - React-Core/RCTAnimationHeaders (= 0.64.1) 263 | - React-jsi (= 0.64.1) 264 | - ReactCommon/turbomodule/core (= 0.64.1) 265 | - React-RCTBlob (0.64.1): 266 | - FBReactNativeSpec (= 0.64.1) 267 | - RCT-Folly (= 2020.01.13.00) 268 | - React-Core/RCTBlobHeaders (= 0.64.1) 269 | - React-Core/RCTWebSocket (= 0.64.1) 270 | - React-jsi (= 0.64.1) 271 | - React-RCTNetwork (= 0.64.1) 272 | - ReactCommon/turbomodule/core (= 0.64.1) 273 | - React-RCTImage (0.64.1): 274 | - FBReactNativeSpec (= 0.64.1) 275 | - RCT-Folly (= 2020.01.13.00) 276 | - RCTTypeSafety (= 0.64.1) 277 | - React-Core/RCTImageHeaders (= 0.64.1) 278 | - React-jsi (= 0.64.1) 279 | - React-RCTNetwork (= 0.64.1) 280 | - ReactCommon/turbomodule/core (= 0.64.1) 281 | - React-RCTLinking (0.64.1): 282 | - FBReactNativeSpec (= 0.64.1) 283 | - React-Core/RCTLinkingHeaders (= 0.64.1) 284 | - React-jsi (= 0.64.1) 285 | - ReactCommon/turbomodule/core (= 0.64.1) 286 | - React-RCTNetwork (0.64.1): 287 | - FBReactNativeSpec (= 0.64.1) 288 | - RCT-Folly (= 2020.01.13.00) 289 | - RCTTypeSafety (= 0.64.1) 290 | - React-Core/RCTNetworkHeaders (= 0.64.1) 291 | - React-jsi (= 0.64.1) 292 | - ReactCommon/turbomodule/core (= 0.64.1) 293 | - React-RCTSettings (0.64.1): 294 | - FBReactNativeSpec (= 0.64.1) 295 | - RCT-Folly (= 2020.01.13.00) 296 | - RCTTypeSafety (= 0.64.1) 297 | - React-Core/RCTSettingsHeaders (= 0.64.1) 298 | - React-jsi (= 0.64.1) 299 | - ReactCommon/turbomodule/core (= 0.64.1) 300 | - React-RCTText (0.64.1): 301 | - React-Core/RCTTextHeaders (= 0.64.1) 302 | - React-RCTVibration (0.64.1): 303 | - FBReactNativeSpec (= 0.64.1) 304 | - RCT-Folly (= 2020.01.13.00) 305 | - React-Core/RCTVibrationHeaders (= 0.64.1) 306 | - React-jsi (= 0.64.1) 307 | - ReactCommon/turbomodule/core (= 0.64.1) 308 | - React-runtimeexecutor (0.64.1): 309 | - React-jsi (= 0.64.1) 310 | - ReactCommon/turbomodule/core (0.64.1): 311 | - DoubleConversion 312 | - glog 313 | - RCT-Folly (= 2020.01.13.00) 314 | - React-callinvoker (= 0.64.1) 315 | - React-Core (= 0.64.1) 316 | - React-cxxreact (= 0.64.1) 317 | - React-jsi (= 0.64.1) 318 | - React-perflogger (= 0.64.1) 319 | - Yoga (1.14.0) 320 | - YogaKit (1.18.1): 321 | - Yoga (~> 1.14) 322 | 323 | DEPENDENCIES: 324 | - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) 325 | - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) 326 | - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`) 327 | - Flipper (~> 0.75.1) 328 | - Flipper-DoubleConversion (= 1.1.7) 329 | - Flipper-Folly (~> 2.5.3) 330 | - Flipper-Glog (= 0.3.6) 331 | - Flipper-PeerTalk (~> 0.0.4) 332 | - Flipper-RSocket (~> 1.3) 333 | - FlipperKit (~> 0.75.1) 334 | - FlipperKit/Core (~> 0.75.1) 335 | - FlipperKit/CppBridge (~> 0.75.1) 336 | - FlipperKit/FBCxxFollyDynamicConvert (~> 0.75.1) 337 | - FlipperKit/FBDefines (~> 0.75.1) 338 | - FlipperKit/FKPortForwarding (~> 0.75.1) 339 | - FlipperKit/FlipperKitHighlightOverlay (~> 0.75.1) 340 | - FlipperKit/FlipperKitLayoutPlugin (~> 0.75.1) 341 | - FlipperKit/FlipperKitLayoutTextSearchable (~> 0.75.1) 342 | - FlipperKit/FlipperKitNetworkPlugin (~> 0.75.1) 343 | - FlipperKit/FlipperKitReactPlugin (~> 0.75.1) 344 | - FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.75.1) 345 | - FlipperKit/SKIOSNetworkPlugin (~> 0.75.1) 346 | - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`) 347 | - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`) 348 | - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`) 349 | - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`) 350 | - React (from `../node_modules/react-native/`) 351 | - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`) 352 | - React-Core (from `../node_modules/react-native/`) 353 | - React-Core/DevSupport (from `../node_modules/react-native/`) 354 | - React-Core/RCTWebSocket (from `../node_modules/react-native/`) 355 | - React-CoreModules (from `../node_modules/react-native/React/CoreModules`) 356 | - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`) 357 | - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`) 358 | - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) 359 | - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) 360 | - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`) 361 | - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) 362 | - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) 363 | - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) 364 | - React-RCTImage (from `../node_modules/react-native/Libraries/Image`) 365 | - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`) 366 | - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`) 367 | - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`) 368 | - React-RCTText (from `../node_modules/react-native/Libraries/Text`) 369 | - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) 370 | - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) 371 | - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) 372 | - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) 373 | 374 | SPEC REPOS: 375 | trunk: 376 | - boost-for-react-native 377 | - CocoaAsyncSocket 378 | - Flipper 379 | - Flipper-DoubleConversion 380 | - Flipper-Folly 381 | - Flipper-Glog 382 | - Flipper-PeerTalk 383 | - Flipper-RSocket 384 | - FlipperKit 385 | - libevent 386 | - OpenSSL-Universal 387 | - YogaKit 388 | 389 | EXTERNAL SOURCES: 390 | DoubleConversion: 391 | :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" 392 | FBLazyVector: 393 | :path: "../node_modules/react-native/Libraries/FBLazyVector" 394 | FBReactNativeSpec: 395 | :path: "../node_modules/react-native/React/FBReactNativeSpec" 396 | glog: 397 | :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec" 398 | RCT-Folly: 399 | :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec" 400 | RCTRequired: 401 | :path: "../node_modules/react-native/Libraries/RCTRequired" 402 | RCTTypeSafety: 403 | :path: "../node_modules/react-native/Libraries/TypeSafety" 404 | React: 405 | :path: "../node_modules/react-native/" 406 | React-callinvoker: 407 | :path: "../node_modules/react-native/ReactCommon/callinvoker" 408 | React-Core: 409 | :path: "../node_modules/react-native/" 410 | React-CoreModules: 411 | :path: "../node_modules/react-native/React/CoreModules" 412 | React-cxxreact: 413 | :path: "../node_modules/react-native/ReactCommon/cxxreact" 414 | React-jsi: 415 | :path: "../node_modules/react-native/ReactCommon/jsi" 416 | React-jsiexecutor: 417 | :path: "../node_modules/react-native/ReactCommon/jsiexecutor" 418 | React-jsinspector: 419 | :path: "../node_modules/react-native/ReactCommon/jsinspector" 420 | React-perflogger: 421 | :path: "../node_modules/react-native/ReactCommon/reactperflogger" 422 | React-RCTActionSheet: 423 | :path: "../node_modules/react-native/Libraries/ActionSheetIOS" 424 | React-RCTAnimation: 425 | :path: "../node_modules/react-native/Libraries/NativeAnimation" 426 | React-RCTBlob: 427 | :path: "../node_modules/react-native/Libraries/Blob" 428 | React-RCTImage: 429 | :path: "../node_modules/react-native/Libraries/Image" 430 | React-RCTLinking: 431 | :path: "../node_modules/react-native/Libraries/LinkingIOS" 432 | React-RCTNetwork: 433 | :path: "../node_modules/react-native/Libraries/Network" 434 | React-RCTSettings: 435 | :path: "../node_modules/react-native/Libraries/Settings" 436 | React-RCTText: 437 | :path: "../node_modules/react-native/Libraries/Text" 438 | React-RCTVibration: 439 | :path: "../node_modules/react-native/Libraries/Vibration" 440 | React-runtimeexecutor: 441 | :path: "../node_modules/react-native/ReactCommon/runtimeexecutor" 442 | ReactCommon: 443 | :path: "../node_modules/react-native/ReactCommon" 444 | Yoga: 445 | :path: "../node_modules/react-native/ReactCommon/yoga" 446 | 447 | SPEC CHECKSUMS: 448 | boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c 449 | CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 450 | DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de 451 | FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53 452 | FBReactNativeSpec: ab084bb107817d45c16907f80899c309b01492da 453 | Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021 454 | Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41 455 | Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c 456 | Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6 457 | Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9 458 | Flipper-RSocket: 127954abe8b162fcaf68d2134d34dc2bd7076154 459 | FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00 460 | glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62 461 | libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 462 | OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b 463 | RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c 464 | RCTRequired: ec2ebc96b7bfba3ca5c32740f5a0c6a014a274d2 465 | RCTTypeSafety: 22567f31e67c3e088c7ac23ea46ab6d4779c0ea5 466 | React: a241e3dbb1e91d06332f1dbd2b3ab26e1a4c4b9d 467 | React-callinvoker: da4d1c6141696a00163960906bc8a55b985e4ce4 468 | React-Core: 46ba164c437d7dac607b470c83c8308b05799748 469 | React-CoreModules: 217bd14904491c7b9940ff8b34a3fe08013c2f14 470 | React-cxxreact: 0090588ae6660c4615d3629fdd5c768d0983add4 471 | React-jsi: 5de8204706bd872b78ea646aee5d2561ca1214b6 472 | React-jsiexecutor: 124e8f99992490d0d13e0649d950d3e1aae06fe9 473 | React-jsinspector: 500a59626037be5b3b3d89c5151bc3baa9abf1a9 474 | React-perflogger: aad6d4b4a267936b3667260d1f649b6f6069a675 475 | React-RCTActionSheet: fc376be462c9c8d6ad82c0905442fd77f82a9d2a 476 | React-RCTAnimation: ba0a1c3a2738be224a08092fa7f1b444ab77d309 477 | React-RCTBlob: f758d4403fc5828a326dc69e27b41e1a92f34947 478 | React-RCTImage: ce57088705f4a8d03f6594b066a59c29143ba73e 479 | React-RCTLinking: 852a3a95c65fa63f657a4b4e2d3d83a815e00a7c 480 | React-RCTNetwork: 9d7ccb8a08d522d71700b4fb677d9fa28cccd118 481 | React-RCTSettings: d8aaf4389ff06114dee8c42ef5f0f2915946011e 482 | React-RCTText: 809c12ed6b261796ba056c04fcd20d8b90bcc81d 483 | React-RCTVibration: 4b99a7f5c6c0abbc5256410cc5425fb8531986e1 484 | React-runtimeexecutor: ff951a0c241bfaefc4940a3f1f1a229e7cb32fa6 485 | ReactCommon: bedc99ed4dae329c4fcf128d0c31b9115e5365ca 486 | Yoga: a7de31c64fe738607e7a3803e3f591a4b1df7393 487 | YogaKit: f782866e155069a2cca2517aafea43200b01fd5a 488 | 489 | PODFILE CHECKSUM: 74b0d290df75204abd277403f35cf115d97e60dc 490 | 491 | COCOAPODS: 1.10.1 492 | -------------------------------------------------------------------------------- /metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: true, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "articlesapp", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "start": "react-native start", 9 | "test": "jest", 10 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx" 11 | }, 12 | "dependencies": { 13 | "@react-native-async-storage/async-storage": "^1.15.4", 14 | "@react-navigation/bottom-tabs": "^6.0.5", 15 | "@react-navigation/native": "^6.0.2", 16 | "@react-navigation/native-stack": "^6.1.0", 17 | "@types/axios": "^0.14.0", 18 | "@types/react-native-vector-icons": "^6.4.6", 19 | "axios": "^0.21.1", 20 | "react": "17.0.1", 21 | "react-native": "0.64.1", 22 | "react-native-safe-area-context": "^3.3.0", 23 | "react-native-screens": "^3.5.0", 24 | "react-native-vector-icons": "^8.1.0", 25 | "react-query": "^3.16.0" 26 | }, 27 | "devDependencies": { 28 | "@babel/core": "^7.12.9", 29 | "@babel/runtime": "^7.12.5", 30 | "@react-native-community/eslint-config": "^2.0.0", 31 | "@types/jest": "^26.0.23", 32 | "@types/react-native": "^0.64.5", 33 | "@types/react-test-renderer": "^16.9.2", 34 | "babel-jest": "^26.6.3", 35 | "eslint": "^7.14.0", 36 | "jest": "^26.6.3", 37 | "metro-react-native-babel-preset": "^0.64.0", 38 | "react-test-renderer": "17.0.1", 39 | "typescript": "^3.8.3" 40 | }, 41 | "resolutions": { 42 | "@types/react": "^17" 43 | }, 44 | "jest": { 45 | "preset": "react-native", 46 | "moduleFileExtensions": [ 47 | "ts", 48 | "tsx", 49 | "js", 50 | "jsx", 51 | "json", 52 | "node" 53 | ] 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /screens/ArticleScreen.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {StyleSheet, ActivityIndicator, FlatList} from 'react-native'; 3 | import {RouteProp, useRoute} from '@react-navigation/core'; 4 | import {RootStackParamList} from './types'; 5 | import {useMutation, useQuery, useQueryClient} from 'react-query'; 6 | import {getArticle} from '../api/articles'; 7 | import {deleteComment, getComments, modifyComment} from '../api/comments'; 8 | import ArticleView from '../components/ArticleView'; 9 | import {useSafeAreaInsets} from 'react-native-safe-area-context'; 10 | import CommentItem from '../components/CommentItem'; 11 | import {useUserState} from '../contexts/UserContext'; 12 | import CommentInput from '../components/CommentInput'; 13 | import AskDialog from '../components/AskDialog'; 14 | import {Comment} from '../api/types'; 15 | import CommentModal from '../components/CommentModal'; 16 | 17 | type ArticleScreenRouteProp = RouteProp; 18 | 19 | function ArticleScreen() { 20 | const {params} = useRoute(); 21 | const {id} = params; 22 | 23 | const articleQuery = useQuery(['article', id], () => getArticle(id)); 24 | const commentsQuery = useQuery(['comments', id], () => getComments(id)); 25 | 26 | const {bottom} = useSafeAreaInsets(); 27 | const [currentUser] = useUserState(); 28 | const {mutate: modify} = useMutation(modifyComment, { 29 | onSuccess: comment => { 30 | queryClient.setQueryData(['comments', id], comments => 31 | comments 32 | ? comments.map(c => (c.id === selectedCommentId ? comment : c)) 33 | : [], 34 | ); 35 | }, 36 | }); 37 | 38 | const [selectedCommentId, setSelectedCommentId] = 39 | useState(null); 40 | const [askRemoveComment, setAskRemoveComment] = useState(false); 41 | const [modifying, setModifying] = useState(false); 42 | 43 | const queryClient = useQueryClient(); 44 | const {mutate: remove} = useMutation(deleteComment, { 45 | onSuccess: () => { 46 | queryClient.setQueryData(['comments', id], comments => 47 | comments ? comments.filter(c => c.id !== selectedCommentId) : [], 48 | ); 49 | }, 50 | }); 51 | 52 | const onRemove = (commentId: number) => { 53 | setSelectedCommentId(commentId); 54 | setAskRemoveComment(true); 55 | }; 56 | 57 | const onConfirmRemove = () => { 58 | setAskRemoveComment(false); 59 | remove({ 60 | id: selectedCommentId!, // null이 아님을 지정하기 위하여 ! 사용 61 | articleId: id, 62 | }); 63 | }; 64 | const onCancelRemove = () => { 65 | setAskRemoveComment(false); 66 | }; 67 | 68 | const onModify = (commentId: number) => { 69 | setSelectedCommentId(commentId); 70 | setModifying(true); 71 | }; 72 | const onCancelModify = () => { 73 | setModifying(false); 74 | }; 75 | const onSubmitModify = (message: string) => { 76 | setModifying(false); 77 | modify({ 78 | id: selectedCommentId!, 79 | articleId: id, 80 | message, 81 | }); 82 | }; 83 | 84 | const selectedComment = commentsQuery.data?.find( 85 | comment => comment.id === selectedCommentId, 86 | ); 87 | 88 | // 둘 중 하나라도 준비되지 않은 데이터가 있으면 스피너 보여주기 89 | if (!articleQuery.data || !commentsQuery.data) { 90 | return ( 91 | 92 | ); 93 | } 94 | 95 | const {title, body, published_at, user} = articleQuery.data; 96 | const isMyArticle = currentUser?.id === user.id; 97 | 98 | return ( 99 | <> 100 | ( 108 | 117 | )} 118 | keyExtractor={item => item.id.toString()} 119 | ListHeaderComponent={ 120 | <> 121 | 129 | 130 | 131 | } 132 | /> 133 | 142 | 148 | 149 | ); 150 | } 151 | 152 | const styles = StyleSheet.create({ 153 | spinner: { 154 | flex: 1, 155 | }, 156 | flatList: { 157 | backgroundColor: 'white', 158 | flex: 1, 159 | }, 160 | flatListContent: { 161 | paddingHorizontal: 12, 162 | }, 163 | }); 164 | 165 | export default ArticleScreen; 166 | -------------------------------------------------------------------------------- /screens/ArticlesScreen.tsx: -------------------------------------------------------------------------------- 1 | import React, {useMemo} from 'react'; 2 | import {ActivityIndicator, StyleSheet} from 'react-native'; 3 | import {useInfiniteQuery} from 'react-query'; 4 | import {getArticles} from '../api/articles'; 5 | import {Article} from '../api/types'; 6 | import Articles from '../components/Articles'; 7 | import {useUserState} from '../contexts/UserContext'; 8 | 9 | function ArticlesScreen() { 10 | const { 11 | data, 12 | isFetchingNextPage, 13 | fetchNextPage, 14 | 15 | fetchPreviousPage, 16 | isFetchingPreviousPage, 17 | } = useInfiniteQuery( 18 | 'articles', 19 | ({pageParam}) => getArticles({...pageParam}), 20 | { 21 | getNextPageParam: lastPage => 22 | lastPage.length === 10 23 | ? {cursor: lastPage[lastPage.length - 1].id} 24 | : undefined, 25 | 26 | getPreviousPageParam: (_, allPages) => { 27 | const validPage = allPages.find(page => page.length > 0); 28 | if (!validPage) { 29 | return undefined; 30 | } 31 | 32 | return { 33 | prevCursor: validPage[0].id, 34 | }; 35 | }, 36 | }, 37 | ); 38 | 39 | const items = useMemo(() => { 40 | if (!data) { 41 | return null; 42 | } 43 | return ([] as Article[]).concat(...data.pages); 44 | }, [data]); 45 | 46 | const [user] = useUserState(); 47 | 48 | if (!items) { 49 | return ( 50 | 51 | ); 52 | } 53 | 54 | return ( 55 | 63 | ); 64 | } 65 | 66 | const styles = StyleSheet.create({ 67 | spinner: { 68 | flex: 1, 69 | }, 70 | }); 71 | 72 | export default ArticlesScreen; 73 | -------------------------------------------------------------------------------- /screens/LoginScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AuthForm from '../components/AuthForm'; 3 | 4 | function LoginScreen() { 5 | return ; 6 | } 7 | 8 | export default LoginScreen; 9 | -------------------------------------------------------------------------------- /screens/MainTab.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; 3 | import {MainTabParamList} from './types'; 4 | import ArticlesScreen from './ArticlesScreen'; 5 | import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; 6 | 7 | import UserMenuScreen from './UserMenuScreen'; 8 | 9 | const Tab = createBottomTabNavigator(); 10 | 11 | function MainTab() { 12 | return ( 13 | 17 | ( 23 | 24 | ), 25 | }} 26 | /> 27 | ( 33 | 34 | ), 35 | }} 36 | /> 37 | 38 | ); 39 | } 40 | 41 | export default MainTab; 42 | -------------------------------------------------------------------------------- /screens/MyArticlesScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View} from 'react-native'; 3 | 4 | function MyArticlesScreen() { 5 | return ; 6 | } 7 | 8 | export default MyArticlesScreen; 9 | -------------------------------------------------------------------------------- /screens/RegisterScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AuthForm from '../components/AuthForm'; 3 | 4 | function RegisterScreen() { 5 | return ; 6 | } 7 | 8 | export default RegisterScreen; 9 | -------------------------------------------------------------------------------- /screens/RootStack.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {createNativeStackNavigator} from '@react-navigation/native-stack'; 3 | import {RootStackParamList} from './types'; 4 | import MainTab from './MainTab'; 5 | import ArticleScreen from './ArticleScreen'; 6 | import RegisterScreen from './RegisterScreen'; 7 | import LoginScreen from './LoginScreen'; 8 | import MyArticlesScreen from './MyArticlesScreen'; 9 | import useAuthLoadEffect from '../hooks/useAuthLoadEffect'; 10 | import WriteScreen from './WriteScreen'; 11 | 12 | const Stack = createNativeStackNavigator(); 13 | 14 | function RootStack() { 15 | useAuthLoadEffect(); 16 | 17 | return ( 18 | 19 | 24 | 29 | 34 | 39 | 44 | 49 | 50 | ); 51 | } 52 | 53 | export default RootStack; 54 | -------------------------------------------------------------------------------- /screens/UserMenuScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {View} from 'react-native'; 3 | import {useNavigation} from '@react-navigation/core'; 4 | import MenuItem from '../components/MenuItem'; 5 | import {RootStackNavigationProp} from './types'; 6 | import {useUserState} from '../contexts/UserContext'; 7 | import {clearToken} from '../api/client'; 8 | import authStorage from '../storages/authStorage'; 9 | 10 | function UserMenuScreen() { 11 | const navigation = useNavigation(); 12 | 13 | const [user, setUser] = useUserState(); 14 | 15 | const onLogin = () => navigation.navigate('Login'); 16 | const onRegister = () => navigation.navigate('Register'); 17 | const onLogout = () => { 18 | setUser(null); 19 | clearToken(); 20 | authStorage.clear(); 21 | }; 22 | 23 | return ( 24 | 25 | {user ? ( 26 | 27 | ) : ( 28 | <> 29 | 30 | 31 | 32 | )} 33 | 34 | ); 35 | } 36 | 37 | export default UserMenuScreen; 38 | -------------------------------------------------------------------------------- /screens/WriteScreen.tsx: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useEffect, useMemo, useState} from 'react'; 2 | import { 3 | KeyboardAvoidingView, 4 | Platform, 5 | Pressable, 6 | StyleSheet, 7 | TextInput, 8 | } from 'react-native'; 9 | import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'; 10 | import {RouteProp, useNavigation, useRoute} from '@react-navigation/core'; 11 | import {RootStackNavigationProp, RootStackParamList} from './types'; 12 | import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; 13 | import {InfiniteData, useMutation, useQueryClient} from 'react-query'; 14 | import {writeArticle, modifyArticle} from '../api/articles'; 15 | import {Article} from '../api/types'; 16 | 17 | type WriteScreenRouteProp = RouteProp; 18 | 19 | function WriteScreen() { 20 | const {top} = useSafeAreaInsets(); 21 | 22 | const queryClient = useQueryClient(); 23 | const {params} = useRoute(); 24 | const cachedArticle = useMemo( 25 | () => 26 | params.articleId 27 | ? queryClient.getQueryData
(['article', params.articleId]) 28 | : null, 29 | [queryClient, params.articleId], 30 | ); 31 | const [title, setTitle] = useState(cachedArticle?.title ?? ''); 32 | const [body, setBody] = useState(cachedArticle?.body ?? ''); 33 | 34 | const {mutate: write} = useMutation(writeArticle, { 35 | onSuccess: article => { 36 | queryClient.setQueryData>('articles', data => { 37 | if (!data) { 38 | return { 39 | pageParams: [undefined], 40 | pages: [[article]], 41 | }; 42 | } 43 | const [firstPage, ...rest] = data.pages; // 첫번째 페이지와 나머지 페이지를 구분 44 | return { 45 | ...data, 46 | // 첫번째 페이지에 article을 맨 앞에 추가, 그리고 그 뒤에 나머지 페이지 47 | pages: [[article, ...firstPage], ...rest], 48 | }; 49 | }); 50 | navigation.goBack(); 51 | }, 52 | }); 53 | 54 | const {mutate: modify} = useMutation(modifyArticle, { 55 | onSuccess: article => { 56 | // 게시글 목록 수정 57 | queryClient.setQueryData>('articles', data => { 58 | // data의 타입이 undefined가 아님을 명시하기 위하여 추가한 코드 59 | // modify의 경우엔 data가 무조건 유효하기 때문에 실제로 실행될 일 없음 60 | if (!data) { 61 | return {pageParams: [], pages: []}; 62 | } 63 | 64 | return { 65 | pageParams: data!.pageParams, 66 | pages: data!.pages.map(page => 67 | page.find(a => a.id === params.articleId) // 우리가 수정할 항목이 있는 페이지를 찾고 68 | ? page.map(a => (a.id === params.articleId ? article : a)) // 해당 페이지에서 id가 일치하는 항목을 교체 69 | : page, 70 | ), 71 | }; 72 | }); 73 | // 게시글 수정 74 | queryClient.setQueryData(['article', params.articleId], article); 75 | navigation.goBack(); 76 | }, 77 | }); 78 | 79 | const navigation = useNavigation(); 80 | const onSubmit = useCallback(() => { 81 | if (params.articleId) { 82 | modify({id: params.articleId, title, body}); 83 | } else { 84 | write({title, body}); 85 | } 86 | }, [write, modify, title, body, params.articleId]); 87 | 88 | useEffect(() => { 89 | navigation.setOptions({ 90 | headerRightContainerStyle: styles.headerRightContainer, 91 | headerRight: () => ( 92 | pressed && styles.headerRightPressed}> 96 | 97 | 98 | ), 99 | }); 100 | }, [onSubmit, navigation]); 101 | 102 | return ( 103 | 104 | 108 | 114 | 122 | 123 | 124 | ); 125 | } 126 | 127 | const styles = StyleSheet.create({ 128 | block: { 129 | flex: 1, 130 | paddingHorizontal: 12, 131 | paddingVertical: 16, 132 | flexDirection: 'column', 133 | }, 134 | keyboardAvoiding: { 135 | flex: 1, 136 | }, 137 | input: { 138 | backgroundColor: 'white', 139 | fontSize: 14, 140 | lineHeight: 18, 141 | paddingHorizontal: 16, 142 | paddingVertical: 12, 143 | borderRadius: 4, 144 | }, 145 | body: { 146 | paddingTop: 12, 147 | paddingBottom: 12, 148 | marginTop: 16, 149 | flex: 1, 150 | }, 151 | headerRightContainer: { 152 | marginRight: 16, 153 | }, 154 | headerRightPressed: { 155 | opacity: 0.75, 156 | }, 157 | }); 158 | 159 | export default WriteScreen; 160 | -------------------------------------------------------------------------------- /screens/types.ts: -------------------------------------------------------------------------------- 1 | import {BottomTabNavigationProp} from '@react-navigation/bottom-tabs'; 2 | import { 3 | CompositeNavigationProp, 4 | NavigatorScreenParams, 5 | RouteProp, 6 | } from '@react-navigation/core'; 7 | import {NativeStackNavigationProp} from '@react-navigation/native-stack'; 8 | 9 | /* MainTab */ 10 | export type MainTabParamList = { 11 | Articles: undefined; 12 | UserMenu: undefined; 13 | }; 14 | export type MainTabNavigationScreenParams = 15 | NavigatorScreenParams; 16 | 17 | export type MainTabNavigationProp = CompositeNavigationProp< 18 | RootStackNavigationProp, 19 | BottomTabNavigationProp 20 | >; 21 | export type MainTabRouteProp = RouteProp; 22 | 23 | /* RootStack */ 24 | export type RootStackParamList = { 25 | MainTab: MainTabNavigationScreenParams; 26 | Article: { 27 | id: number; 28 | }; 29 | Register: undefined; 30 | Login: undefined; 31 | MyArticles: undefined; 32 | Write: { 33 | articleId?: number; 34 | }; 35 | }; 36 | export type RootStackNavigationProp = 37 | NativeStackNavigationProp; 38 | -------------------------------------------------------------------------------- /storages/authStorage.ts: -------------------------------------------------------------------------------- 1 | import AsyncStorage from '@react-native-async-storage/async-storage'; 2 | import {AuthResult} from '../api/types'; 3 | 4 | const key = 'auth'; 5 | 6 | const authStorage = { 7 | async get() { 8 | const rawData = await AsyncStorage.getItem(key); 9 | if (!rawData) { 10 | return null; 11 | } 12 | try { 13 | const data: AuthResult = JSON.parse(rawData); 14 | return data; 15 | } catch (e) { 16 | return null; 17 | } 18 | }, 19 | set(authResult: AuthResult) { 20 | return AsyncStorage.setItem(key, JSON.stringify(authResult)); 21 | }, 22 | clear() { 23 | return AsyncStorage.removeItem(key); 24 | }, 25 | }; 26 | 27 | export default authStorage; 28 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "compilerOptions": { 4 | /* Basic Options */ 5 | "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 6 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 7 | "lib": ["es2017"], /* Specify library files to be included in the compilation. */ 8 | "allowJs": true, /* Allow javascript files to be compiled. */ 9 | // "checkJs": true, /* Report errors in .js files. */ 10 | "jsx": "react-native", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 11 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 12 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 13 | // "outFile": "./", /* Concatenate and emit output to single file. */ 14 | // "outDir": "./", /* Redirect output structure to the directory. */ 15 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 16 | // "removeComments": true, /* Do not emit comments to output. */ 17 | "noEmit": true, /* Do not emit outputs. */ 18 | // "incremental": true, /* Enable incremental compilation */ 19 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 20 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 21 | "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 22 | 23 | /* Strict Type-Checking Options */ 24 | "strict": true, /* Enable all strict type-checking options. */ 25 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 26 | // "strictNullChecks": true, /* Enable strict null checks. */ 27 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 28 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 29 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 30 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 31 | 32 | /* Additional Checks */ 33 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 34 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 35 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 36 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 37 | 38 | /* Module Resolution Options */ 39 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 40 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 41 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 42 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 43 | // "typeRoots": [], /* List of folders to include type definitions from. */ 44 | // "types": [], /* Type declaration files to be included in compilation. */ 45 | "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 46 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 47 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 48 | "skipLibCheck": false /* Skip type checking of declaration files. */ 49 | 50 | /* Source Map Options */ 51 | // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 52 | // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ 53 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 54 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 55 | 56 | /* Experimental Options */ 57 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 58 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 59 | }, 60 | "exclude": [ 61 | "node_modules", "babel.config.js", "metro.config.js", "jest.config.js" 62 | ] 63 | } 64 | --------------------------------------------------------------------------------