Integración con React Native + Expo

npx create-expo-app@latest

brew install watchman

npx expo install expo-dev-client

npx expo run:android

npx expo start

fun ReadableArray.toStringArray(): Array<String> {
    val array = arrayListOf<String>()
    for (i in 0 until size()) {
        if (getType(i) == ReadableType.String) {
            array.add(getString(i) ?: "") // antes era 'array.add(getString(i))'
        }
    }
    return array.toTypedArray()
}

include ':emma-react-native-sdk'  
project(':emma-react-native-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/emma-react-native-sdk/android')

dependencies {
	implementation project(':emma-react-native-sdk')
}

buildscript {
    dependencies {
        classpath('com.android.tools.build:gradle:8.3.0')
        classpath('com.google.gms:google-services:4.4.1')
    }
}

allprojects {
    repositories {
        // Repositorio Amazon AWS
        maven {
            url "https://emma-apk.s3.amazonaws.com"
            content {
                includeGroup "io.emma"
            }
        }

        // Repositorio privado
        maven {
            url "https://repo.emma.io/emma"
            content {
                includeGroup "io.emma"
            }
        }
    }
}

keytool -list -v \
-keystore ~/.android/debug.keystore \
-alias androiddebugkey \
-storepass android \
-keypass android

import EmmaSdk from 'emma-react-native-sdk';
import { useEffect } from 'react';

export default function HomeScreen() {
	// Parámetros de inicio de sesión
	const startSessionParams = {
	    sessionKey: '<EMMA_KEY>',
	    isDebug: true,
	    customPowlinkDomains: ['<POWLINK_SCHEME>'],
	    customShortPowlinkDomains: ['SHORT_POWLINK_SCHEME'],
	    trackScreenEvents: true,
	};
	
	useEffect(() => {
    const handleStartSession = async () => {
      console.log('Iniciando sesión');
      try {
        await EmmaSdk.startSession(startSessionParams);
        console.log('Sesión iniciada en ', Platform.OS);
        
      } catch (err) {
        console.error('Sesión fallida en ', err);
      }
    };

    handleStartSession();
  }, []);
}

apply plugin: 'com.google.gms.google-services'

dependencies {
    implementation 'com.google.firebase:firebase-messaging:24.1.1'
    implementation platform('com.google.firebase:firebase-bom:33.15.0')
    implementation("io.emma:eMMaSDK:4.15.5") // usar la última versión disponible
    implementation project(':emma-react-native-sdk')
    implementation('com.google.firebase:firebase-analytics')
}

<manifest>
	<application>
		<service
            android:name="io.emma.android.push.EMMAFcmMessagingService"
            android:enabled="true"
            android:exported="false">
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>	</application>
</manifest>

import android.app.Application
import android.content.res.Configuration
import android.util.Log
import androidx.core.content.ContextCompat
import com.google.firebase.messaging.FirebaseMessaging
import com.google.android.gms.tasks.OnCompleteListener
import io.emma.android.EMMA
import io.emma.android.model.EMMAPushOptions
import io.emma.android.utils.EMMALog

class MainApplication : Application(), ReactApplication {

    override fun onCreate() {
        super.onCreate()
        setPushConfiguration()          // Config de push específico EMMA
        setFirebasePushConfiguration()  // Config push de Firebase
    }

    private fun setPushConfiguration() {
        try {
            val pushOpt =
                EMMAPushOptions.Builder(MainActivity::class.java, R.drawable.notification_icon)
                    .setNotificationColor(ContextCompat.getColor(this, R.color.yellow))
                    .setNotificationChannelName("Mi custom channel")
                    .build()

            EMMA.getInstance().startPushSystem(pushOpt)
            Log.v("Pascual", "Configurando los mensajes push")
        } catch (e: Exception) {
            Log.w("Pascual", "No se han podido configurar los mensajes push")
        }
    }

    private fun setFirebasePushConfiguration() {
        FirebaseMessaging.getInstance().token.addOnCompleteListener(OnCompleteListener { task ->
            if (!task.isSuccessful) {
                Log.w(TAG, "Fetching FCM registration token failed", task.exception)
                return@OnCompleteListener
            }

            val token = task.result
            val msg = getString(R.string.msg_token_fmt, token)
            Log.d(TAG, msg)
        })
    }
}

import android.content.ContentValues  
import android.util.Log  
import com.google.firebase.messaging.FirebaseMessagingService  
  
class FirebaseDispatcher : FirebaseMessagingService() {  
  
