I'm korean. and Im not good at english. please understand about this.

i want if i push the button, move the page.

but

got an invalid value for 'component' prop for the screen

this error keep appear in StyleScreen.

I'm defintly beginner, so if you upload full code, I'm so appreciate that.

this is my App.js code:

import * as React from 'react';
import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import MainScreen from './MainScreen';
import DetailScreen from './DetailScreen';
import StyleScreen from './StyleScreen';

const Stack = createStackNavigator();

const App = () => {

  const [overlay, setOverlay] = useState(false);
  const toggleOverlay = () => {
    setOverlay(!overlay);
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="MAIN">
        <Stack.Screen name="MAIN" component={MainScreen}
          options={{
            title: '예산'
        }}/>
        <Stack.Screen name="DETAIL" component={DetailScreen} 
          options={{
            title: '색'
        }}/>
        <Stack.Screen name="STYLE" component={StyleScreen} 
          options={{
            title: '스타일'
        }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

this is StyleScreen.js :

import React, { Component } from 'react';
import { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, Dimensions, View, ScrollView, Image, navigation } from 'react-native';

let natural = require('./내추럴.png');
let modern = require('./모던.jpg');
let romantic = require('./로맨틱.jpg');
let NEurope = require('./북유럽.png');
let junk = require('./정크4.jpg');
let minimal = require('./미니멀.jpg');


const HomeScreen=({navigation}) => {
  
    return (
      <View style={styles.container}>

      <StatusBar style="block"></StatusBar>

      <View style={styles.ask1}>
        <Text style={styles.askcolor}>선호하는 스타일을</Text>
        <Text style={styles.askcolor}>선택해주세요</Text>
      </View>

      <View style={styles.day2}>
        <View style={styles.day}>
          <Image style={styles.image} source={modern}/>
          <Image style={styles.image2} source={NEurope}/>
        </View>

        <View style={styles.day}>
          <Text style={styles.colorname}>             모던</Text>
          <Text style={styles.colorname}>                              북유럽</Text>
        </View>

        <View style={styles.day}>
          <Image style={styles.image} source={minimal}/>
          <Image style={styles.image2} source={natural}/>
        </View>

        <View style={styles.day}>
          <Text style={styles.colorname}>           미니멀</Text>
          <Text style={styles.colorname}>                             내추럴</Text>
        </View> 

        <View style={styles.day}>
          <Image style={styles.image} source={romantic}/>
          <Image style={styles.image2} source={junk}/>
        </View>

        <View style={styles.day}>
          <Text style={styles.colorname}>           로맨틱</Text>
          <Text style={styles.colorname}>                              정크</Text>
        </View>

      </View>

      <View style={styles.button}>
         <Button onPress={() => navigation.navigate('DETAIL')} title='다음으로'/>
        </View>
        
    </View>

    );
  }


const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:"white"
  },
  ask1:{
    flex:0.3,
    justifyContent:"center",
    marginTop:70,
    marginBottom:40,
  },
  askcolor:{
    fontSize:34,
    fontWeight:"900",
    paddingHorizontal:30,
  },
  image:{
    height: 130, 
    width: 158,
    borderRadius:10,
    backgroundColor:"black"
    },
  image2:{
    height: 130, 
    width: 158 ,
    borderRadius:10,
    marginLeft:28,
    },
  day:{
    flexDirection: 'row',
  },
  day2:{
    flex:3,
    paddingHorizontal:30,
  },
  colorname:{
    fontSize:17,
    fontWeight:"300",
    paddingHorizontal:23,
    paddingVertical:13,
  },
  button:{
    flex:0.43,
    marginLeft:286,
}
})

CodePudding user response：

i think you have not exported your styleScreen component, that might be the issue here and also your "StyleScreen" component is named "HomeScreen" so I would suggest rename is properly and export it by default.

In StyleScreen component, you have imported "navigation" from "react-native" which I think is not correct.

CodePudding user response：

You didn't export StyleScreen component.

Add this at bottom line of your StyleScreen.js.

export default StyleScreen;

CodePudding user response：

try to replace code

const HomeScreen=({navigation}) => {

with

export default StyleScreen =({navigation}) => {