ExpoにおけるiPhone実機のみでのエラー

Question

下記のソースコードをExpo環境下で実行しています。

その際、Webブラウザー、androidエミュレーターともに正常に表示されます。
また、Expo Snackにおいてもどの機種でも正常に表示されました。

しかしながら、iPhone実機のみ下記エラー内容が表示されます。

Unable to resolve "./NavigationNativeContainer" from "node_modules\@react-navigation\native\src\index.tsx"

エラーの中身を見ても、そもそもNacigationNativeContainerが使われておらず原因がわかりません。
なお、ライブラリのバージョンは以下です。

Package.json
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.3.3",
    "@react-navigation/native": "^5.2.3",
    "@react-navigation/stack": "^5.2.18",
    "expo": "~37.0.3",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-elements": "^2.0.0",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.8.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.7.0",
    "react-native-web": "~0.11.7"

この投稿の前に、

• Expo再インストール
• パッケージすべて再インストール
• その後ファイルを再び作成

の手順は踏んでおります。

何かわかる方がいらっしゃいましたら、是非ご教示のほどよろしくお願いします。

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { ListItem } from 'react-native-elements';
import { FlatList } from 'react-native-gesture-handler';

function SettingsScreen({ navigation }) {

  const [data,setData] = React.useState([])
  const [load,isLoaded] = React.useState(false)

  function getNews() {

    var url = "https://newsapi.org/v2/top-headlines?"+'country=jp&'+'apiKey=(myAPIkey)';
    fetch(url).then((response) => response.json())
    .then((result) => {
      setData(result.articles)
      isLoaded(true)
    })
  }

  React.useEffect(() => {
    getNews();
    
  },[])
  console.log({data})
  const keyExtractor = (item,index) => index.toString();
  const renderItem = ({item}) => (
    <ListItem
      title={item.title}
      subtitle={item.url}
      leftAvatar={{source:{uri:item.urlToImage}}}
      bottomDivider
      chevron/>
  )


  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Settings Screen</Text>
      <View style={{width:"100%"}}>
        <FlatList
          keyExtractor={keyExtractor}
          data={data}
          renderItem={renderItem}
          />
      </View>
      <Button
        title="Go to Profile"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
}

function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
    </View>
  );
}
const Tab = createBottomTabNavigator();
const SettingsStack = createStackNavigator();
const HomeStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="First">
          {() => (
            <SettingsStack.Navigator>
              <SettingsStack.Screen
                name="Settings"
                component={SettingsScreen}
              />
              <SettingsStack.Screen name="Profile" component={ProfileScreen} />
            </SettingsStack.Navigator>
          )}
        </Tab.Screen>
        <Tab.Screen name="Second">
          {() => (
            <HomeStack.Navigator>
              <HomeStack.Screen name="Home" component={HomeScreen} />
              <HomeStack.Screen name="Details" component={DetailsScreen} />
            </HomeStack.Navigator>
          )}
        </Tab.Screen>
      </Tab.Navigator>
    </NavigationContainer>
  );
}
 

Comments

[hoshi-takanori]

こちらでしょうか？
https://github.com/react-navigation/react-navigation/issues/8163

ちなみに、「iPhone実機のみでのエラー」と言われると「iOS Simulator では動くが実機で動かない」という意味かと思ってしまいます…。

[howareyou1245]

このページも閲覧し、色々やりましたが解決至らずでした。

Windows環境下なのでiOSのエミュレータがなく試せていませんが、Expo Snack上ではiOSでも正常に表示出来ていたため、このタイトルにしました。