🗺️ React Native (TypeScript) – Maps Integration (Google Maps)

React Native-এ Google Maps ব্যবহার করে আমরা অ্যাপের মধ্যে লোকেশন দেখাতে পারি। এই টিউটোরিয়ালে আমরা File-based React Native এবং TypeScript ব্যবহার করব। আমরা একটি সহজ উদাহরণ দেখাব যেখানে ম্যাপ লোড হবে এবং একটি মার্কার দেখাবে।

📌 ১. প্রয়োজনীয় প্যাকেজ ইন্সটল করা

প্রথমে আমাদের React Native Google Maps প্যাকেজ এবং Google API Key সেটআপ করতে হবে।

npm install react-native-maps
npm install react-native-maps-directions
# TypeScript typings
npm install --save-dev @types/react-native-maps

**Note:** Android/iOS-এ Google Maps API Key সেট করতে হবে। Google Cloud Console থেকে API Key নিন এবং AndroidManifest.xml এবং AppDelegate.m ফাইলে সেট করুন।

📌 ২. File-based Project Structure

আমরা ফাইলভিত্তিক স্ট্রাকচার ব্যবহার করব। উদাহরণঃ

src/
src/components/MapViewComponent.tsx
src/screens/MapScreen.tsx
App.tsx

📌 ৩. Map Component তৈরি করা

আমরা একটি reusable Map component বানাব। এটি TypeScript দিয়ে লেখা হবে।

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

interface MapProps {
  latitude: number;
  longitude: number;
}

const MapViewComponent: React.FC<MapProps> = ({ latitude, longitude }) => {
  return (
    <MapView
      style={styles.map}
      initialRegion={{
        latitude: latitude,
        longitude: longitude,
        latitudeDelta: 0.05,
        longitudeDelta: 0.05,
      }}
    >
      <Marker
        coordinate={{ latitude: latitude, longitude: longitude }}
        title="My Marker"
        description="This is a marker"
      />
    </MapView>
  );
};

const styles = StyleSheet.create({
  map: {
    width: Dimensions.get('window').width,
    height: 400,
  },
});

export default MapViewComponent;

📌 ৪. Screen-এ Map Component ব্যবহার করা

import React from 'react';
import { View, Text } from 'react-native';
import MapViewComponent from '../components/MapViewComponent';

const MapScreen: React.FC = () => {
  return (
    <View className="flex-1 items-center justify-center p-4">
      <Text className="text-xl font-bold mb-4 text-teal-700">
        আমাদের Google Map
      </Text>
      <MapViewComponent latitude={23.8103} longitude={90.4125} />
    </View>
  );
};

export default MapScreen;

📌 ৫. App.tsx তে Screen Import করা

import React from 'react';
import { SafeAreaView } from 'react-native';
import MapScreen from './src/screens/MapScreen';

const App: React.FC = () => {
  return (
    <SafeAreaView className="flex-1">
      <MapScreen />
    </SafeAreaView>
  );
};

export default App;

📌 ৬. Output / Result

অ্যাপ রান করলে দেখবেন:

ম্যাপ লোড হচ্ছে নির্দিষ্ট latitude ও longitude অনুযায়ী।
একটি Marker দেখানো হয়েছে যেখানে আপনি location সেট করেছেন।
আপনি জুম ইন / আউট করতে পারবেন।

✅ ৭. Summary

React Native + TypeScript + File-based structure ব্যবহার করে Map component বানানো।
Google Maps API Key ব্যবহার করে ম্যাপ ইন্টিগ্রেট করা।
Reusable component বানিয়ে Screen-এ import করা।
Marker, latitude, longitude সেট করে location প্রদর্শন করা।
Tailwind CSS ব্যবহার করে responsive এবং সুন্দর UI।

🎯 এই টিউটোরিয়ালটি আপনাকে সাহায্য করবে React Native এ Google Maps ইন্টিগ্রেশন বুঝতে এবং প্র্যাকটিস করতে।

Maps Integration (Google Maps)