development serve response error code 500 - reactjs

I am new to react native for navigation i am using react-native-router-flux but it returns an error => development server returned response error code 500
I have uninstall and reinstall node modules
My react-native -v is 0.59.9
metro-react-native-babel-preset -v ^0.54.1
react-native-router-flux ^4.0.6
login page
import React, { Component } from 'react'
import { Text, View, StyleSheet, TextInput, TouchableOpacity } from 'react-native'
import { Actions } from 'react-native-router-flux'
export default class Login extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>Sparow</Text>
</View>
<View style={styles.content}>
<TextInput style={styles.usernameInput} placeholder='Enter Your Username' placeholderTextColor='#fff' underlineColorAndroid='transparent' />
<TextInput style={styles.passwordInput} placeholder='Enter Your Password' placeholderTextColor='#fff' underlineColorAndroid='transparent' secureTextEntry={true} />
<TouchableOpacity style={styles.loginBtn} onPress={() => { Actions.Admin() }}>
<Text style={styles.loginBtnText}>Login</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
admin page
import React, { Component } from 'react'
import { View, Text } from 'react-native'
export default class Admin extends Component {
render() {
return (
<View>
<Text>Admin Page</Text>
</View>
)
}
}
routes page
import React, { Component } from 'react'
import { Router, Scene } from 'react-native-router-flux'
import Login from '../screen/Login'
import Admin from '../screen/Admin'
export default class Routes extends Component {
render() {
return (
)
}
}
routes pages
import React, { Component } from 'react';
import Routes from './src/common/Routes'
export default class App extends Component {
render() {
return (
);
}
}

Related

How do create a stack screen with a class

