RorkアプリがiOSで動くのにAndroidだけおかしい：プラットフォーム差異を修正する実践ガイド

Rorkでアプリを作っていて、「iOSのプレビューでは完璧に動くのに、Androidで試したら見た目が崩れた」「ボタンを押してもAndroidだけ反応しない」という経験をした方は少なくないのではないでしょうか。

私自身、最初にRorkでアプリを公開したとき、iOSのTestFlightでは問題なく動いていたものが、Androidの実機でシャドウが全部消えていて「え、なにこれ」と思ったことがあります。Rorkが生成するコードはReact Nativeベースなので、基本的にクロスプラットフォームで動くはずなのですが、いくつかの場面でiOSとAndroidの挙動が明確に変わります。

ここではRorkアプリでiOS/Android間に差が出やすいポイントを具体的なコード例とともに整理します。AIにプロンプトで修正を依頼する際のヒントも合わせてお伝えします。

なぜRorkアプリでiOS/Androidの差が生まれるのか

Rorkが生成するアプリはReact Native（Expo）をベースにしています。React Nativeはクロスプラットフォームを謳っていますが、あくまで「同じコードで両OSに対応できる仕組み」であり、「両OSで完全に同じ見た目・動作になる」とは少し違います。

iOSはApple独自の描画エンジン（Core Animation）、AndroidはAndroid独自のレンダリング（Skia等）を使うため、同じスタイル設定でも実際の描画結果が異なることがあります。また、権限の取得方法・フォントのデフォルト設定・キーボードの挙動など、OS固有の仕様が絡む部分はコードで明示的に分岐させる必要があります。

よくある差異 1：シャドウ（影）がAndroidで表示されない

これはRorkアプリで最もよく見かけるプラットフォーム差異です。

iOSでは shadowColor、shadowOffset、shadowOpacity、shadowRadius というスタイルプロパティが使えます。ところがAndroidではこれらが無視されます。Androidでシャドウを表示するには elevation プロパティを使う必要があります。

Rorkが生成するコードでiOSのシャドウだけ設定されていた場合、以下のように両方の記述を追加するようAIに依頼するか、手動でコードを修正します。

// iOS・Android両方で影を表示するスタイル
const cardStyle = {
  backgroundColor: '#ffffff',
  borderRadius: 12,
  padding: 16,
  // iOS用シャドウ
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.15,
  shadowRadius: 4,
  // Android用シャドウ（elevation）
  elevation: 4,
};

Rorkへの依頼例：「カードコンポーネントのシャドウがAndroidで表示されありません。iOSのshadowプロパティに加えて、Android用のelevationプロパティも設定してほしい」

よくある差異 2：フォントがAndroidで違う・太字が効かない

iOSではシステムフォント（San Francisco）が自動的に使われますが、Androidのシステムフォント（Roboto等）は字形が異なります。特にカスタムフォントを読み込んでいる場合、Androidでフォントウェイト（fontWeight）が正しく適用されないことがあります。

Androidでは fontWeight: 'bold' と書いても効かないケースがあり、正しく太字にするには fontFamily にボールド体のフォントを明示的に指定する必要があります。

import { Platform } from 'react-native';
 
const titleStyle = {
  fontSize: 18,
  // Androidではfontweightが効かない場合がある
  // Platform.OSで分岐して対応する
  fontFamily: Platform.OS === 'android' ? 'Roboto-Bold' : undefined,
  fontWeight: Platform.OS === 'ios' ? '700' : undefined,
  color: '#111827',
};

カスタムフォントを使っている場合は、expo-font で読み込む際にボールド体のファイルも必ず追加しておくことが大切です。

よくある差異 3：ステータスバーの高さが異なる

iPhoneにはノッチ・Dynamic Island、Androidにはパンチホールカメラやノッチなど、各端末でステータスバー（上部の通知エリア）の高さが異なります。StatusBar.currentHeight（Android専用）を使って動的にパディングを設定しないと、Androidでコンテンツがステータスバーに隠れてしまうことがあります。

