Day39 Unable to resolve module ‘react-native-elements’

今日はDay35 の続きからスタート

前回までのあらすじ

App.js から Remider.js を呼び出して、「This is Remindalerm!」と表示させるところまでやろうとしたところ、悪夢のメッセージ「There was a problem loading the requested app. 」にぶち当たってしまいました。
しかし Day38 でついに解決したのです。

ただいまこの状態です。

さて、続きですが、App.js と Reminder.js は今のところこの状態です。

import React from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

import Reminders from './screens/Reminders';

export default function App() {
  return (
    <View style={styles.container}>
      <Reminders />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

class Reminders extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>This is Remindalerm!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});
  
export default Reminders;

今日は、state を使ってダミーデータの一覧を表示したいと思います。

(もくもく)

コーディングしてみました。
この状態です。

import React, { Component } from 'react';
import { 
    View,
    Text,
    StyleSheet,
    ScrollView
} from 'react-native';
import { ListItem } from 'react-native-elements';

const allRemindersTmp = [
    { title: '起床', setTime: '7:00', },
    { title: '会社に行く', setTime: '8:00', },
    { title: '日報提出', setTime: '17:00', },
];

class Reminders extends Component {
    renderReminders() {
        let reminders = allRemindersTmp;

        return (
            <ScrollView>
                {reminders.map((remind, index) => {
                    return (
                        <ListItem
                            key={index}
                            title={remind.title}
                            subtitle={`${remind.setTime}`}
                        />
                    );
                })
                }
            </ScrollView>
        );
    }
    
    render() {
        return (
            <View style={{ flex: 1 }}>
                {this.renderReminders()}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});
  
export default Reminders;

ここで SImulator にエラーが表示されます。

あら? react-native-elements が無いですって。
note 参考にしてたのになんでだろう。

https://note.mu/cube0529/n/nd9f242d4d43b?magazine_key=m65d9958f0801

エラーメッセージの内容を真摯に受け止めて、対応していきましょう!

$ watchman watch-del-all
$ rm -rf node_modules && npm install
$ rm -rf /tmp/
$ rm -rf /tmp/haste-map-react-native-packager-*

これをやれと書いてあります。
さっそく実行します。

$ watchman watch-del-all
-bash: watchman: command not found

ないの?

note 見ながらのときは、たしかに install したのにコマンドがなかったのかな。
考えないことにして、2番目のところから順に実行してみて再起動。

$ expo start

変わってない!

react-native-elements がどこかに行ってしまったようです涙

初心に戻って、note を見て、もう一度インストールしようかな。

https://note.mu/cube0529/n/n4a130029dfe1

$ npm install react-native-elements

ダメだ!直らない!!

「Unable to resolve module ‘react-native-elements’」で検索。するとトラブルシューティングを発見。

https://react-native-training.github.io/react-native-elements/docs/troubleshooting.html

これの「Using an Expo app (create-react-native-app or Expo XDE)」をやってみます。

$ rm -rf node_modules yarn.lock package-lock.json
# npm
$ npm install && npm install react-native-elements —save
$ npm install @expo/vector-icons —save

Simulator と Expo をいったん閉じて再開

$ expo start

そういえば Xcode をアップデートしてから、Expo で iOS Simulator を起動するときに、エラーが出て失敗しなくなりましたねー。

そして起動された内容は、

あーこれ笑

今日はここまで!

フォローよろしくお願いします!^_^

毎日つぶやいています!