    override fun onNewToken(token: String) {  
        Log.d(ContentValues.TAG, "Refreshed token: $token")  
        sendRegistrationToServer(token)  
    }  
  
    private fun sendRegistrationToServer(token: String?) {  
        Log.d(ContentValues.TAG, "sendRegistrationTokenToServer($token)")  
    }  
}

import android.util.Log   
import io.emma.android.EMMA  
import io.emma.android.interfaces.EMMAUserInfoInterface  
import io.emma.android.utils.EMMALog  
import org.json.JSONObject 
  
class MainActivity : ReactActivity(), EMMAUserInfoInterface {  
	override fun onCreate(savedInstanceState: Bundle?) {    
		super.onCreate(null)  
		EMMA.getInstance().requestNotificationPermission()  
		EMMALog.v("Notificaciones activadas: ${EMMA.getInstance().areNotificationsEnabled()}") 
	}    
	
	override fun OnGetUserInfo(userInfo: JSONObject?) {  
        userInfo?.let { info: JSONObject ->  info.toString() }    
    }  
  
    override fun OnGetUserID(id: Int) {  
        // Not implemented  
    }  
}

npx expo run:android

import EmmaSdk from 'emma-react-native-sdk';
import { useEffect, useState } from 'react';

export default function HomeScreen() {
    const [notificationsEnabled, setNotificationsEnabled] = useState<boolean | null>(null);
	
	const handleStartPush = async () => {
        console.log('Iniciando configuración de push');
        try {
            EmmaSdk.startPush({
                classToOpen: 'com.pascual1.expomanagedapp.MainActivity',
                iconResource: 'notification_icon',
            });
            console.log('Mensajes push configurados');
        } catch (err) {
            console.error('Error al configurar los mensajes push:', err);
        }
    };

    useEffect(() => {
        EmmaSdk.requestNotificationPermission();
        handleStartSession();
        handleStartPush();

        const checkNotifications = async () => {
            try {
                const isEnabled = await EmmaSdk.areNotificationsEnabled();
                setNotificationsEnabled(isEnabled);
                console.log('Notifications activated: ', isEnabled);
            } catch (error) {
                console.error('Error checking notifications: ', error);
            }
        };

        checkNotifications();
    }, []);

    return (
        <ParallaxScrollView
            headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
            headerImage={
                <Image
                    source={require('@/assets/images/partial-react-logo.png')}
                    style={styles.reactLogo}
                />
            }>
            <ThemedView style={styles.titleContainer}>
                <ThemedText type="title">Welcomeeeeee!</ThemedText>
                <HelloWave />
            </ThemedView>

            <ThemedView style={styles.stepContainer}>
                <ThemedText type="subtitle">Notificaciones push</ThemedText>
                <ThemedText>
                    Notificaciones activadas:{' '}
                    {notificationsEnabled !== null ? notificationsEnabled.toString() : 'Cargando...'}
                </ThemedText>
            </ThemedView>

            <ThemedView style={styles.stepContainer}>
                <ThemedText type="subtitle">Paso 1: Edita</ThemedText>
                <ThemedText>
                    Edita <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> para ver cambios. Presiona{' '}
                    <ThemedText type="defaultSemiBold">
                        {Platform.select({
                            ios: 'cmd + d',
                            android: 'cmd + m',
                            web: 'F12',
                        })}
                    </ThemedText>{' '}
                    para abrir el menú de desarrollo.
                </ThemedText>
            </ThemedView>

            <ThemedView style={styles.stepContainer}>
                <ThemedText type="subtitle">Paso 2: Explora</ThemedText>
                <ThemedText>
                    {`Toca la pestaña Explore para aprender más sobre esta plantilla.`}
                </ThemedText>
                <Button title="Registrar usuario" onPress={handleRegisterUser} />
                <Button title="Iniciar sesión" onPress={handleLoginUser} />
            </ThemedView>

            <ThemedView style={styles.stepContainer}>
                <ThemedText type="subtitle">Paso 3: Reinicia</ThemedText>
                <ThemedText>
                    {`Cuando estés listo, ejecuta `}
                    <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> para comenzar limpio.
                </ThemedText>
            </ThemedView>
        </ParallaxScrollView>
    );
}

const styles = StyleSheet.create({
    titleContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 8,
    },
    stepContainer: {
        gap: 8,
        marginBottom: 8,
    },
    reactLogo: {
        height: 178,
        width: 290,
        bottom: 0,
        left: 0,
        position: 'absolute',
    },
});

// Listen to deeplink requests
Linking.addEventListener('url', ({ url }) => setDeeplink(url));

