Add Ads (#257)

* basic ads implementation on android

* add revoke consent button

* add ads to pro version screen

* add com.google.android.gms.ads.APPLICATION_ID to manifest

* add permission instead of application id to fix play store error while
releasing

* fix bug in displaying ad

* remove console.error

android/app/build.gradle

@@ -119,7 +119,7 @@ dependencies {
     implementation 'androidx.navigation:navigation-fragment:2.0.0'
     implementation 'androidx.navigation:navigation-ui:2.0.0'
     implementation 'com.google.firebase:firebase-config:19.2.0'
-    implementation 'com.google.firebase:firebase-analytics:17.2.2'
+    implementation 'com.google.firebase:firebase-analytics:20.1.2'
     implementation 'com.google.firebase:firebase-ml-vision:24.0.2'
     implementation "com.google.guava:guava:29.0-android"
     implementation 'com.google.android.flexbox:flexbox:3.0.0'

android/app/proguard-rules.pro

@@ -8,3 +8,4 @@
 #   http://developer.android.com/guide/developing/tools/proguard.html
 
 # Add any project specific keep options here:
+-keep class com.google.android.gms.internal.consent_sdk.** { *; }

android/app/src/main/AndroidManifest.xml

@@ -72,12 +72,12 @@
   <meta-data
     android:name="firebase_analytics_collection_deactivated"
     android:value="@bool/FIREBASE_ANALYTICS_DEACTIVATED" />
-
   <uses-permission android:name="android.permission.CAMERA" />
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+  <uses-permission android:name="com.google.android.gms.permission.AD_ID"/>
 
   <uses-feature
     android:name="android.hardware.camera"

app.json

@@ -1,4 +1,11 @@
 {
   "name": "croma",
-  "displayName": "croma"
+  "displayName": "croma",
+  "react-native-google-mobile-ads": {
+    "android_app_id": "ca-app-pub-6847037498271557~7057578612",
+    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
+    "delay_app_measurement_init": true,
+    "user_tracking_usage_description": "This identifier will be used to deliver personalized ads to you."
+
+  }
 }

components/HamburgerMenu.js

@@ -100,7 +100,7 @@ const HamburgerMenu = (props) => {
               <Text style={styles.textAreaMenuItem}>{t('Explore Palettes')}</Text>
             </View>
           </TouchableOpacity>
-          <TouchableOpacity
+          {Platform.OS == 'ios' && <TouchableOpacity
             style={styles.menuItem}
             onPress={async () => {
               logEvent('hm_palette_library');
@@ -113,6 +113,7 @@ const HamburgerMenu = (props) => {
               <Text style={styles.textAreaMenuItem}>{t('Palette Library')}</Text>
             </View>
           </TouchableOpacity>
+          }
           {
             <MenuLink
               id={'rate-us'}
@@ -182,6 +183,22 @@ const HamburgerMenu = (props) => {
               </View>
             </TouchableOpacity>
           )}
+          {(Platform.OS == 'android') && (
+            <TouchableOpacity
+              style={styles.menuItem}
+              onPress={async () => {
+                logEvent('hm_setting');
+                navigate('UserProfile');
+                props.toggleSideMenu();
+              }}>
+              <View style={styles.menuItemView}>
+                <View style={{ ...styles.menuIcon }}>
+                  <MaterialIcons name="settings" style={styles.icon} />
+                </View>
+                <Text style={[styles.textAreaMenuItem]}>{t('Setting')}</Text>
+              </View>
+            </TouchableOpacity>
+          )}
         </View>
       </ScrollView>
     </SafeAreaView>

package.json

@@ -42,6 +42,7 @@
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "^2.19.0",
     "react-native-get-random-values": "^1.11.0",
+    "react-native-google-mobile-ads": "^14.2.5",
     "react-native-iap": "^12.15.2",
     "react-native-image-picker": "^7.1.2",
     "react-native-linear-gradient": "^2.8.3",

screens/ChatSessionScreen.js

@@ -7,7 +7,8 @@ import {
   TextInput,
   ActivityIndicator,
   Text,
-  ImageBackground
+  ImageBackground,
+  Platform
 } from 'react-native';
 import Colors from '../constants/Styles';
 import React, { useState, useEffect, useRef } from 'react';
@@ -18,16 +19,15 @@ import CromaButton from '../components/CromaButton';
 import useChatSession from '../hooks/useChatSession';
 import useApplicationStore from '../hooks/useApplicationStore';
 import GridActionButton from '../components/GridActionButton';
+import mobileAds, { BannerAd, BannerAdSize, TestIds, AdsConsent } from 'react-native-google-mobile-ads';
 
-// eslint-disable-next-line no-undef
 const bgImage = require('../assets/images/colorful_background.jpg');
 
 const ChatSessionScreen = (props) => {
   const { route, navigation } = props;
-
   const [inputText, setInputText] = useState('');
   const scrollViewRef = useRef();
-
+  const [mobileAdConsent, setMobileAdConsent] = useState(false);
   const { pro } = useApplicationStore();
   const { messages, isLoading, isCreatingSession, error, createSession, followUpSession } =
     useChatSession(route.params?.messages);
@@ -36,6 +36,27 @@ const ChatSessionScreen = (props) => {
     logEvent('chat_session_screen');
   }, []);
 
+  // Request ads consent when the component mounts
+  useEffect(() => {
+    async function requestConsent() {
+      const consentInfo = await AdsConsent.requestInfoUpdate();
+      var canRequestAds = false;
+      if (consentInfo.status === 'REQUIRED') {
+        const adsConsentInfo = await AdsConsent.loadAndShowConsentFormIfRequired();
+        canRequestAds =  adsConsentInfo.canRequestAds;
+      } else {
+        canRequestAds = consentInfo.canRequestAds;
+      }
+      // Initialize ads only if consent is obtained
+      if (canRequestAds) {
+        await mobileAds().initialize();
+      }
+      setMobileAdConsent(canRequestAds);
+    }
+
+    requestConsent();
+  }, []);
+
   const handleSendMessage = async () => {
     const message = {
       chat_session: {
@@ -65,8 +86,9 @@ const ChatSessionScreen = (props) => {
       clearInterval(interval);
     };
   }, [messages]);
+
   function showUnlockPro() {
-    return pro.plan == 'starter' && messages.length >= 2
+    return pro.plan == 'starter' && messages.length >= 2;
   }
 
   return (
@@ -162,6 +184,17 @@ const ChatSessionScreen = (props) => {
               )}
             </>
           )}
+          { pro.plan != 'proPlus' && mobileAdConsent && Platform.OS == 'android' && 
+            <View >
+              <BannerAd
+                unitId={__DEV__ ? TestIds.BANNER : 'ca-app-pub-6847037498271557/2834003395'}
+                size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
+                requestOptions={{
+                  requestNonPersonalizedAdsOnly: true,
+                }}
+              />
+            </View>
+          }
         </View>
       </ImageBackground>
       {messages.length == 0 && <GridActionButton navigation={navigation} />}
@@ -240,45 +273,45 @@ const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: 'transparent',
-    padding: 10,
-    height: 60,
-    paddingTop: 12,
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0
+    margin: 10
   },
   sendButton: {
-    padding: 8,
     backgroundColor: Colors.primary,
-    borderRadius: 8
+    borderRadius: 8,
+    padding: 8,
+    marginLeft: 12
   },
   disableSendButton: {
-    padding: 8,
     backgroundColor: 'gray',
-    borderRadius: 8
+    borderRadius: 8,
+    padding: 8,
+    marginLeft: 12
   },
   textSend: {
     color: 'white',
     fontSize: 16,
-    fontWeight: 'bold',
-    textAlign: 'center'
+    fontWeight: 'bold'
   },
   errorMessageContainer: {
-    marginLeft: 10,
-    marginRight: 10,
-    backgroundColor: Colors.primary,
-    borderRadius: 8
+    padding: 20,
+    backgroundColor: 'rgba(255,0,0,0.2)',
+    borderRadius: 8,
+    margin: 10
+  },
+  errorMessageTitle: {
+    fontWeight: 'bold'
   },
   errorMessageText: {
-    color: 'white',
-    padding: 5
+    marginTop: 5
   },
-  errorMessageTitle: {
-    color: 'white',
-    paddingLeft: 5,
-    paddingRight: 5
+  loadingContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1
+  },
+  loadingText: {
+    marginTop: 10,
+    fontSize: 18
   }
 });
 

screens/ProVersionScreen.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ScrollView, StyleSheet, Text, TouchableOpacity, View, Linking } from 'react-native';
+import { ScrollView, StyleSheet, Text, TouchableOpacity, View, Linking, Platform } from 'react-native';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { useTranslation } from 'react-i18next';
 import Colors, { Spacing } from '../constants/Styles';
@@ -71,7 +71,7 @@ export default function ProVersionScreen({ route }) {
     },
     {
       id: 2,
-      feature: t('Extract colors from images and camera'),
+      feature: t('Extract colors from images' + Platform.OS == 'android' ? ' and camera' : ''),
       starter: true,
       pro: true,
       proPlus: true
@@ -85,13 +85,6 @@ export default function ProVersionScreen({ route }) {
       proPlus: true
     },
     { id: 5, feature: t('View and convert color codes'), starter: true, pro: true, proPlus: true },
-    {
-      id: 6,
-      feature: t('Access Material Design, CSS, and Tailwind palettes'),
-      starter: true,
-      pro: true,
-      proPlus: true
-    },
     { id: 7, feature: t('Download palettes as PNG'), starter: true, pro: true, proPlus: true },
     {
       id: 8,
@@ -114,6 +107,13 @@ export default function ProVersionScreen({ route }) {
       pro: true,
       proPlus: true
     },
+    {
+      id: 12,
+      feature: t('Ads free experience'),
+      starter: false,
+      pro: false,
+      proPlus: true
+    },
     { id: 11, feature: t('AI color picker'), starter: false, pro: false, proPlus: true },
     {
       id: 12,