I get this error that getInputData is undefined - reactjs

I get this error that getInputData is undefined, please what am I doing wrong?
getInputData simply gets the users inputs....I'm using redux. I defined getInputData in my function called handleInput or is it not well defined......
import React from 'react';
import styles from './style';
import {Text} from 'react-native';
import {View,Input,InputGroup} from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome';
import { SearchBar } from 'react-native-elements';
export const SearchBox= ({getInputData}) => {
const handleInput= (key,val) =>{
getInputData({
key,
value:val
});
}
return(
<View style={styles.searchBox}>
<View style={styles.inputWrapper}>
<Text style={styles.label}>PICK UP</Text>
<InputGroup>
<Icon name="search" size={15} color="#FF5E3A"/>
<Input style={styles.inputSearch} placeholder="Enter Pickup Location"
onChangeText={handleInput.bind(this, "pickUp")}/>
</InputGroup>
</View>
<View style={styles.inputWrapper}>
<Text style={styles.label}>DROP OFF</Text>
<InputGroup>
<Icon name="search" size={15} color="#FF5E3A"/>
<Input style={styles.inputSearch} placeholder="Enter Drop Off Location"
onChangeText={handleInput.bind(this, "dropOff")}
/>
</InputGroup>
</View>
</View>
);
};
export default SearchBox;
this is my mapContainer.js where inputData is passed down as a prop to SearchBox.
import React from 'react';
import styles from './style';
import {View} from 'native-base';
import MapView from 'react-native-maps';
import SearchBox from '../SearchBox';
import SearchResults from '../SearchResults';
export const MapContainer= ({region, getInputData}) => {
return(
<View style={styles.container}>
<MapView
provider={MapView.PROVIDER_GOOGLE}
style={styles.map}
region={region}
>
<MapView.Marker
coordinate={region}
pinColor="green"/>
</MapView>
<SearchBox getInputData={getInputData}/>
<SearchResults/>
</View>
)
}
export default MapContainer
This is where I connect mapStateToProps to my mapActionCreators
import {connect} from "react-redux";
import {
getCurrentLocation,
getInputData,
} from '../../actions/currentLocation';
import { MapContainer } from '../MapContainer';
import Home from "../../screens/Home";
const mapStateToProps=(state)=>({
region:state.home.region,
inputData:state.home.inputData || {}
});
const mapActionCreators = {
getCurrentLocation,
getInputData,
};
export default connect(mapStateToProps,mapActionCreators)(Home);

Related

Can't reset route react native navigation

I can't clear my routing history, i try this but he puts that i don't know why. Can you help me pls :) e
import React, {Component} from 'react';
import {View, Text, TouchableOpacity, Image} from 'react-native';
import Input from '../../components/Input/Input';
import {DismissKeyboard} from '../../components/DismissKeyboard/DismissKeyboard';
import Button from '../../components/Button/Button';
import Logo from '../../../assets/img/logo2.png';
import {StackActions, NavigationActions} from 'react-navigation';
class Login extends Component {
onDone = () => {
const resetAction = StackActions.reset({
index: 0,
key: null,
actions: [NavigationActions.navigate({routeName: 'Register'})],
});
this.props.navigation.dispatch(resetAction);
};
static navigationOptions = (navigation) => ({
header: null,
});
render() {
return (
<DismissKeyboard>
<View style={styles.container}>
<Image source={Logo} style={styles.image} />
<Input placeholder="Numéro de téléphone ou adresse mail" />
<Input placeholder="Mot de passe" />
<Button text="Connexion" />
<Text>Mot de passe oublié ?</Text>
<TouchableOpacity style={styles.register} onPress={this.onDone}>
<Text style={styles.registerText}>Inscription</Text>
</TouchableOpacity>
</View>
</DismissKeyboard>
);
}
}
enter image description here

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>
);
}
}

getInputData is undefined