import { Platform, StatusBar, SafeAreaView } from 'react-native';
 
// StatusBarの高さを考慮したコンテナ
const containerStyle = {
  flex: 1,
  paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
};
 
// または SafeAreaView を使う（推奨）
function MyScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* コンテンツ */}
    </SafeAreaView>
  );
}

Rorkが生成するコードでは SafeAreaView が使われていることが多いですが、Androidで上部が切れている場合は、明示的に StatusBar.currentHeight を使ったパディングを追加することで解決できます。

よくある差異 4：カメラ・マイク権限の取得方法が違う

カメラやマイクを使うアプリで、iOSでは権限ダイアログが表示されるのにAndroidでは表示されない、またはその逆というケースがあります。

iOSでは Info.plist に権限の説明文を記載するだけで、実行時に自動でダイアログが表示されます。Androidでは AndroidManifest.xml に権限を宣言した上で、コード上で PermissionsAndroid.request() を使って明示的に許可を求める必要があります。

import { Platform, PermissionsAndroid, Alert } from 'react-native';
 
async function requestCameraPermission(): Promise<boolean> {
  if (Platform.OS === 'ios') {
    // iOSはexpo-cameraの権限フックが処理するため不要
    return true;
  }
 
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: 'カメラへのアクセス許可',
        message: 'アプリがカメラを使用するには許可が必要です。',
        buttonNeutral: '後で確認',
        buttonNegative: '拒否',
        buttonPositive: '許可',
      }
    );
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  } catch (err) {
    Alert.alert('エラー', '権限の取得中にエラーが発生しました。');
    return false;
  }
}

Rorkへの依頼例：「カメラ機能をAndroidでも使えるようにしたい。PermissionsAndroid を使って、Androidでカメラ権限を明示的にリクエストするコードを追加してほしい」

よくある差異 5：キーボードがテキスト入力フィールドを隠す

フォームなど、テキスト入力がある画面でよく起きる問題です。iOSでは KeyboardAvoidingView の behavior="padding" がうまく機能しますが、Androidでは behavior="height" にしないとうまくいかないことがあります。

import { KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
 
function FormScreen() {
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      // Androidは"height"、iOSは"padding"が安定
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
    >
      <ScrollView keyboardShouldPersistTaps="handled">
        {/* テキスト入力フィールドを含むコンテンツ */}
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

なお、Rorkが生成したコードに KeyboardAvoidingView が含まれていない場合は「テキスト入力フィールドがキーボードで隠れないよう、KeyboardAvoidingViewで囲んでほしい。iOSはpadding、Androidはheight動作で」と依頼すると適切なコードが生成されます。

Rorkへの修正依頼をうまく伝えるコツ

プラットフォーム差異の修正をRorkのAIに依頼するとき、「Androidで動かない」だけでは情報が少なすぎて精度の高い修正が返ってきません。以下のように具体的に伝えると、一発で解決できる確率が上がります。

「Androidの実機（Pixel 8 / Android 15）でxxが起きる。iOSでは問題ない」
「Platform.OS === 'android' の分岐を追加して対応してほしい」
「スタイルの差異ならPlatform.selectを使いたい」

また、複数の問題が絡んでいる場合は一度に全部頼まず、1つずつ修正を確認しながら進めた方が安全です。AIが複数の変更を一度に加えると、意図しない箇所まで変更されてしまうことがあります。関連する記事としてRork AIが既存コードを上書きしてしまう問題の対策も参考にしてみてください。

まずAndroid実機でテストする習慣をつける

iOSシミュレーターでの開発が中心になりがちですが、Androidの実機テストは早い段階からやっておくことをおすすめします。Rork CompanionはiOS・Android両方の実機テストに対応しています。開発の後半になってAndroid固有の問題がまとめて出てくると対処が大変です。

UIの差異は見た目を確認しながら直せますが、権限やキーボード・フォントの問題は実機でしか再現しないことが多いです。アプリのコア機能が完成したタイミングで一度Android実機を使って全画面を流し見する、という習慣だけで、リリース前に多くの問題を事前につぶせます。