feat: enhanced iOS installation + update Examples

KakaoLoginExample/.eslintrc.js

@@ -1,30 +1,4 @@
 module.exports = {
-  "extends": "standard",
-  "env": {
-    "browser": true
-  },
-  "rules": {
-    "no-unused-expressions": 0,
-    "no-unused-vars": 0,
-    "no-return-assign": 0,
-    "comma-dangle": ["error", {
-      "arrays": "only-multiline",
-      "objects": "only-multiline",
-      "imports": "only-multiline",
-      "exports": "only-multiline",
-      "functions": "only-multiline",
-    }],
-    "semi": [2, "always"],
-    "arrow-parens": ["error", "always"],
-    "space-before-function-paren": ["error", "never"],
-    "standard/object-curly-even-spacing": 0,
-    "no-new-object": "error",
-    "no-array-constructor": "error",
-    "no-cond-assign": 0,
-  },
-  "plugins": [
-    "standard",
-    "promise",
-  ],
-  "parser": "babel-eslint"
-};
+  root: true,
+  extends: '@react-native-community',
+};

KakaoLoginExample/.flowconfig

@@ -11,10 +11,20 @@
 ; Ignore duplicate module providers
 ; For RN Apps installed via npm, "Libraries" folder is inside
 ; "node_modules/react-native" but in the source repo it is in the root
-.*/Libraries/react-native/React.js
+node_modules/react-native/Libraries/react-native/React.js
 
 ; Ignore polyfills
-.*/Libraries/polyfills/.*
+node_modules/react-native/Libraries/polyfills/.*
+
+; These should not be required directly
+; require from fbjs/lib instead: require('fbjs/lib/warning')
+node_modules/warning/.*
+
+; Flow doesn't support platforms
+.*/Libraries/Utilities/HMRLoadingView.js
+
+[untyped]
+.*/node_modules/@react-native-community/cli/.*/.*
 
 [include]
 
@@ -25,7 +35,30 @@ node_modules/react-native/flow/
 [options]
 emoji=true
 
+esproposal.optional_chaining=enable
+esproposal.nullish_coalescing=enable
+
+module.file_ext=.js
+module.file_ext=.json
+module.file_ext=.ios.js
+
 module.system=haste
+module.system.haste.use_name_reducers=true
+# get basename
+module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
+# strip .js or .js.flow suffix
+module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
+# strip .ios suffix
+module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
+module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
+module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
+module.system.haste.paths.blacklist=.*/__tests__/.*
+module.system.haste.paths.blacklist=.*/__mocks__/.*
+module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
+module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/RNTester/.*
+module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/IntegrationTests/.*
+module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/react-native/react-native-implementation.js
+module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
 
 munge_underscores=true
 
@@ -35,14 +68,32 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
-suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-7]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-7]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
-unsafe.enable_getters_and_setters=true
+[lints]
+sketchy-null-number=warn
+sketchy-null-mixed=warn
+sketchy-number=warn
+untyped-type-import=warn
+nonstrict-import=warn
+deprecated-type=warn
+unsafe-getters-setters=warn
+inexact-spread=warn
+unnecessary-invariant=warn
+signature-verification-failure=warn
+deprecated-utility=error
+
+[strict]
+deprecated-type
+nonstrict-import
+sketchy-null
+unclear-type
+unsafe-getters-setters
+untyped-import
+untyped-type-import
 
 [version]
-^0.57.0
+^0.98.0

KakaoLoginExample/.gitignore

@@ -51,3 +51,9 @@ buck-out/
 */fastlane/report.xml
 */fastlane/Preview.html
 */fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/

KakaoLoginExample/.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  bracketSpacing: false,
+  jsxBracketSameLine: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

KakaoLoginExample/App.js

@@ -1,96 +1,120 @@
-import React, { Component } from 'react';
-import {
-  Platform,
-  Alert,
-  StyleSheet,
-  Text,
-  View,
-  NativeModules,
-} from 'react-native';
+import React, {useState} from 'react';
+import {Platform, StyleSheet, Text, View, Image} from 'react-native';
 
-// const { RNKakaoLogins } = NativeModules;
 import RNKakaoLogins from 'react-native-kakao-logins';
 import NativeButton from 'apsl-react-native-button';
 
