Module 7: Advanced Features

Course Overview: This module covers advanced features in React Native, including animations, gestures, push notifications, maps, and location services. These features enhance user experience and provide interactivity in your mobile applications.

✅ Animations in React Native

Animations make your app feel smooth and engaging. React Native provides Animated API for building animations.

Example: Fade-in animation:

import React, { useRef, useEffect } from 'react';
import { Animated, View, Text, StyleSheet } from 'react-native';

export default function FadeInView() {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 2000,
      useNativeDriver: true,
    }).start();
  }, [fadeAnim]);

  return (
    <Animated.View style={{ ...styles.box, opacity: fadeAnim }}>
      <Text>Fade In Animation</Text>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  box: {
    padding: 20,
    backgroundColor: '#007bff',
    borderRadius: 10,
  },
});

—

✅ Handling Gestures

React Native Gesture Handler allows advanced gesture control like swipes, taps, and pan gestures.

Install:

npm install react-native-gesture-handler

Example: Tap gesture:

import React from 'react';
import { View, Text, Alert } from 'react-native';
import { TapGestureHandler } from 'react-native-gesture-handler';

export default function App() {
  const onSingleTap = () => Alert.alert('Tapped!');

  return (
    <TapGestureHandler onActivated={onSingleTap}>
      <View style={{ padding: 50, backgroundColor: '#f0f0f0' }}>
        <Text>Tap Me</Text>
      </View>
    </TapGestureHandler>
  );
}

—

✅ Push Notifications

Push notifications keep users engaged. Use Firebase Cloud Messaging (FCM) for React Native notifications.

Install Firebase dependencies:

npm install @react-native-firebase/app
npm install @react-native-firebase/messaging

Example: Receive notifications:

import messaging from '@react-native-firebase/messaging';
import { Alert } from 'react-native';

messaging().onMessage(async remoteMessage => {
  Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
});

—

✅ Maps and Location Services

React Native Maps provides interactive maps, markers, and directions.

Install:

npm install react-native-maps

Example: Display a map:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        <Marker
          coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
          title="Marker"
          description="This is a marker"
        />
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  map: { flex: 1 },
});

—

✅ Accessing Device Location

Use Expo Location API or react-native-geolocation-service to get user location.

Example with Expo Location:

import * as Location from 'expo-location';
import { useEffect } from 'react';
import { Alert } from 'react-native';

export default function App() {
  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        Alert.alert('Permission denied');
        return;
      }
      let location = await Location.getCurrentPositionAsync({});
      console.log(location);
    })();
  }, []);
}

—

✅ Summary

• Animations make apps interactive and smooth.
• Gesture handling enhances user input capabilities.
• Push notifications keep users informed and engaged.
• Maps and location services allow geo-based features.
• Combining these features improves user experience and app functionality.