feat : social login & speech to text

android/.project

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>android</name>
+	<comment>Project android created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+	<filteredResources>
+		<filter>
+			<id>1630889838117</id>
+			<name></name>
+			<type>30</type>
+			<matcher>
+				<id>org.eclipse.core.resources.regexFilterMatcher</id>
+				<arguments>node_modules|.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
+</projectDescription>

android/.settings/org.eclipse.buildship.core.prefs

@@ -0,0 +1,13 @@
+arguments=
+auto.sync=false
+build.scans.enabled=false
+connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
+connection.project.dir=
+eclipse.preferences.version=1
+gradle.user.home=
+java.home=/Library/Java/JavaVirtualMachines/jdk-11.0.1.jdk/Contents/Home
+jvm.arguments=
+offline.mode=false
+override.workspace.settings=true
+show.console.view=true
+show.executions.view=true

android/app/build.gradle

@@ -3,7 +3,7 @@ apply plugin: "com.android.application"
 import com.android.build.OutputFile
 
 /**
- * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
+ * The react.gradle file registers a task for feach build variant (e.g. bundleDebugJsAndAssets
  * and bundleReleaseJsAndAssets).
  * These basically call `react-native bundle` with the correct arguments during the Android build
  * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
@@ -182,6 +182,13 @@ android {
 
         }
     }
+    // naver login error check out
+    lintOptions {
+        checkReleaseBuilds false
+        // Or, if you prefer, you can continue to check for errors in release builds,
+        // but continue the build even when errors are found:
+        abortOnError false
+    }
 }
 
 dependencies {
@@ -190,6 +197,8 @@ dependencies {
     implementation "com.facebook.react:react-native:+"  // From node_modules
 
     implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
+    // naver login
+    implementation project(':react-native-seoul-naver-login')
 
     debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
       exclude group:'com.facebook.fbjni'
@@ -212,7 +221,6 @@ dependencies {
         implementation jscFlavor
     }
     compile project(':@react-native-community_cameraroll')
-
 }
 
 // Run this once to be able to run the application with BUCK

android/app/src/main/AndroidManifest.xml

@@ -5,6 +5,11 @@
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+\   <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
     <application
       android:requestLegacyExternalStorage="true"
       android:name=".MainApplication"
@@ -24,5 +29,6 @@
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
       </activity>
+
     </application>
 </manifest>

android/app/src/main/java/com/marimo/MainApplication.java

@@ -11,6 +11,7 @@
 import com.facebook.soloader.SoLoader;
 import java.lang.reflect.InvocationTargetException;
 import java.util.List;
+import com.dooboolab.naverlogin.RNNaverLoginPackage;
 
 public class MainApplication extends Application implements ReactApplication {
 
@@ -25,6 +26,7 @@ public boolean getUseDeveloperSupport() {
         protected List<ReactPackage> getPackages() {
           @SuppressWarnings("UnnecessaryLocalVariable")
           List<ReactPackage> packages = new PackageList(this).getPackages();
+          //packages.add(new RNNaverLoginPackage());
           // Packages that cannot be autolinked yet can be added manually here, for example:
           // packages.add(new MyReactNativePackage());
           return packages;

android/settings.gradle

@@ -5,4 +5,6 @@ apply from: file("../node_modules/@react-native-community/cli-platform-android/n
 include ':app'
 include ':@react-native-community_cameraroll'
 project(':@react-native-community_cameraroll').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-community/cameraroll/android')
-
+// naver login
+include ':react-native-seoul-naver-login'
+project(':react-native-seoul-naver-login').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-seoul/naver-login/android')

ios/Podfile.lock

@@ -1,5 +1,7 @@
 PODS:
   - boost-for-react-native (1.63.0)
+  - BVLinearGradient (2.5.6):
+    - React
   - CocoaAsyncSocket (7.6.5)
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.64.2)
@@ -58,6 +60,7 @@ PODS:
     - FlipperKit/FlipperKitNetworkPlugin
   - glog (0.3.5)
   - libevent (2.1.12)
+  - naveridlogin-sdk-ios (4.1.3)
   - OpenSSL-Universal (1.1.180)
   - RCT-Folly (2020.01.13.00):
     - boost-for-react-native
@@ -332,6 +335,9 @@ PODS:
     - React
   - RNGestureHandler (1.10.3):
     - React-Core
+  - RNNaverLogin (2.1.1):
+    - naveridlogin-sdk-ios (~> 4.1)
+    - React
   - RNReanimated (2.2.0):
     - DoubleConversion
     - FBLazyVector
@@ -369,6 +375,7 @@ PODS:
     - Yoga (~> 1.14)
 
 DEPENDENCIES:
+  - BVLinearGradient (from `../node_modules/react-native-linear-gradient`)
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
   - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`)
@@ -422,6 +429,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - "RNNaverLogin (from `../node_modules/@react-native-seoul/naver-login`)"
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -438,10 +446,13 @@ SPEC REPOS:
     - Flipper-RSocket
     - FlipperKit
     - libevent
+    - naveridlogin-sdk-ios
     - OpenSSL-Universal
     - YogaKit
 
 EXTERNAL SOURCES:
+  BVLinearGradient:
+    :path: "../node_modules/react-native-linear-gradient"
   DoubleConversion:
     :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
   FBLazyVector:
@@ -506,6 +517,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/masked-view"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
+  RNNaverLogin:
+    :path: "../node_modules/@react-native-seoul/naver-login"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
@@ -515,6 +528,7 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
+  BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: e686045572151edef46010a6f819ade377dfeb4b
@@ -528,6 +542,7 @@ SPEC CHECKSUMS:
   FlipperKit: 8a20b5c5fcf9436cac58551dc049867247f64b00
   glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
+  naveridlogin-sdk-ios: b9d7c20677981177ed994ecb1c8c2b49f223277d
   OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
   RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c
   RCTRequired: 6d3e854f0e7260a648badd0d44fc364bc9da9728
@@ -557,11 +572,12 @@ SPEC CHECKSUMS:
   ReactCommon: 149906e01aa51142707a10665185db879898e966
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
+  RNNaverLogin: 2dcf003d4f52f8d5c15c3a5fadaa20b52352f4fe
   RNReanimated: 9c13c86454bfd54dab7505c1a054470bfecd2563
   RNScreens: 01ab149b5dd5c27f5ff26741b1d2bdf2cee1af35
   Yoga: 575c581c63e0d35c9a83f4b46d01d63abc1100ac
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 680823391fa97d6bdbaf6c0267e065489073b96f
+PODFILE CHECKSUM: c0214dfd4746606d8eb55e9df76e9add0e29f7af
 
-COCOAPODS: 1.10.2
+COCOAPODS: 1.11.0

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@react-native-community/cameraroll": "^4.0.4",
     "@react-native-community/masked-view": "^0.1.11",
+    "@react-native-seoul/naver-login": "^2.1.1",
     "@react-navigation/bottom-tabs": "^6.0.2",
     "@react-navigation/native": "^6.0.2",
     "@react-navigation/native-stack": "^6.0.4",
@@ -27,8 +28,10 @@
     "react-native-reanimated": "^2.2.0",
     "react-native-safe-area-context": "^3.3.0",
     "react-native-screens": "^3.5.0",
+    "react-native-voice": "^0.3.0",
     "react-navigation": "^4.4.4",
-    "react-navigation-stack": "^2.10.4"
+    "react-navigation-stack": "^2.10.4",
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",

src/screens/GameScreen.js

@@ -1,28 +1,71 @@
-import * as React from 'react';
-import {
-  View,
-  Text,
-  Stylesheet,
-  Button,
-  Image,
-  TouchableOpacity,
-} from 'react-native';
-import SpellingGame from './SpellingGame';
-
-const GameScreen = ({navigation}) => {
+import React, {useState, useEffect} from 'react';
+import Styled from 'styled-components/native';
+import Voice from 'react-native-voice';
+import {Text} from 'react-native';
+
+const Container = Styled.View`
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  background-color: #f5fcff;
+`;
+const ButtonRecord = Styled.Button``;
+const VoiceText = Styled.Text`
+  margin: 32px;
+`;
+
+const GameScreen = () => {
+  const [isRecord, setIsRecord] = useState(false);
+  const [text, setText] = useState('');
+  const buttonLabel = isRecord ? 'Stop' : 'Start';
+  const voiceLabel = text
+    ? text
+    : isRecord
+    ? 'Say something...'
+    : 'press Start button';
+
+  const _onSpeechStart = () => {
+    console.log('onSpeechStart');
+    setText('');
+  };
+  const _onSpeechEnd = () => {
+    console.log('onSpeechEnd');
+  };
+  const _onSpeechResults = event => {
+    console.log('onSpeechResults');
+    setText(event.value[0]);
+  };
+  const _onSpeechError = event => {
+    console.log('_onSpeechError');
+    console.log(event.error);
+  };
+
+  const _onRecordVoice = () => {
+    if (isRecord) {
+      Voice.stop();
+    } else {
+      Voice.start('ko-KR');
+    }
+    setIsRecord(!isRecord);
+  };
+
+  useEffect(() => {
+    Voice.onSpeechStart = _onSpeechStart;
+    Voice.onSpeechEnd = _onSpeechEnd;
+    Voice.onSpeechResults = _onSpeechResults;
+    Voice.onSpeechError = _onSpeechError;
+
+    return () => {
+      Voice.destroy().then(Voice.removeAllListeners);
+    };
+  }, []);
+
   return (
-    <View style={{flex: 1, zIndex: -1, display: 'flex'}}>
-      <TouchableOpacity onPress={() => navigation.navigate('SpellingGame')}>
-        <Image
-          style={{
-            width: '100%',
-            height: '100%',
-          }}
-          source={require('../assets/game(ver3).png')}
-          resizeMode="cover"
-        />
-      </TouchableOpacity>
-    </View>
+    <Container>
+      <VoiceText>{voiceLabel}</VoiceText>
+      <Text>{text ? `${text}` : '단어 없음..'}</Text>
+      <ButtonRecord onPress={_onRecordVoice} title={buttonLabel} />
+    </Container>
   );
 };