TechLead
Lección 7 de 8

Modulos Nativos y APIs de Plataforma

Accediendo a funciones del dispositivo, camara, ubicacion, notificaciones y codigo nativo

APIs de Plataforma

React Native proporciona acceso a APIs nativas del dispositivo. Con Expo, muchas APIs estan disponibles inmediatamente. Con CLI, puedes necesitar configuracion adicional.

Camara

// Con Expo
import { Camera } from 'expo-camera';
import { useState, useRef } from 'react';

function CamaraApp() {
  const [permiso, solicitarPermiso] = Camera.useCameraPermissions();
  const camaraRef = useRef(null);

  if (!permiso) return <View />;

  if (!permiso.granted) {
    return (
      <View>
        <Text>Necesitamos acceso a la camara</Text>
        <Button title="Dar permiso" onPress={solicitarPermiso} />
      </View>
    );
  }

  const tomarFoto = async () => {
    const foto = await camaraRef.current.takePictureAsync();
    console.log(foto.uri);
  };

  return (
    <Camera ref={camaraRef} style={{ flex: 1 }}>
      <TouchableOpacity onPress={tomarFoto}>
        <Text>Capturar</Text>
      </TouchableOpacity>
    </Camera>
  );
}

Ubicacion

import * as Location from 'expo-location';

async function obtenerUbicacion() {
  // Solicitar permiso
  const { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== 'granted') {
    Alert.alert('Permiso denegado');
    return;
  }

  // Obtener ubicacion actual
  const ubicacion = await Location.getCurrentPositionAsync({});
  console.log(ubicacion.coords.latitude, ubicacion.coords.longitude);

  return ubicacion;
}

// Seguimiento continuo
function usarSeguimiento() {
  useEffect(() => {
    const suscripcion = Location.watchPositionAsync(
      {
        accuracy: Location.Accuracy.High,
        distanceInterval: 10, // metros
      },
      (ubicacion) => {
        console.log('Nueva ubicacion:', ubicacion);
      }
    );

    return () => suscripcion.remove();
  }, []);
}

Notificaciones Push

import * as Notifications from 'expo-notifications';

// Configurar manejador
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
  }),
});

// Registrar para notificaciones
async function registrarParaNotificaciones() {
  const { status } = await Notifications.requestPermissionsAsync();
  if (status !== 'granted') {
    Alert.alert('Permiso denegado');
    return;
  }

  const token = await Notifications.getExpoPushTokenAsync();
  console.log('Token:', token.data);
  return token.data;
}

// Programar notificacion local
async function programarNotificacion() {
  await Notifications.scheduleNotificationAsync({
    content: {
      title: 'Recordatorio',
      body: 'No olvides revisar la app!',
    },
    trigger: { seconds: 60 },
  });
}

Selector de Imagenes

import * as ImagePicker from 'expo-image-picker';

async function seleccionarImagen() {
  // Solicitar permiso
  const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
  if (status !== 'granted') {
    Alert.alert('Necesitamos acceso a tus fotos');
    return;
  }

  // Abrir selector
  const resultado = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    aspect: [4, 3],
    quality: 0.8,
  });

  if (!resultado.canceled) {
    return resultado.assets[0].uri;
  }
}

Compartir

import { Share } from 'react-native';

async function compartirContenido() {
  try {
    const resultado = await Share.share({
      message: 'Mira esta app increible!',
      url: 'https://miapp.com', // Solo iOS
      title: 'Mi App',
    });

    if (resultado.action === Share.sharedAction) {
      console.log('Compartido exitosamente');
    }
  } catch (error) {
    Alert.alert('Error al compartir');
  }
}

Vibracion y Haptics

import { Vibration } from 'react-native';
import * as Haptics from 'expo-haptics';

// Vibracion simple
Vibration.vibrate();

// Patron de vibracion
Vibration.vibrate([500, 200, 500]); // vibra, pausa, vibra

// Haptics (feedback tactil)
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
Haptics.selectionAsync();

APIs Disponibles con Expo

  • expo-camera - Acceso a camara
  • expo-location - GPS y ubicacion
  • expo-notifications - Push y locales
  • expo-image-picker - Selector de fotos
  • expo-file-system - Archivos
  • expo-av - Audio y video
  • expo-sensors - Acelerometro, giroscopio