Repository: developerhost/gotoshisha
Pull request #23: Feat/add page link
Author: login: developerhost
Created: 2025-04-23T11:11:40Z | Merged: 2025-04-23T12:55:40Z



<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added a new screen for searching shisha bars by map, featuring a parallax header and themed design.
  - Added a new screen for searching shisha bars by region, with a parallax header and navigation controls.

- **Refactor**
  - Simplified the home screen to display two navigation links for accessing the map and region search screens.

- **Chores**
  - Updated tab bar background components for improved type handling and replaced placeholder export with a functional component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/apps/mobile/app/(tabs)/index.tsx b/apps/mobile/app/(tabs)/index.tsx
index e2dbf7a7..446436e4 100644
--- a/apps/mobile/app/(tabs)/index.tsx
+++ b/apps/mobile/app/(tabs)/index.tsx
@@ -1,4 +1,5 @@
 import { Image, StyleSheet, Platform } from "react-native";
+import { router } from "expo-router";
 
 import { HelloWave } from "@/components/HelloWave";
 import ParallaxScrollView from "@/components/ParallaxScrollView";
@@ -20,44 +21,20 @@ export default function HomeScreen() {
         <ThemedText type="title">ごーとぅシーシャ</ThemedText>
         <HelloWave />
       </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">地図から探す</ThemedText>
-        <ThemedText>
-          Edit{" "}
-          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText>{" "}
-          to see changes. Press{" "}
-          <ThemedText type="defaultSemiBold">
-            {typeof Platform.select({
-              ios: "cmd + d",
-              android: "cmd + m",
-              web: "F12",
-            }) === "object"
-              ? "developer menu"
-              : Platform.select({
-                  ios: "cmd + d",
-                  android: "cmd + m",
-                  web: "F12",
-                })}
-          </ThemedText>{" "}
-          to open developer tools.
+      <ThemedView style={styles.linkButtonsContainer}>
+        <ThemedText
+          type="link"
+          onPress={() => router.push("/map")}
+          style={styles.linkButton}
+        >
+          地図から探す
         </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 2: Explore</ThemedText>
-        <ThemedText>
-          Tap the Explore tab to learn more about what's included in this
-          starter app.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-        <ThemedText>
-          When you're ready, run{" "}
-          <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText>{" "}
-          to get a fresh <ThemedText type="defaultSemiBold">app</ThemedText>{" "}
-          directory. This will move the current{" "}
-          <ThemedText type="defaultSemiBold">app</ThemedText> to{" "}
-          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
+        <ThemedText
+          type="link"
+          onPress={() => router.push("/region")}
+          style={styles.linkButton}
+        >
+          地域から探す
         </ThemedText>
       </ThemedView>
     </ParallaxScrollView>
@@ -65,6 +42,18 @@ export default function HomeScreen() {
 }
 
 const styles = StyleSheet.create({
+  linksContainer: {
+    gap: 8,
+    marginBottom: 8,
+  },
+  linkButtonsContainer: {
+    flexDirection: "row",
+    gap: 16,
+    marginTop: 8,
+  },
+  linkButton: {
+    padding: 8,
+  },
   titleContainer: {
     flexDirection: "row",
     alignItems: "center",
diff --git a/apps/mobile/app/map.tsx b/apps/mobile/app/map.tsx
new file mode 100644
index 00000000..873fb5e7
--- /dev/null
+++ b/apps/mobile/app/map.tsx
@@ -0,0 +1,58 @@
+import { StyleSheet, View } from "react-native";
+import { Stack, router } from "expo-router";
+
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import ParallaxScrollView from "@/components/ParallaxScrollView";
+
+export default function MapScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: "地図から探す", headerShown: true }} />
+      <ParallaxScrollView
+        headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
+        headerImage={<View style={styles.headerImage} />}
+      >
+        <ThemedView style={styles.container}>
+          <ThemedText type="title">地図から探す</ThemedText>
+          <ThemedText style={styles.description}>
+            このページでは地図を使ってシーシャバーを探すことができます。
+          </ThemedText>
+          <ThemedView style={styles.buttonContainer}>
+            <ThemedText
+              type="link"
+              onPress={() => router.back()}
+              style={styles.button}
+            >
+              ホームに戻る
+            </ThemedText>
+          </ThemedView>
+        </ThemedView>
+      </ParallaxScrollView>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerImage: {
+    height: 178,
+    width: 290,
+    bottom: 0,
+    left: 0,
+    position: "absolute",
+  },
+  container: {
+    flex: 1,
+    padding: 16,
+    gap: 16,
+  },
+  description: {
+    marginTop: 8,
+  },
+  buttonContainer: {
+    marginTop: 16,
+  },
+  button: {
+    padding: 8,
+  },
+});
diff --git a/apps/mobile/app/region.tsx b/apps/mobile/app/region.tsx
new file mode 100644
index 00000000..9a049cbb
--- /dev/null
+++ b/apps/mobile/app/region.tsx
@@ -0,0 +1,58 @@
+import { StyleSheet, View } from "react-native";
+import { Stack, router } from "expo-router";
+
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import ParallaxScrollView from "@/components/ParallaxScrollView";
+
+export default function RegionScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: "地域から探す", headerShown: true }} />
+      <ParallaxScrollView
+        headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
+        headerImage={<View style={styles.headerImage} />}
+      >
+        <ThemedView style={styles.container}>
+          <ThemedText type="title">地域から探す</ThemedText>
+          <ThemedText style={styles.description}>
+            このページでは地域別にシーシャバーを探すことができます。
+          </ThemedText>
+          <ThemedView style={styles.buttonContainer}>
+            <ThemedText
+              type="link"
+              onPress={() => router.back()}
+              style={styles.button}
+            >
+              ホームに戻る
+            </ThemedText>
+          </ThemedView>
+        </ThemedView>
+      </ParallaxScrollView>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerImage: {
+    height: 178,
+    width: 290,
+    bottom: 0,
+    left: 0,
+    position: "absolute",
+  },
+  container: {
+    flex: 1,
+    padding: 16,
+    gap: 16,
+  },
+  description: {
+    marginTop: 8,
+  },
+  buttonContainer: {
+    marginTop: 16,
+  },
+  button: {
+    padding: 8,
+  },
+});
diff --git a/apps/mobile/components/ui/TabBarBackground.ios.tsx b/apps/mobile/components/ui/TabBarBackground.ios.tsx
index 6668e78d..683a31fc 100644
--- a/apps/mobile/components/ui/TabBarBackground.ios.tsx
+++ b/apps/mobile/components/ui/TabBarBackground.ios.tsx
@@ -1,11 +1,15 @@
-import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
-import { BlurView } from 'expo-blur';
-import { StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
+import { BlurView } from "expo-blur";
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function BlurTabBarBackground() {
+  // 二重の型アサーションを使用して型エラーを解決
+  // TODO: これは一時的な解決策であり、将来的にはより良い方法を見つける必要があります。
+  const BlurViewComponent = BlurView as unknown as React.ComponentType<any>;
   return (
-    <BlurView
+    <BlurViewComponent
       // System chrome material automatically adapts to the system's theme
       // and matches the native tab bar appearance on iOS.
       tint="systemChromeMaterial"
@@ -16,7 +20,13 @@ export default function BlurTabBarBackground() {
 }
 
 export function useBottomTabOverflow() {
-  const tabHeight = useBottomTabBarHeight();
-  const { bottom } = useSafeAreaInsets();
-  return tabHeight - bottom;
+  try {
+    const tabHeight = useBottomTabBarHeight();
+    const { bottom } = useSafeAreaInsets();
+    return tabHeight - bottom;
+  } catch (error) {
+    // タブナビゲーション外の場合はセーフエリアの下部の高さを返す
+    const { bottom } = useSafeAreaInsets();
+    return bottom;
+  }
 }
diff --git a/apps/mobile/components/ui/TabBarBackground.tsx b/apps/mobile/components/ui/TabBarBackground.tsx
index 70d1c3c0..d3dce62b 100644
--- a/apps/mobile/components/ui/TabBarBackground.tsx
+++ b/apps/mobile/components/ui/TabBarBackground.tsx
@@ -1,5 +1,11 @@
 // This is a shim for web and Android where the tab bar is generally opaque.
-export default undefined;
+import * as React from "react";
+import { View } from "react-native";
+
+// 空のコンポーネントを返す関数をエクスポート
+export default function TabBarBackground() {
+  return <View style={{ flex: 1 }} />;
+}
 
 export function useBottomTabOverflow() {
   return 0;


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>🔭 Outside diff range comments (1)</summary><blockquote>

<details>
<summary>apps/mobile/app/map.tsx (1)</summary><blockquote>

`1-59`: _🛠️ Refactor suggestion_

**High code duplication with region.tsx.**

This file is almost identical to region.tsx with only text differences. Consider creating a shared layout component to avoid duplication.


Create a new component like `FeatureScreen` that can be reused:

```tsx
// components/FeatureScreen.tsx
import { StyleSheet, View } from "react-native";
import { Stack, router } from "expo-router";

import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import ParallaxScrollView from "@/components/ParallaxScrollView";

type FeatureScreenProps = {
  title: string;
  description: string;
  headerImage?: React.ReactNode;
  children?: React.ReactNode;
};

export default function FeatureScreen({
  title,
  description,
  headerImage,
  children,
}: FeatureScreenProps) {
  return (
    <>
      <Stack.Screen options={{ title, headerShown: true }} />
      <ParallaxScrollView
        headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
        headerImage={headerImage || <View style={styles.headerImage} />}
      >
        <ThemedView style={styles.container}>
          <ThemedText type="title">{title}</ThemedText>
          <ThemedText style={styles.description}>{description}</ThemedText>
          {children}
          <ThemedView style={styles.buttonContainer}>
            <ThemedText
              type="link"
              onPress={() => router.back()}
              style={styles.button}
              accessibilityRole="button"
              accessibilityLabel={`${title}からホームに戻る`}
            >
              ホームに戻る
            </ThemedText>
          </ThemedView>
        </ThemedView>
      </ParallaxScrollView>
    </>
  );
}

const styles = StyleSheet.create({
  // Same styles as in the original files
});
```

Then use it in your screens:

```tsx
// map.tsx
import FeatureScreen from "@/components/FeatureScreen";
import { Image } from "react-native";

export default function MapScreen() {
  return (
    <FeatureScreen
      title="地図から探す"
      description="このページでは地図を使ってシーシャバーを探すことができます。"
      headerImage={
        <Image 
          source={require("@/assets/images/map-image.png")} 
          style={/* your styles */} 
        />
      }
    >
      {/* Map component goes here */}
    </FeatureScreen>
  );
}
```

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (5)</summary><blockquote>

<details>
<summary>apps/mobile/app/(tabs)/index.tsx (2)</summary><blockquote>

`45-48`: **Unused style definition found.**

The `linksContainer` style is defined but never used in the component. Consider removing it to keep the codebase clean.

```diff
-  linksContainer: {
-    gap: 8,
-    marginBottom: 8,
-  },
```

---

`24-39`: **Navigation implementation looks good, but consider accessibility improvements.**

The navigation buttons are properly implemented with the router from expo-router. To improve accessibility, consider adding:

1. `accessibilityRole="button"` to make screen readers recognize these as interactive elements
2. `accessibilityLabel` with Japanese and English descriptions for international users


```diff
        <ThemedText
          type="link"
          onPress={() => router.push("/map")}
          style={styles.linkButton}
+         accessibilityRole="button"
+         accessibilityLabel="Search by map - 地図から探す"
        >
          地図から探す
        </ThemedText>
        <ThemedText
          type="link"
          onPress={() => router.push("/region")}
          style={styles.linkButton}
+         accessibilityRole="button"
+         accessibilityLabel="Search by region - 地域から探す"
        >
          地域から探す
        </ThemedText>
```

</blockquote></details>
<details>
<summary>apps/mobile/app/region.tsx (2)</summary><blockquote>

`14-14`: **Consider adding an actual image for the header.**

Currently, an empty View is used as the headerImage. Consider adding a meaningful image that represents region selection to enhance the user experience.

```diff
-        headerImage={<View style={styles.headerImage} />}
+        headerImage={
+          <Image
+            source={require("@/assets/images/region-map.png")}
+            style={styles.headerImage}
+          />
+        }
```

---

`22-29`: **Improve accessibility for navigation button.**

Add accessibility properties to the back button to improve screen reader support.


```diff
            <ThemedText
              type="link"
              onPress={() => router.back()}
              style={styles.button}
+             accessibilityRole="button"
+             accessibilityLabel="ホームに戻る - Return to home"
+             accessibilityHint="ホーム画面に戻ります - Returns to the home screen"
            >
              ホームに戻る
            </ThemedText>
```

</blockquote></details>
<details>
<summary>apps/mobile/app/map.tsx (1)</summary><blockquote>

`14-14`: **Consider adding an actual image for the header.**

Currently, an empty View is used as the headerImage. Consider adding a meaningful image that represents map search to enhance the user experience.

```diff
-        headerImage={<View style={styles.headerImage} />}
+        headerImage={
+          <Image
+            source={require("@/assets/images/map-icon.png")}
+            style={styles.headerImage}
+          />
+        }
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 1b559f654d0cd30cb6e62b5508b36f7e30ed6772 and c9602b0e3043ee3403e6e7d305c3c9db19b5ff90.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `apps/mobile/app/(tabs)/index.tsx` (2 hunks)
* `apps/mobile/app/map.tsx` (1 hunks)
* `apps/mobile/app/region.tsx` (1 hunks)

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: review

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T11:14:18Z
user: login: github-actions[bot]
body: <img src="https://avatars.githubusercontent.com/in/347564?s=41" alt="Image description" width="20" height="20">   CodeRabbit

<details>
<summary>Commits</summary>
Files that changed from the base of the PR and between 1b559f654d0cd30cb6e62b5508b36f7e30ed6772 and c9602b0e3043ee3403e6e7d305c3c9db19b5ff90 commits.
</details>

<details>
<summary>Files selected (3)</summary>

* apps/mobile/app/(tabs)/index.tsx (2)
* apps/mobile/app/map.tsx (1)
* apps/mobile/app/region.tsx (1)
</details>





<details>
<summary>Files not summarized due to errors (3)</summary>

* apps/mobile/app/(tabs)/index.tsx (nothing obtained from openai)
* apps/mobile/app/map.tsx (nothing obtained from openai)
* apps/mobile/app/region.tsx (nothing obtained from openai)

</details>


<details>
<summary>Files not reviewed due to errors (3)</summary>

* apps/mobile/app/map.tsx (no response)
* apps/mobile/app/(tabs)/index.tsx (no response)
* apps/mobile/app/region.tsx (no response)

</details>


<details>
<summary>Review comments generated (0)</summary>

* Review: 0
* LGTM: 0

</details>

---

<details>
<summary>Tips</summary>

### Chat with <img src="https://avatars.githubusercontent.com/in/347564?s=41&u=fad245b8b4c7254fe63dd4dcd4d662ace122757e&v=4" alt="Image description" width="20" height="20">  CodeRabbit Bot (`@coderabbitai`)
- Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
- Invite the bot into a review comment chain by tagging `@coderabbitai` in a reply.

### Code suggestions
- The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned. 
- You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.

### Pausing incremental reviews
- Add `@coderabbitai: ignore` anywhere in the PR description to pause further reviews from the bot.

</details>


state: COMMENTED
author_association: NONE
submitted_at: 2025-04-23T11:14:32Z
user: login: github-actions[bot]
body: <img src="https://avatars.githubusercontent.com/in/347564?s=41" alt="Image description" width="20" height="20">   CodeRabbit

<details>
<summary>Commits</summary>
Files that changed from the base of the PR and between c9602b0e3043ee3403e6e7d305c3c9db19b5ff90 and a77069c3c2f2410218ccdce4a3f124429a7714fc commits.
</details>

<details>
<summary>Files selected (1)</summary>

* apps/mobile/components/ui/TabBarBackground.ios.tsx (1)
</details>





<details>
<summary>Files not summarized due to errors (1)</summary>

* apps/mobile/components/ui/TabBarBackground.ios.tsx (nothing obtained from openai)

</details>


<details>
<summary>Files not reviewed due to errors (1)</summary>

* apps/mobile/components/ui/TabBarBackground.ios.tsx (no response)

</details>


<details>
<summary>Review comments generated (0)</summary>

* Review: 0
* LGTM: 0

</details>

---

<details>
<summary>Tips</summary>

### Chat with <img src="https://avatars.githubusercontent.com/in/347564?s=41&u=fad245b8b4c7254fe63dd4dcd4d662ace122757e&v=4" alt="Image description" width="20" height="20">  CodeRabbit Bot (`@coderabbitai`)
- Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
- Invite the bot into a review comment chain by tagging `@coderabbitai` in a reply.

### Code suggestions
- The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned. 
- You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.

### Pausing incremental reviews
- Add `@coderabbitai: ignore` anywhere in the PR description to pause further reviews from the bot.

</details>


state: COMMENTED
author_association: NONE
submitted_at: 2025-04-23T11:59:06Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (1)</summary><blockquote>

<details>
<summary>apps/mobile/components/ui/TabBarBackground.ios.tsx (1)</summary><blockquote>

`8-10`: **Consider translating comments to English for team accessibility.**

The Japanese comment explains the use of double type assertion to resolve a TypeScript error. While the workaround itself is appropriate as a temporary solution, consider translating comments to English to ensure all team members can understand them.


```diff
- // 二重の型アサーションを使用して型エラーを解決
- // TODO: これは一時的な解決策であり、将来的にはより良い方法を見つける必要があります。
+ // Using double type assertion to resolve type error
+ // TODO: This is a temporary solution and we need to find a better approach in the future.
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between c9602b0e3043ee3403e6e7d305c3c9db19b5ff90 and a77069c3c2f2410218ccdce4a3f124429a7714fc.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `apps/mobile/components/ui/TabBarBackground.ios.tsx` (1 hunks)

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: review

</details>

<details>
<summary>🔇 Additional comments (3)</summary><blockquote>

<details>
<summary>apps/mobile/components/ui/TabBarBackground.ios.tsx (3)</summary>

`1-5`: **Import statements standardized.**

The import statements have been standardized to use double quotes and React is now imported as a namespace (`* as React`). This change maintains consistency with modern React coding conventions.

---

`12-12`: **Component reference updated to fix type error.**

The JSX element was updated from `<BlurView>` to `<BlurViewComponent>` to use the type-asserted component. This change maintains the same functionality while resolving the TypeScript error.

---

`10-10`: <details>
<summary>❓ Verification inconclusive</summary>

**Type assertion workaround should be revisited.**

The double type assertion (`as unknown as React.ComponentType<any>`) bypasses TypeScript's type checking, which could potentially lead to runtime errors. While this is an acceptable temporary fix to unblock development, it should be revisited.


Possible better approaches to consider:
1. Check if there's an updated type definition package for expo-blur
2. Create a properly typed wrapper component
3. Report the issue to the expo-blur maintainers

---

🏁 Script executed:

```shell
#!/bin/bash
# Check the current expo-blur version and if newer versions exist
npm list expo-blur
npm view expo-blur versions --json | tail -5

# Check if there are any open issues related to TypeScript types in expo-blur
echo "Checking for related issues in expo-blur repository..."
curl -s "https://api.github.com/search/issues?q=repo:expo/expo+TypeScript+BlurView+in:title,body" | jq '.items[] | {title: .title, url: .html_url, state: .state}'
```

Length of output: 948

---



</details>

**Revisit double type assertion on BlurView**

The cast `as unknown as React.ComponentType<any>` circumvents TypeScript’s checks and can mask real mismatches. To make this more robust, please consider:

- Upgrade to the latest expo-blur (v14.1.2) and see if its bundled types now include a proper `BlurView` definition.  
- If types are still missing or incorrect, create a thin, strongly typed wrapper:
  ```ts
  import { BlurView as ExpoBlurView, BlurViewProps } from 'expo-blur';
  import React from 'react';

  const BlurView: React.FC<BlurViewProps> = props => (
    <ExpoBlurView {...props} />
  );

  export default BlurView;
  ```
- If you hit type gaps upstream, open an issue or PR against expo-blur to ship accurate `BlurView` typings.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T11:59:11Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>apps/mobile/components/ui/TabBarBackground.tsx (2)</summary><blockquote>

`5-5`: **Consider using English comments for better maintainability**

The Japanese comment ("Export a function that returns an empty component") should ideally be translated to English to ensure all team members can understand it, regardless of their language background.


```diff
-// 空のコンポーネントを返す関数をエクスポート
+// Export a function that returns an empty component
```

---

`6-8`: **Consider adding JSDoc comments and extracting styles**

For better maintainability, consider:
1. Adding JSDoc comments to explain the component's purpose and usage
2. Extracting the inline style to a separate stylesheet


```diff
+/**
+ * Default TabBarBackground implementation for web and Android platforms
+ * Renders an empty View that takes up all available space
+ */
 export default function TabBarBackground() {
-  return <View style={{ flex: 1 }} />;
+  return <View style={styles.container} />;
 }
+
+const styles = {
+  container: {
+    flex: 1
+  }
+};
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between a77069c3c2f2410218ccdce4a3f124429a7714fc and a59185c3c6d4ffbdd4a85c328cb3724dceb82a5c.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `apps/mobile/components/ui/TabBarBackground.tsx` (1 hunks)

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: review

</details>

<details>
<summary>🔇 Additional comments (1)</summary><blockquote>

<details>
<summary>apps/mobile/components/ui/TabBarBackground.tsx (1)</summary>

`2-8`: **Good implementation of the TabBarBackground component**

The change from exporting `undefined` to a proper functional component that returns a flexible View is a good improvement. This provides a consistent interface across platforms and follows React Native best practices.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T12:50:20Z
user: login: github-actions[bot]
body: <img src="https://avatars.githubusercontent.com/in/347564?s=41" alt="Image description" width="20" height="20">   CodeRabbit

<details>
<summary>Commits</summary>
Files that changed from the base of the PR and between a77069c3c2f2410218ccdce4a3f124429a7714fc and a59185c3c6d4ffbdd4a85c328cb3724dceb82a5c commits.
</details>

<details>
<summary>Files selected (1)</summary>

* apps/mobile/components/ui/TabBarBackground.tsx (1)
</details>





<details>
<summary>Files not summarized due to errors (1)</summary>

* apps/mobile/components/ui/TabBarBackground.tsx (nothing obtained from openai)

</details>


<details>
<summary>Files not reviewed due to errors (1)</summary>

* apps/mobile/components/ui/TabBarBackground.tsx (no response)

</details>


<details>
<summary>Review comments generated (0)</summary>

* Review: 0
* LGTM: 0

</details>

---

<details>
<summary>Tips</summary>

### Chat with <img src="https://avatars.githubusercontent.com/in/347564?s=41&u=fad245b8b4c7254fe63dd4dcd4d662ace122757e&v=4" alt="Image description" width="20" height="20">  CodeRabbit Bot (`@coderabbitai`)
- Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
- Invite the bot into a review comment chain by tagging `@coderabbitai` in a reply.

### Code suggestions
- The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned. 
- You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.

### Pausing incremental reviews
- Add `@coderabbitai: ignore` anywhere in the PR description to pause further reviews from the bot.

</details>


state: COMMENTED
author_association: NONE
submitted_at: 2025-04-23T12:51:09Z
user: login: github-actions[bot]
body: <img src="https://avatars.githubusercontent.com/in/347564?s=41" alt="Image description" width="20" height="20">   CodeRabbit

<details>
<summary>Commits</summary>
Files that changed from the base of the PR and between a59185c3c6d4ffbdd4a85c328cb3724dceb82a5c and 734ada9243554c39220d4bacc3c374aaab6155a5 commits.
</details>

<details>
<summary>Files selected (1)</summary>

* apps/mobile/components/ui/TabBarBackground.ios.tsx (2)
</details>





<details>
<summary>Files not summarized due to errors (1)</summary>

* apps/mobile/components/ui/TabBarBackground.ios.tsx (nothing obtained from openai)

</details>


<details>
<summary>Files not reviewed due to errors (1)</summary>

* apps/mobile/components/ui/TabBarBackground.ios.tsx (no response)

</details>


<details>
<summary>Review comments generated (0)</summary>

* Review: 0
* LGTM: 0

</details>

---

<details>
<summary>Tips</summary>

### Chat with <img src="https://avatars.githubusercontent.com/in/347564?s=41&u=fad245b8b4c7254fe63dd4dcd4d662ace122757e&v=4" alt="Image description" width="20" height="20">  CodeRabbit Bot (`@coderabbitai`)
- Reply on review comments left by this bot to ask follow-up questions. A review comment is a comment on a diff or a file.
- Invite the bot into a review comment chain by tagging `@coderabbitai` in a reply.

### Code suggestions
- The bot may make code suggestions, but please review them carefully before committing since the line number ranges may be misaligned. 
- You can edit the comment made by the bot and manually tweak the suggestion if it is slightly off.

### Pausing incremental reviews
- Add `@coderabbitai: ignore` anywhere in the PR description to pause further reviews from the bot.

</details>


state: COMMENTED
author_association: NONE
submitted_at: 2025-04-23T12:54:28Z

Review comments:
diff_hunk: @@ -0,0 +1,58 @@
+import { StyleSheet, View } from "react-native";
+import { Stack, router } from "expo-router";
+
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import ParallaxScrollView from "@/components/ParallaxScrollView";
+
+export default function RegionScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: "地域から探す", headerShown: true }} />
+      <ParallaxScrollView
+        headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
+        headerImage={<View style={styles.headerImage} />}
+      >
+        <ThemedView style={styles.container}>
+          <ThemedText type="title">地域から探す</ThemedText>
+          <ThemedText style={styles.description}>
+            このページでは地域別にシーシャバーを探すことができます。
+          </ThemedText>
+          <ThemedView style={styles.buttonContainer}>
+            <ThemedText
+              type="link"
+              onPress={() => router.back()}
+              style={styles.button}
+            >
+              ホームに戻る
+            </ThemedText>
+          </ThemedView>
+        </ThemedView>
+      </ParallaxScrollView>
+    </>
+  );
+}
path: apps/mobile/app/region.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Region selection functionality is missing.**

The screen creates a good foundation but doesn't include the actual region selection functionality that the title and description promise. Consider implementing a region selection component to fulfill the purpose of this screen.


You might want to add:
- A list or grid of selectable regions
- Region cards with images and names
- A search input for finding regions

Example implementation:
```tsx
// After the description and before the button container
<ThemedView style={styles.regionsContainer}>
  <ThemedText style={styles.sectionTitle}>地域を選択</ThemedText>
  <FlatList
    data={regions}
    renderItem={({ item }) => (
      <Pressable 
        style={styles.regionCard} 
        onPress={() => navigateToRegionDetail(item.id)}
        accessibilityRole="button"
        accessibilityLabel={`${item.name}地域のシーシャバーを表示`}
      >
        <Image source={item.image} style={styles.regionImage} />
        <ThemedText style={styles.regionName}>{item.name}</ThemedText>
      </Pressable>
    )}
    numColumns={2}
    keyExtractor={(item) => item.id.toString()}
  />
</ThemedView>
```

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-23T11:14:17Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,58 @@
+import { StyleSheet, View } from "react-native";
+import { Stack, router } from "expo-router";
+
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import ParallaxScrollView from "@/components/ParallaxScrollView";
+
+export default function MapScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: "地図から探す", headerShown: true }} />
+      <ParallaxScrollView
+        headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
+        headerImage={<View style={styles.headerImage} />}
+      >
+        <ThemedView style={styles.container}>
+          <ThemedText type="title">地図から探す</ThemedText>
+          <ThemedText style={styles.description}>
+            このページでは地図を使ってシーシャバーを探すことができます。
+          </ThemedText>
+          <ThemedView style={styles.buttonContainer}>
+            <ThemedText
+              type="link"
+              onPress={() => router.back()}
+              style={styles.button}
+            >
+              ホームに戻る
+            </ThemedText>
+          </ThemedView>
+        </ThemedView>
path: apps/mobile/app/map.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Missing map functionality.**

This screen is named "MapScreen" and describes searching via a map, but doesn't include any actual map implementation. Consider adding a map component to provide the functionality described in the text.


```tsx
// Import MapView
import MapView, { Marker } from 'react-native-maps';

// Add this between description and buttonContainer
<ThemedView style={styles.mapContainer}>
  <MapView
    style={styles.map}
    initialRegion={{
      latitude: 35.6812,  // Tokyo coordinates
      longitude: 139.7671,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  >
    {/* Example markers for shisha bars */}
    <Marker
      coordinate={{ latitude: 35.6812, longitude: 139.7671 }}
      title="サンプルシーシャバー"
      description="サンプル説明"
    />
  </MapView>
</ThemedView>

// Add to styles
// mapContainer: {
//   width: '100%',
//   height: 300,
//   marginVertical: 16,
//   borderRadius: 8,
//   overflow: 'hidden',
// },
// map: {
//   width: '100%',
//   height: '100%',
// },
```

Don't forget to install react-native-maps:
```
npm install react-native-maps
```

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-23T11:14:17Z
author_association: CONTRIBUTOR

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-04-23T11:11:46Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- oss_warning_start -->

> [!WARNING]
> ## CodeRabbit GitHub Action detected
> 
> The repository is using both CodeRabbit Pro and CodeRabbit Open Source (via GitHub Actions), which is not recommended as it may lead to duplicate comments and extra noise. Please remove the CodeRabbit GitHub Action.

<!-- oss_warning_end -->
<!-- walkthrough_start -->

## Walkthrough

The changes introduce two new screens, "Map" and "Region," to the mobile app, each accessible via navigation links added to the simplified Home screen. The Home screen now presents two link-style buttons that route users to the new screens. Both new screens utilize a parallax scroll view with themed styling, display a title and description, and provide a link to navigate back to the previous screen. Styling updates and navigation logic are incorporated to support these new user flows, while previous instructional content on the Home screen has been removed. Additionally, a type assertion workaround was added to the `BlurTabBarBackground` component to resolve a type error related to the `BlurView` import. The `TabBarBackground.tsx` file was also updated to export a functional component rendering an empty view instead of `undefined`.

## Changes

| File(s)                                            | Change Summary                                                                                                  |
|---------------------------------------------------|----------------------------------------------------------------------------------------------------------------|
| apps/mobile/app/(tabs)/index.tsx                   | Refactored HomeScreen: removed instructional text, added two navigation links to "/map" and "/region", updated styles, and added router import. |
| apps/mobile/app/map.tsx                            | Added new MapScreen component with parallax scroll view, themed content, navigation stack title, and back link. |
| apps/mobile/app/region.tsx                         | Added new RegionScreen component with parallax scroll view, themed content, navigation stack title, and back link. |
| apps/mobile/components/ui/TabBarBackground.ios.tsx | Updated imports to double quotes and React namespace import; added double type assertion workaround for BlurView component to fix type error; no behavioral changes. |
| apps/mobile/components/ui/TabBarBackground.tsx   | Replaced default export from `undefined` to a functional React component rendering an empty `<View>`.          |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant HomeScreen
    participant Router
    participant MapScreen
    participant RegionScreen

    User->>HomeScreen: Open app
    HomeScreen->>User: Show two navigation links
    User->>HomeScreen: Tap "Map" link
    HomeScreen->>Router: router.push("/map")
    Router->>MapScreen: Display MapScreen
    User->>MapScreen: Tap "Back" link
    MapScreen->>Router: router.back()
    Router->>HomeScreen: Return to HomeScreen
    User->>HomeScreen: Tap "Region" link
    HomeScreen->>Router: router.push("/region")
    Router->>RegionScreen: Display RegionScreen
    User->>RegionScreen: Tap "Back" link
    RegionScreen->>Router: router.back()
    Router->>HomeScreen: Return to HomeScreen
```

## Poem

> Two new screens on mobile's stage,  
> "Map" and "Region" take the page.  
> Home now guides with links so neat,  
> Parallax scroll and themed retreat.  
> Tap to wander, tap to roam—  
> With every hop, you're right at home!  
> 🗺️🐇✨

<!-- walkthrough_end -->


---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between a59185c3c6d4ffbdd4a85c328cb3724dceb82a5c and 734ada9243554c39220d4bacc3c374aaab6155a5.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `apps/mobile/components/ui/TabBarBackground.ios.tsx` (2 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* apps/mobile/components/ui/TabBarBackground.ios.tsx

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (1)</summary>

* GitHub Check: review

</details>

</details>
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=developerhost/gotoshisha&utm_content=23):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-04-23T11:11:52Z
body: <img src="https://avatars.githubusercontent.com/in/347564?s=41" alt="Image description" width="20" height="20">   CodeRabbit


<!-- This is an auto-generated comment: raw summary by OSS CodeRabbit -->
<!--








-->
<!-- end of auto-generated comment: raw summary by OSS CodeRabbit -->
<!-- This is an auto-generated comment: short summary by OSS CodeRabbit -->
<!--


-->
<!-- end of auto-generated comment: short summary by OSS CodeRabbit -->

---

<details>
<summary>Uplevel your code reviews with CodeRabbit Pro</summary>

### CodeRabbit Pro

If you like this project, please support us by purchasing the [Pro version](https://coderabbit.ai). The Pro version has advanced context, superior noise reduction and several proprietary improvements compared to the open source version. Moreover, CodeRabbit Pro is free for open source projects.

</details>

<!-- commit_ids_reviewed_start -->
<!-- c9602b0e3043ee3403e6e7d305c3c9db19b5ff90 -->
<!-- a77069c3c2f2410218ccdce4a3f124429a7714fc -->
<!-- a59185c3c6d4ffbdd4a85c328cb3724dceb82a5c -->
<!-- 734ada9243554c39220d4bacc3c374aaab6155a5 -->
<!-- commit_ids_reviewed_end -->

<!-- This is an auto-generated comment: summarize by OSS CodeRabbit -->
author_association: NONE