-export default class App extends Component<}{}> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isKakaoLogging: false,
-      token: 'token has not fetched',
-    };
-    if (!RNKakaoLogins) {
-      console.log('Not Linked');
-    }
-  }
+if (!RNKakaoLogins) {
+  console.error('Module is Not Linked');
+}
+
+const logCallback = (log, callback) => {
+  console.log(log);
+  callback;
+};
+
+const TOKEN_EMPTY = 'token has not fetched';
+const PROFILE_EMPTY = {
+  id: 'profile has not fetched',
+  email: 'profile has not fetched',
+  profile_image_path: null,
+};
+
+export default function App() {
+  const [loginLoading, setLoginLoading] = useState(false);
+  const [logoutLoading, setLogoutLoading] = useState(false);
+  const [profileLoading, setProfileLoading] = useState(false);
+
+  const [token, setToken] = useState(TOKEN_EMPTY);
+  const [profile, setProfile] = useState(PROFILE_EMPTY);
+
+  const kakaoLogin = () => {
+    logCallback('Login Start', setLoginLoading(true));
 
-  // 카카오 로그인 시작.
-  kakaoLogin() {
-    console.log('   kakaoLogin   ');
     RNKakaoLogins.login((err, result) => {
-      if (err){
-        Alert.alert('error', err.toString());
-        return;
+      if (err) {
+        return logCallback(
+          `Login Failed:${err.toString()}`,
+          setLoginLoading(false),
+        );
       }
-      Alert.alert('result', result);
+      setToken(result.token);
+      logCallback(`Login Finished:${result.token}`, setLoginLoading(false));
     });
-  }
+  };
+
+  const kakaoLogout = () => {
+    logCallback('Logout Start', setLogoutLoading(true));
 
-  kakaoLogout() {
-    console.log('   kakaoLogout   ');
     RNKakaoLogins.logout((err, result) => {
-      if (err){
-        Alert.alert('error', err.toString());
-        return;
+      if (err) {
+        return logCallback(
+          `Logout Failed:${err.toString()}`,
+          setLogoutLoading(false),
+        );
       }
-      Alert.alert('result', result);
+      setToken(TOKEN_EMPTY);
+      setProfile(PROFILE_EMPTY);
+      logCallback(`Logout Finished:${result}`, setLogoutLoading(false));
     });
-  }
+  };
+
+  const getProfile = () => {
+    logCallback('Get Profile Start', setProfileLoading(true));
 
-  // 로그인 후 내 프로필 가져오기.
-  getProfile() {
-    console.log('getKakaoProfile');
     RNKakaoLogins.getProfile((err, result) => {
-      if (err){
-        Alert.alert('error', err.toString());
-        return;
+      if (err) {
+        return logCallback(
+          `Get Profile Failed:${err.toString()}`,
+          setProfileLoading(false),
+        );
       }
-      Alert.alert('result', result);
+      setProfile(result);
+      logCallback(
+        `Get Profile Finished:${JSON.stringify(result)}`,
+        setProfileLoading(false),
+      );
     });
-  }
+  };
+
+  const {id, email, profile_image_path: photo} = profile;
 
-  render() {
-    return (
-      <View style={ styles.container }>
-        <View style={ styles.header }>
-          <Text>LOGIN</Text>
-        </View>
-        <View style={ styles.content }>
-          <NativeButton
-            isLoading={this.state.isNaverLoggingin}
-            onPress={() => this.kakaoLogin()}
-            activeOpacity={0.5}
-            style={styles.btnKakaoLogin}
-            textStyle={styles.txtNaverLogin}
-          >LOGIN</NativeButton>
-          <Text>{this.state.token}</Text>
-          <NativeButton
-            onPress={() => this.kakaoLogout()}
-            activeOpacity={0.5}
-            style={styles.btnKakaoLogin}
-            textStyle={styles.txtNaverLogin}
-          >Logout</NativeButton>
-          <NativeButton
-            isLoading={this.state.isKakaoLogging}
-            onPress={() => this.getProfile()}
-            activeOpacity={0.5}
-            style={styles.btnKakaoLogin}
-            textStyle={styles.txtNaverLogin}
-          >getProfile</NativeButton>
-        </View>
+  return (
+    <View style={styles.container}>
+      <View style={styles.profile}>
+        <Image style={styles.profilePhoto} source={{uri: photo}} />
+        <Text>{`id : ${id}`}</Text>
+        <Text>{`email : ${email}`}</Text>
+      </View>
+      <View style={styles.content}>
+        <Text style={styles.token}>{token}</Text>
+        <NativeButton
+          isLoading={loginLoading}
+          onPress={kakaoLogin}
+          activeOpacity={0.5}
+          style={styles.btnKakaoLogin}
+          textStyle={styles.txtKakaoLogin}>
+          LOGIN
+        </NativeButton>
+        <NativeButton
+          isLoading={logoutLoading}
+          onPress={kakaoLogout}
+          activeOpacity={0.5}
+          style={styles.btnKakaoLogin}
+          textStyle={styles.txtKakaoLogin}>
+          Logout
+        </NativeButton>
+        <NativeButton
+          isLoading={profileLoading}
+          onPress={getProfile}
+          activeOpacity={0.5}
+          style={styles.btnKakaoLogin}
+          textStyle={styles.txtKakaoLogin}>
+          getProfile
+        </NativeButton>
       </View>
-    );
-  }
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -101,24 +125,36 @@ const styles = StyleSheet.create({
     paddingTop: Platform.OS === 'ios' ? 24 : 0,
     backgroundColor: 'white',
   },
-  header: {
-    flex: 8.8,
-    flexDirection: 'row',
-    alignSelf: 'stretch',
-    justifyContent: 'center',
+  profile: {
+    flex: 4,
     alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  profilePhoto: {
+    width: 120,
+    height: 120,
+    borderWidth: 1,
+    borderColor: 'black',
   },
   content: {
-    flex: 87.5,
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignSelf: 'stretch',
+    flex: 6,
+    justifyContent: 'flex-start',
     alignItems: 'center',
   },
   title: {
     fontSize: 24,
     fontWeight: 'bold',
   },
+  token: {
+    width: 200,
+    fontSize: 12,
+    padding: 5,
+    borderRadius: 8,
+    marginVertical: 20,
+    backgroundColor: 'grey',
+    color: 'white',
+    textAlign: 'center',
+  },
   btnKakaoLogin: {
     height: 48,
     width: 240,
@@ -127,7 +163,7 @@ const styles = StyleSheet.create({
     borderRadius: 0,
     borderWidth: 0,
   },
-  txtNaverLogin: {
+  txtKakaoLogin: {
     fontSize: 16,
     color: '#3d3d3d',
   },