I get this error that getInputData is undefined, please what am I doing wrong?
getInputData simply gets the users inputs....I'm using redux. I defined getInputData in my function called handleInput or is it not well defined......
import React from "react";
import styles from "./style";
import { Text } from "react-native";
import { View, Input, InputGroup } from "native-base";
import Icon from "react-native-vector-icons/FontAwesome";
import { SearchBar } from "react-native-elements";
export const SearchBox = ({ getInputData }) => {
const handleInput = (key, val) => {
getInputData({
key,
value: val
});
};
return (
<View style={styles.searchBox}>
<View style={styles.inputWrapper}>
<Text style={styles.label}>PICK UP</Text>
<InputGroup>
<Icon name="search" size={15} color="#FF5E3A" />
<Input
style={styles.inputSearch}
placeholder="Enter Pickup Location"
onChangeText={handleInput.bind(this, "pickUp")}
/>
</InputGroup>
</View>
<View style={styles.inputWrapper}>
<Text style={styles.label}>DROP OFF</Text>
<InputGroup>
<Icon name="search" size={15} color="#FF5E3A" />
<Input
style={styles.inputSearch}
placeholder="Enter Drop Off Location"
onChangeText={handleInput.bind(this, "dropOff")}
/>
</InputGroup>
</View>
</View>
);
};
export default SearchBox;
this is my mapContainer.js where inputData is passed down as a prop to SearchBox.
import React from 'react';
import styles from './style';
import {View} from 'native-base';
import MapView from 'react-native-maps';
import SearchBox from '../SearchBox';
import SearchResults from '../SearchResults';
export const MapContainer= ({region, getInputData}) => {
return(
<View style={styles.container}>
<MapView
provider={MapView.PROVIDER_GOOGLE}
style={styles.map}
region={region}
>
<MapView.Marker
coordinate={region}
pinColor="green"/>
</MapView>
<SearchBox getInputData={getInputData}/>
<SearchResults/>
</View>
)
}
export default MapContainer
This is where I connect mapStateToProps to my mapActionCreators
import {connect} from "react-redux";
import {
getCurrentLocation,
getInputData,
} from '../../actions/currentLocation';
import { MapContainer } from '../MapContainer';
import Home from "../../screens/Home";
const mapStateToProps=(state)=>({
region:state.region,
inputData:state.inputData || {}
});
const mapActionCreators = {
getCurrentLocation,
getInputData,
};
export default connect(mapStateToProps,mapActionCreators)(Home);
this is my Home code.
import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';
import { Container} from 'native-base';
import { MapContainer} from '../../components/MapContainer';
import GetLocation from 'react-native-get-location'
import {Dimensions} from "react-native";
const {width,height}=Dimensions.get("window");
const ASPECT_RATIO=width/height;
const LATITUDE_DELTA=0.922;
const LONGITUDE_DELTA=ASPECT_RATIO*LATITUDE_DELTA
class Home extends React.Component{
constructor(props){
super(props);
this.state={
latitude:3.14662,
longitude:101.6984,
latitudeDelta:LATITUDE_DELTA,
longitudeDelta:LONGITUDE_DELTA
}
}
componentDidMount(){
GetLocation.getCurrentPosition({
enableHighAccuracy: true,
timeout: 15000,
})
.then(location => {
this.setState({
latitude:location.latitude,
longitude:location.longitude
})
console.log(location)
console.log(this.state.longitude);
})
.catch(error => {
const { code, message } = error;
console.warn(code, message);
}) }
render(){
const region={
latitude:this.state.latitude,
longitude:this.state.longitude,
latitudeDelta:this.state.latitudeDelta,
longitudeDelta:this.state.longitudeDelta
}
return(
<Container>
<MapContainer region={region} getInputData={this.props.getInputData} />
</Container>
);
}
}
export default Home;
You should use connect on the Home page like
import React from 'react';
import {connect} from "react-redux";
import { View, Text } from 'react-native';
import styles from './styles';
import { Container} from 'native-base';
import { MapContainer} from '../../components/MapContainer';
import GetLocation from 'react-native-get-location'
import {Dimensions} from "react-native";
import {
getCurrentLocation,
getInputData,
} from '../../actions/currentLocation';
const {width,height}=Dimensions.get("window");
const ASPECT_RATIO=width/height;
const LATITUDE_DELTA=0.922;
const LONGITUDE_DELTA=ASPECT_RATIO*LATITUDE_DELTA
class Home extends React.Component{
constructor(props){
super(props);
this.state={
latitude:3.14662,
longitude:101.6984,
latitudeDelta:LATITUDE_DELTA,
longitudeDelta:LONGITUDE_DELTA
}
}
componentDidMount(){
GetLocation.getCurrentPosition({
enableHighAccuracy: true,
timeout: 15000,
})
.then(location => {
this.setState({
latitude:location.latitude,
longitude:location.longitude
})
console.log(location)
console.log(this.state.longitude);
})
.catch(error => {
const { code, message } = error;
console.warn(code, message);
}) }
render(){
const region={
latitude:this.state.latitude,
longitude:this.state.longitude,
latitudeDelta:this.state.latitudeDelta,
longitudeDelta:this.state.longitudeDelta
}
return(
<Container>
<MapContainer region={region} getInputData={this.props.getInputData} />
</Container>
);
}
}
const mapStateToProps=(state)=>({
region:state.region,
inputData:state.inputData || {}
});
const mapActionCreators = {
getCurrentLocation,
getInputData,
};
export default connect(mapStateToProps,mapActionCreators)(Home);

development serve response error code 500

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 (
);
}
}

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