Ошибка: не удается найти переменный компонент, и я использую expo

Question

package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.6",
    "@react-navigation/native": "^5.5.0",
    "@react-navigation/stack": "^5.4.1",
    "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-datepicker": "^1.7.2",
    "react-native-elements": "^2.0.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-safe-area-view": "^1.1.1",
    "react-native-screens": "^2.2.0",
    "react-native-stack": "^1.0.0-alpha11",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.3.9",
    "react-navigation-stack": "^2.5.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.7",
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0"
  },
  "private": true
}

App.js:

import React from 'react'

import {
  View,
  Text,
  StyleSheet,
  YellowBox,
  TextInput,
  Platform,
  Button,
  Image,
} from 'react-native'

import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import DatePicker from 'react-native-datepicker'

function strategies({ navigation }) {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'pink',
      }}
    >
      <Text>create your own plan!!</Text>

      <Button
        title="Custom Strategy"
        onPress={() => navigation.navigate('custom')}
      />
    </View>
  )
}

function custom({ navigation }) {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
      }}
    >
      <Text style={{ fontWeight: 'bold', color: 'red' }}>DATA ANALYST</Text>

      <DatePicker
        style={{ width: 200 }}
        date={this.state.date}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate="2016-05-01"
        maxDate="2016-06-01"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 0,
            top: 4,
            marginLeft: 0,
          },
          dateInput: {
            marginLeft: 36,
          },
        }}
        onDateChange={date => {
          this.setState({ date: date })
        }}
      />

      <DatePicker
        style={{ width: 200 }}
        date={this.state.date}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate="2016-05-01"
        maxDate="2016-06-01"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 0,
            top: 4,
            marginLeft: 0,
          },
          dateInput: {
            marginLeft: 36,
          },
        }}
        onDateChange={date => {
          this.setState({ date: date })
        }}
      />

      <Button title="prog" onPress={() => navigation.navigate('progress')} />
    </View>
  )
}

function progress({ navigation }) {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'blue',
      }}
    >
      <Text>ur progress!!</Text>

      <Button title="back" onPress={() => navigation.navigate('strategies')} />
    </View>
  )
}

const Stack = createStackNavigator()

export default class App extends component {
  constructor(props) {
    super(props)
    this.state = { date: '2016-05-15' }
  }

  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="strategies">
          <Stack.Screen name="strategies" component={strategies} />

          <Stack.Screen name="custom" component={custom} />

          <Stack.Screen name="progress" component={progress} />

          {/* options={{
            headerTitle: props => <LogoTitle {...props} />
        }} */}
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

Answer 1

С помощью expoне важно. Вы допустили небольшую ошибку в использовании заглавных букв. Должен бытьReact.Component не component

import React from 'react';

export default class App extends React.Component {  // <--- Here
  constructor(props) {
    super(props)
    this.state = { date: '2016-05-15' }
  }

  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="strategies">
          <Stack.Screen name="strategies" component={strategies} />

          <Stack.Screen name="custom" component={custom} />

          <Stack.Screen name="progress" component={progress} />

          {/* options={{
            headerTitle: props => <LogoTitle {...props} />
        }} */}
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}