I am coding an application that will have more than one page. I use '#react-navigation/native' and '#react-navigation/stack' to navigate between these pages. It works correctly when I write a function name in Stack.Screen's component. But I did not understand how the class call was made.
Api.js
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
const Stack = createStackNavigator();
export default function App(props) {
// Load any resources or data that we need prior to rendering the app
return (
<View style={styles.container}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Homa Page" component={HomeScreen}/>
</Stack.Navigator>
</NavigationContainer>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
screens/HomeScreen.js
import * as React from 'react';
import { Text, View } from 'react-native';
import { getSummary } from '../data/getSummary.js';
export class HomeScreen extends Component {
constructor(props){
super(props);
this.state ={
isLoading: true,
}
this.getSummary = getSummary.bind(this)
}
componentDidMount(){
this.getSummary;
}
render(){
return (
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={ this.state.data}
keyExtractor={(item) => item.CountryCode}
renderItem={({ item }) => (
<View>
<Text>Country:{item.CountryCode}</Text>>
</View>
)}
/>
</View>
);
}
}

Getting ReferenceError: can't find variable:navigate React Native

I am new to React Native and getting error while trying react navigation.
If I use onPress={()=>this.props.navigation("FoodScreen")}>
Then the error comes "TypeError:this.props.navigation is not a function."
I googled it and found to write onPress={()=>navigate(), which got me this error
Please help in this
This is My App.js
import React,{Component} from 'react';
import {Text,View,ScrollView} from 'react-native';
import { Container,Header,Left,Right,Body } from 'native-base';
import HeaderWnd from './HeaderWnd';
import PromoFoodItem from './PromoFoodItem';
let burgerImage = require('./Images/burger.jpg');
let chickenImage = require('./Images/chicken.jpg');
let pizzaImage = require('./Images/pizza.jpg');
export default class App extends Component
{
render()
{
//const {navigate} = this.props.navigation;
return(
<View>
<HeaderWnd/>
<ScrollView>
<PromoFoodItem navigation={this.props.navigation}
image={burgerImage} text={'BURGER'}/>
<PromoFoodItem image={chickenImage} text={'CHICKEN'}/>
<PromoFoodItem image={pizzaImage} text={'PIZZA'}/>
</ScrollView>
</View>
);
}
}
PromoFoodItem.js
import React,{Component} from 'react';
import {Text,View,Image,TouchableOpacity} from 'react-native';
import { Container,Header,Left,Right,Body } from 'native-base';
import styles from './PromoFoodItemStyle';
import FoodScreen from './FoodSceen';
//let fooditemone = require('./Images/burger.jpg');
export default class PromoFoodItem extends Component
{
render()
{
return(
//<TouchableOpacity onPress={()=>alert(this.props.text)}>
<TouchableOpacity onPress={()=>navigate("FoodScreen")}>
<View style={styles.foodCard} >
<View>
<Image style={styles.PromoImage} source={this.props.image} resizeMode='contain' blurRadius={1.5}/>
</View>
<View style={styles.textView}>
<Text style={styles.foodTitle}>{this.props.text}</Text>
</View>
</View>
</TouchableOpacity>
);
}
}
FoodScreen.js
import React,{Component} from 'react';
import {Text,View,} from 'react-native';
import { Container,Header,Left,Right,Body } from 'native-base';
import styles from './FoodScreenStyle';
import HeaderFood from './HeaderFood';
export default class FoodScreen extends Component
{
render()
{
return(
<View>
<HeaderFood/>
</View>
);
}
}
HeaderFood.js
import React,{Component} from 'react';
import {Text,View} from 'react-native';
import {Container,Header,Left,Right,Body,Button, Icon} from 'native-base';
import styles from './HeaderWndStyle';
export default class HeaderFood extends Component
{
handleClick = () => {
alert('Back Button Pressed!');
}
render()
{
return(
<Container style={styles.headerContainer}>
<Header style={styles.headerStyle}>
<Left style={{flex:1}}>
<Button transparent onPress={this.handleClick}>
<Icon style= {styles.iconStyle} name='md-arrow-back'/>
</Button>
</Left >
<Body style={{flex:1}}>
<Text style={styles.textStyle}>
Foodstagram
</Text>
</Body>
<Right style={{flex:1}}>
<Button transparent onPress={()=> alert("Right button Pressed")}>
<Icon style= {styles.iconStyle} type='FontAwesome' name='shopping-cart'/>
</Button>
</Right>
</Header>
</Container>
);
}
}

Passing Props for button on press event

I created a drawer (react-navigation) in Routes.js and I have a Button in HamburgerBtn.js. I wish to invoke the call on the button to open the drawer with my button. I do not understand how to get this even from outside of routes into the button.
#HamburgerBtn.js;import Hamburger from 'react-native-hamburger';
import React, {Component} from 'react';
import styles from './Component.style';
import {
Text,
View
} from 'react-native';
import {DrawerNavigator} from 'react-navigation';
import {NavigationActions} from 'react-navigation';
class HamburgerBtn extends Component {
constructor(props){
super(props);
this.state = {
active: false,
}
}
openControlPanel = () => {
this.props.navigation.navigate('DrawerOpen'); // open drawer
};
render () {
//onPress={()=> {this.setState({active: !this.state.active});this.props.navigation.navigate('DrawerOpen');}}/>
return (
<View style={styles.hamburgerBtnHome}>
<Hamburger active={this.state.active}
type = "arrow"
color = "black"
onPress={()=> {this.props.openControlPanel()}}
/>
</View>
);
}
}
export default HamburgerBtn;
--routes.js--
import Connect from './Connect/Connect';
import Setup from './Setup/Setup';
import Update from './Update/Update';
import homePage from './homePage'
import SideMenu from './SideMenu/SideMenu';
import {DrawerNavigator} from 'react-navigation';
openControlPanel = () => {
this.props.navigation.navigate('DrawerOpen'); // open drawer
};
export default DrawerNavigator({
homePage: {
screen: homePage
},
Connect: {
screen: Connect
},
Setup: {
screen: Setup
},
Update: {
screen: Update
}
}, {
contentComponent: SideMenu,
drawerWidth: 300
});
--homepage.js--
import React, {Component} from 'react';
import {
Text,
View
} from 'react-native';
import Hamburger from './Components/HamburgerBtn';
class homePage extends Component {
render () {
return (
<View style={{padding: 50}}>
<Hamburger/>
<Text>
HomePage
</Text>
</View>
);
}
}
export default homePage;
--hamburger--
import Hamburger from 'react-native-hamburger';
import React, {Component} from 'react';
import styles from './Component.style';
import {
Text,
View
} from 'react-native';
import PropTypes from 'prop-types';
import {NavigationActions} from 'react-navigation';
class HamburgerBtn extends Component {
constructor(props){
super(props);
this.state = {
active: false,
}
}
onPress = () => {
this.setState({active: !this.state.active});
this.props.onPress();
};
render () {
//onPress={()=> {this.setState({active: !this.state.active});this.props.navigation.navigate('DrawerOpen');}}/>
return (
<View style={styles.hamburgerBtnHome}>
<Hamburger active={this.state.active}
type = "arrow"
color = "black"
onPress={() => this.onPress()}
/>
</View>
);
}
}
export default HamburgerBtn;
--homepage--
import React, {Component} from 'react';
import {
Text,
View
} from 'react-native';
import Hamburger from './Components/HamburgerBtn';
class homePage extends Component {
openControlPanel = () => {
this.props.navigation.navigate('DrawerOpen'); // open drawer
};
render () {
return (
<View style={{padding: 50}}>
<Hamburger onPress={() => this.openControlPanel()} />
<Text>
HomePage
</Text>
</View>
);
}
}
export default homePage;

React Native Prop Not Being Passed To Child Component

I am using react-native-router-flux as a router. This is my very first RN app in which I have a Home screen, and a chat screen. My home screen is working fine, and I am able to successfully navigate to to the chat screen upon button press. However, my home screen has an enough form and the value that the use enters (name) I want to pass to the chat screen as a prop.
Main App component
import React, { Component } from 'react';
import Home from './components/Home';
import Chat from './components/Chat';
import {
Router,
Stack,
Scene,
} from 'react-native-router-flux';
class App extends Component {
render() {
return (
<Router>
<Stack key='root'>
<Scene key='home' component={Home} title='Home' />
<Scene key='chat' component={Chat} title='Chat' />
</Stack>
</Router>
)
}
}
export default App;
Home component
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity,
} from 'react-native';
import {
Actions,
} from 'react-native-router-flux';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
}
}
render() {
return (
<View>
<Text style={styles.title}>
Enter your name:
</Text>
<TextInput
style={styles.nameInput}
placeholder='why so serious??'
onChangeText={(text) => {
this.setState({name: text})
}}
value={this.state.name}
/>
<TouchableOpacity
onPress={() => {
Actions.chat({
name: this.state.name,
})
}}
>
<Text style={styles.buttonText}>
Next
</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
title: {
marginTop: 20,
marginLeft: 20,
fontSize: 20,
},
nameInput: {
padding: 5,
height: 40,
borderWidth: 2,
borderColor: 'black',
margin: 20,
},
buttonText: {
marginLeft: 20,
fontSize: 20
}
})
export default Home;
if I alert this.state.value on the onPress() function, the value is being captured and alerted.
However,
Actions.chat({
name: this.state.name,
})
}}
isn't recieving this input value. When the app goes to the chat screen it just says "hello"
Chat component
import React, { Component } from 'react';
import {
View,
Text,
} from 'react-native';
class Chat extends Component {
render() {
return (
<View>
<Text>
Hello {this.props.name}
</Text>
</View>
)
}
}
export default Chat;
Am I simply over looking something here? any help is appreciated in passing prop from home to chat component.
edit:
In the chat component when i alert(this.props.name) it alert Hello chat. The key from <Scene key='chat' component={Chat} title='Chat' /> in the app component is being passed down instead of the input value from the home component. Not sure why this is happening
seems like name is reserved prop for action key you can do something like that
Actions.chat({
userName: this.state.name,
})
and in your chat class
class Chat extends Component {
render() {
return (
<View>
<Text>
Hello {this.props.userName}
</Text>
</View>
)
}
}

