feat: add location support (#84)

🎫 Ticket: https://linear.app/stream/issue/XYZ-123

📑 Docs: https://github.com/GetStream/docs-content/pull/<id>

### 💡 Overview

This is a draft PR which adds support for adding locations to
`activities`. Better description will follow.

### 📝 Implementation notes

Author: isekovanic

sample-apps/react-native/ExpoTikTokApp/.env-example

@@ -1,2 +1,4 @@
 EXPO_PUBLIC_TOKEN_CREATION_URL=
 EXPO_PUBLIC_BASE_URL=
+EXPO_PUBLIC_PLACES_API_KEY=
+EXPO_PUBLIC_MAPS_API_KEY=

sample-apps/react-native/ExpoTikTokApp/app.json

@@ -16,14 +16,22 @@
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "io.getstream.expotiktokapp",
-      "appleTeamId": "EHV7XZLAHA"
+      "appleTeamId": "EHV7XZLAHA",
+      "config": {
+        "googleMapsApiKey":  "process.env.EXPO_PUBLIC_MAPS_API_KEY"
+      }
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "package": "io.getstream.expotiktokapp"
+      "package": "io.getstream.expotiktokapp",
+      "config": {
+        "googleMaps": {
+          "apiKey": "process.env.EXPO_PUBLIC_MAPS_API_KEY"
+        }
+      }
     },
     "web": {
       "bundler": "metro",

sample-apps/react-native/ExpoTikTokApp/app/(post-creation)/_layout.tsx

@@ -0,0 +1,54 @@
+import { PostCreationContextProvider } from '@/contexts/PostCreationContext';
+import { Slot, Stack, useRouter } from 'expo-router';
+import React from 'react';
+import { useColorScheme } from '@/components/useColorScheme';
+import { Pressable } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import Colors from '@/constants/Colors';
+
+const HeaderLeft = () => {
+  const colorScheme = useColorScheme();
+  const router = useRouter();
+  return (
+    <Pressable
+      onPress={() =>
+        router.back()
+      }
+    >
+      {({ pressed }) => (
+        <Ionicons
+          name="arrow-back"
+          size={25}
+          color={Colors[colorScheme ?? 'light'].text}
+          style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
+        />
+      )}
+    </Pressable>
+  );
+};
+
+const PostCreationLayout = () => {
+  return (
+    <PostCreationContextProvider>
+      <Stack>
+        <Stack.Screen
+          name="create-post-modal"
+          options={{
+            title: 'New Post',
+            headerLeft: HeaderLeft,
+          }}
+        />
+        <Stack.Screen
+          name="pick-location-modal"
+          options={{
+            title: 'Select Location',
+            presentation: 'modal',
+            animation: 'slide_from_bottom',
+          }}
+        />
+      </Stack>
+    </PostCreationContextProvider>
+  );
+}
+
+export default PostCreationLayout;

…/ExpoTikTokApp/app/create-post-modal.tsx …pp/(post-creation)/create-post-modal.tsxsample-apps/react-native/ExpoTikTokApp/app/create-post-modal.tsx renamed to sample-apps/react-native/ExpoTikTokApp/app/(post-creation)/create-post-modal.tsx sample-apps/react-native/ExpoTikTokApp/app/create-post-modal.tsx renamed to sample-apps/react-native/ExpoTikTokApp/app/(post-creation)/create-post-modal.tsx

@@ -7,7 +7,7 @@ import {
 } from '@stream-io/feeds-react-native-sdk';
 import { useMemo } from 'react';
 
-const ModalScreen = () => {
+const CreatePostScreen = () => {
   const client = useFeedsClient();
   const connectedUser = useClientConnectedUser();
 
@@ -22,12 +22,10 @@ const ModalScreen = () => {
   }
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
       <StreamFeed feed={feed}>
         <ActivityComposer />
       </StreamFeed>
-    </SafeAreaView>
   );
 }
 
-export default ModalScreen;
+export default CreatePostScreen;

sample-apps/react-native/ExpoTikTokApp/app/(post-creation)/pick-location-modal.tsx

@@ -0,0 +1,16 @@
+import { PlaceSearchDropdown } from '@/components/PlaceSearchDropdown';
+import { StyleSheet, View } from 'react-native';
+
+const CreatePostScreen = () => {
+  return (
+    <View style={styles.container}>
+      <PlaceSearchDropdown />
+    </View>
+  );
+};
+
+export default CreatePostScreen;
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: 'fff' },
+});

sample-apps/react-native/ExpoTikTokApp/app/(tabs)/_layout.tsx

@@ -5,27 +5,19 @@ import { Pressable } from 'react-native';
 
 import Colors from '@/constants/Colors';
 import { useColorScheme } from '@/components/useColorScheme';
-import {
-  useClientConnectedUser,
-} from '@stream-io/feeds-react-native-sdk';
 
-// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
-function TabBarIcon(props: {
+const TabBarIcon = (props: {
   name: React.ComponentProps<typeof FontAwesome>['name'];
   color: string;
-}) {
+}) => {
   return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
-}
+};
 
 const HeaderRight = () => {
   const colorScheme = useColorScheme();
   const router = useRouter();
   return (
-    <Pressable
-      onPress={() =>
-        router.push('/create-post-modal')
-      }
-    >
+    <Pressable onPress={() => router.push('/create-post-modal')}>
       {({ pressed }) => (
         <FontAwesome
           name="plus-square"
@@ -38,7 +30,7 @@ const HeaderRight = () => {
   );
 };
 
-export default function TabLayout() {
+const TabLayout = () => {
   const colorScheme = useColorScheme();
 
   return (
@@ -71,4 +63,6 @@ export default function TabLayout() {
       />
     </Tabs>
   );
-}
+};
+
+export default TabLayout;

sample-apps/react-native/ExpoTikTokApp/app/(tabs)/profile.tsx

@@ -1,34 +1,21 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { View, Text } from '@/components/Themed';
 import { ConnectionLostHeader } from '@/components/ConnectionLostHeader';
-import { Pressable, StyleSheet, Platform } from 'react-native';
+import { Pressable, StyleSheet } from 'react-native';
 import { useOwnFeedsContext } from '@/contexts/OwnFeedsContext';
 import { useUserContext } from '@/contexts/UserContext';
 import { Profile } from '@/components/Profile';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const ProfileScreen = () => {
   const { ownUserFeed, ownTimelineFeed } = useOwnFeedsContext();
   const { logOut } = useUserContext();
-  const tabBarHeight = useBottomTabBarHeight();
-  const insets = useSafeAreaInsets();
-
-  const extraContainerStyles = useMemo(
-    () => ({
-      paddingBottom:
-        insets.bottom + tabBarHeight + (Platform.OS === 'ios' ? 0 : 80),
-    }),
-    [insets.bottom, tabBarHeight],
-  );
 
   if (!ownUserFeed || !ownTimelineFeed) {
     return null;
   }
 
   return (
-    <View style={[styles.container, extraContainerStyles]}>
+    <View style={styles.container}>
       <ConnectionLostHeader />
       <Pressable
         onPress={logOut}
@@ -50,8 +37,8 @@ const ProfileScreen = () => {
 export default ProfileScreen;
 
 const styles = StyleSheet.create({
-  container: { flex: 1, paddingTop: 16, backgroundColor: '#fff' },
-  profileContainer: { flex: 1, paddingBottom: 16 },
+  container: { flex: 1, paddingTop: 16, paddingBottom: 20, backgroundColor: '#fff' },
+  profileContainer: { height: '100%', paddingBottom: 16 },
   button: {
     flexDirection: 'row',
     alignItems: 'center',

sample-apps/react-native/ExpoTikTokApp/app/_layout.tsx

@@ -93,13 +93,25 @@ const RootLayoutNav = ({ user }: { user: UserRequest }) => {
               options={{ title: 'Profile' }}
             />
             <Stack.Screen
-              name="create-post-modal"
+              name="location-map-screen"
+              options={{ title: 'Location' }}
+            />
+            <Stack.Screen
+              name="(post-creation)"
               options={{
-                title: 'New Post',
-                presentation: 'modal',
-                animation: 'slide_from_bottom',
+                headerShown: false,
+                // presentation: 'modal',
+                // animation: 'slide_from_bottom',
               }}
             />
+            {/* <Stack.Screen */}
+            {/*   name="(post-creation)/pick-location-modal" */}
+            {/*   options={{ */}
+            {/*     title: 'New Post', */}
+            {/*     // presentation: 'modal', */}
+            {/*     // animation: 'slide_from_bottom', */}
+            {/*   }} */}
+            {/* /> */}
             <Stack.Screen
               name="followers-modal"
               options={{

sample-apps/react-native/ExpoTikTokApp/app/location-map-screen.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import MapView, { Marker } from 'react-native-maps';
+import { useLocalSearchParams } from 'expo-router';
+import { View } from '@/components/Themed';
+
+const LocationMapScreen = () => {
+  const { latitude: latitudeParam, longitude: longitudeParam } =
+    useLocalSearchParams();
+  const latitude = Number(latitudeParam);
+  const longitude = Number(longitudeParam);
+
+  const initialRegion = useMemo(
+    () => ({
+      latitude,
+      longitude,
+      latitudeDelta: 0.01,
+      longitudeDelta: 0.01,
+    }),
+    [latitude, longitude],
+  );
+
+  return (
+    <View style={styles.container}>
+      <MapView style={StyleSheet.absoluteFill} initialRegion={initialRegion}>
+        <Marker coordinate={{ latitude, longitude }} />
+      </MapView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    width: '100%',
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+});
+
+export default LocationMapScreen;