├── .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 |
--------------------------------------------------------------------------------