Element type is invalid: Expected a string/object got: undefined

I'm having a hard time figuring out why I'm getting Input returned undefined with this code. The Button, Card, CardSection components are being exported/imported the same way.
The rest of the components in the LoginForm render fine if I comment out the <Input/> tag.
Any help would be greatly appreciated!
Input.js -- Not working
import React from 'react';
import { Text, TextInput, View } from 'react-native';
const Input = ({ label, value, onChangeText }) => {
return (
<View>
<Text>{label}</Text>
<TextInput
value={value}
onChangeText={onChangeText}
style={{ height:20, width:100 }}
/>
</View>
);
};
export { Input };
Button.js -- Working
const Button = ({ whenPressed, children }) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={whenPressed} style={buttonStyle}>
<Text style={textStyle}>
{children}
</Text>
</TouchableOpacity>
);
};
export { Button };
LoginForm.js
import React, { Component } from 'react';
import { View } from 'react-native';
import { Button, Card, CardSection, Input } from './';
class LoginForm extends Component {
state = { text: '' };
render() {
return(
<Card>
<CardSection>
<Input
value={this.state.text}
onChangeText={text=> this.setState({ text })}
/>
</CardSection>
<CardSection/>
<CardSection>
<Button style={styles.buttonStyle}>LOGIN</Button>
</CardSection>
</Card>
);
}
}
It was returned as undefined because it was never exported in the index.js file that holds all the exports to App.
In the sample code you show the <Input/> component in Index.js but the import in LoginForm.js imports <Input/ from ./.

Resources