// Detect application launchings from a deeplink
const handleInitialDeeplink = () =>
Linking.getInitialURL()
  .then((url) => setDeeplink(url || null))
  .catch(() => setDeeplink(null));

import { Tabs } from 'expo-router';
import React, { useEffect, useState } from 'react';
import { Platform, Linking } from 'react-native';
import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const [deeplink, setDeeplink] = useState<string | null>(null);

  // Detect application launchings from a deeplink
  const handleInitialDeeplink = () =>
    Linking.getInitialURL()
      .then((url) => setDeeplink(url || null))
      .catch(() => setDeeplink(null));

  useEffect(() => {
    // Handle deeplink when app is opened
    handleInitialDeeplink();

    // Listen to deeplink requests while app is open
    const subscription = Linking.addEventListener('url', ({ url }) => {
      setDeeplink(url);
    });

    return () => {
      subscription.remove(); // Clean up on unmount
    };
  }, []);

  return (
    // return implementation here
  );
}

{
	"expo": {
		"android": {
			"adaptiveIcon": {
				"foregroundImage": "./assets/images/adaptive-icon.png",
				"backgroundColor": "#ffffff"
			},
			"edgeToEdgeEnabled": true,
			"package": "com.pascual1.expomanagedapp",
			"intentFilters": [
				{
					"action": "VIEW",
					"data": {
						"scheme": "expocustom",
						"host": "*"
					},
					"category": ["BROWSABLE", "DEFAULT"]
				}
			]
		}	
    }
}

<manifest>
	<application>
		<activity  
			android:name="io.emma.android.activities.EMMADeepLinkActivity"  
			android:exported="true"  
			android:noHistory="true"  
			android:theme="@android:style/Theme.NoDisplay">  
			<intent-filter>  
				<action android:name="android.intent.action.VIEW" />  
				<category android:name="android.intent.category.DEFAULT" />  
				<category android:name="android.intent.category.BROWSABLE" />  
				<data android:scheme="expocustom" />  
			</intent-filter>  
			<intent-filter android:autoVerify="true">  
				<action android:name="android.intent.action.VIEW" />  
				<category android:name="android.intent.category.DEFAULT" />  
				<category android:name="android.intent.category.BROWSABLE" />  
				<data android:host="rnexpo.powlink.io" android:scheme="https" />  
				<data android:host="rne.pwlnk.io" android:scheme="https" />  
			</intent-filter>
			<meta-data        
				android:name="io.emma.DEEPLINK_OPEN_ACTIVITY"  
				android:value="com.pascual1.expomanagedapp.MainActivity" />  
		</activity>
	</application>
</manifest>

import io.emma.android.EMMA  
import io.emma.android.interfaces.EMMAUserInfoInterface

class MainActivity : ReactActivity(), EMMAUserInfoInterface {
	override fun onCreate(savedInstanceState: Bundle?) {   
		super.onCreate(null)
		EMMA.getInstance().checkForRichPushUrl()
	}
}

import { Tabs, useRouter } from 'expo-router';
import React, { useEffect } from 'react';
import { Platform } from 'react-native';
import * as Linking from 'expo-linking';

import { HapticTab } from '@/components/HapticTab';
import { IconSymbol } from '@/components/ui/IconSymbol';
import TabBarBackground from '@/components/ui/TabBarBackground';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const router = useRouter();

  useEffect(() => {
    const handleDeeplink = (url: string | null) => {
      if (!url) return;

      const { scheme, path } = Linking.parse(url);

      // Solo permitir deeplinks con el esquema esperado
      if (scheme !== 'reactexpo') {
        console.warn(`Esquema no válido: ${scheme}`);
        return;
      }

      switch (path) {
        case 'explore':
          router.push('/explore');
          break;
        case 'index':
        case '':
        case undefined:
          router.push('/');
          break;
        default:
          console.warn(`Ruta desconocida recibida por deeplink: ${path}`);
      }
    };

    // Obtener la URL inicial en frío (por ejemplo, desde una notificación)
    Linking.getInitialURL().then(handleDeeplink).catch((err) => {
      console.error('Error obteniendo URL inicial:', err);
    });

    // Suscribirse a eventos en caliente (app ya abierta)
    const subscription = Linking.addEventListener('url', ({ url }) => {
      handleDeeplink(url);
    });

    return () => {
      subscription.remove();
    };
  }, [router]);

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            position: 'absolute',
          },
          default: {},
        }),
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="house.fill" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: 'Explore',
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="paperplane.fill" color={color} />
          ),
        }}
      />
    </Tabs>
  );
}