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>
);
}
}
Related
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>
);
}
}
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);
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 (
);
}
}
I'm tying to change content of tabs in react-native-material-bottom-navigation but when I press tab it redirect me to respective page. I want to change content between header and tabs. I've tried below code but I don't know how to display content in condition statement.
HomeScreen.js
import React, {Component} from 'react';
import {Text, View } from 'react-native';
import BottomNavigation, { Tab } from 'react-native-material-bottom-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';
import HomeScreenContent from './HomeScreenContent';
import Categories from './Categories';
import Profile from './Profile';
export default class HomeScreen extends Component {
constructor(props) {
super(props);
this.handleTabChange = this.handleTabChange.bind(this);
this.state = { activeTab: 0 };
}
handleTabChange(newTabIndex, oldTabIndex) {
this.setState({ activeTab: newTabIndex });
if (newTabIndex === oldTabIndex) {
null;
}
if (this.state.activeTab === 0) {
<HomeScreenContent />
} else if (this.state.activeTab === 1) {
<Categories/>
} else {
<Profile />
}
}
render() {
return (
<View style={styles.container}>
<BottomNavigation
activeTab={this.state.activeTab}
labelColor="#5c007a"
rippleColor="white"
style={{
height: 56,
elevation: 8,
position: 'absolute',
left: 0,
bottom: 0,
right: 0
}}
onTabChange={this.handleTabChange}
>
<Tab
barBackgroundColor="#fff"
label="Home"
icon={<Icon size={24} color="#5c007a" name="home" />}
/>
<Tab
barBackgroundColor="#fff"
label="Categories"
icon={<Icon size={24} color="#5c007a" name="list" />}
/>
<Tab
barBackgroundColor="#fff"
label="Profile"
icon={<Icon size={24} color="#5c007a" name="person" />}
/>
</BottomNavigation>
</View>
);
}
}
HomeScreenContent.js
import React from 'react';
import { TouchableOpacity, ScrollView, Image, Dimensions , StyleSheet, Text, View } from 'react-native';
export default class HomeScreenContent extends React.Component {
render() {
return (
<View>
<Text> Hello from HomeScreen</Text>
</View>
);
}
}
Categories.js
import React from 'react';
import { Text, View } from 'react-native';
export default class HomeScreenContent extends React.Component {
render() {
return (
<View>
<Text> Hello from Categories</Text>
</View>
);
}
}
Profile.js
import React from 'react';
import {Text, View } from 'react-native';
export default class HomeScreenContent extends React.Component {
render() {
return (
<View>
<Text> Hello from Profile</Text>
</View>
);
}
}
For some strange reason, the header has a height of 667. I have copy pasted the code from an example page. See screenshot:
Code:
import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class HeaderIconTextExample extends Component {
render() {
return (
<Container>
<Header style={{backgroundColor:'red'}}>
<Left>
<Button transparent>
<Icon style={{color:'white'}} name='menu' />
</Button>
</Left>
<Body>
<Title style={{color:'white'}}>{this.props.headerText}</Title>
</Body>
<Right>
<Button transparent>
<Icon style={{color:'white'}} name='ios-add' />
</Button>
</Right>
</Header>
</Container>
);
}
}
I have tried to apply a height to the container (e.g. 100 pixels) but that does not change anything.
Update
I have realised, that if I remove ScrollView, then the content is in the very top, in front of the header, like this:
Code:
import React, {
Component
} from 'react';
import {
ScrollView, View
} from 'react-native';
import KeyDetail from './KeyDetail'
import axios from 'axios';
class KeyList extends Component {
state = {
keys: []
};
componentWillMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(response => this.setState({ keys: response.data }));
}
renderKeys() {
return this.state.keys.map(key =>
<KeyDetail thekey={key} key={key.title} />
);
}
render() {
return (
<ScrollView>
{ this.renderKeys() }
</ScrollView>
);
}
}
export default KeyList;
index.ios.js
/**
* Import a library to help create a component
*/
import React from 'react';
import {
AppRegistry,
View
} from 'react-native';
import Header from './src/components/Header';
import KeyList from './src/components/KeyList';
/**
* Create a component
*/
const App = () => (
<View style={{ flex: 1 }}>
<Header headerText={'Your Keys'} />
<KeyList />
</View>
);
/**
* Render to device
*/
AppRegistry.registerComponent('myapp', () => App);
Hmm. The solution (although not as pretty), is to wrap KeyList in index.ios.js inside a View, and then add marginBottom to prevent content from floating inside header.
index.ios.js
/**
* Import a library to help create a component
*/
import React from 'react';
import {
AppRegistry,
View
} from 'react-native';
import Header from './src/components/Header';
import KeyList from './src/components/KeyList';
/**
* Create a component
*/
const App = () => (
<View style={{ flex: 1 }}>
<Header headerText={'Your Keys'} />
<View>
<KeyList />
</View>
</View>
);
/**
* Render to device
*/
AppRegistry.registerComponent('uniqkey', () => App);
Header.js
import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class HeaderIconTextExample extends Component {
render() {
return (
<Container style={{marginBottom:64}}>
<Header style={{backgroundColor:'red'}}>
<Left>
<Button transparent>
<Icon style={{color:'white'}} name='menu' />
</Button>
</Left>
<Body>
<Title style={{color:'white'}}>{this.props.headerText}</Title>
</Body>
<Right>
<Button transparent>
<Icon style={{color:'white'}} name='ios-add' />
</Button>
</Right>
</Header>
</Container>
);
}
}
In your HeaderIconTextExample component you haven't specify the height for the header. Add this style in HeaderIconTextExample component.
const Styles = StyleSheet.create({
viewStyle: {
backgroundColor: '#F8F8F8',
justifyContent: 'center',
alignItems: 'center',
height: 60,
paddingTop: 15,
},
});
const { viewStyle } = Styles;
Update this line:
<Header style={{backgroundColor:'red'}}>
to this:
<Header style={viewStyle}>
It will work fine.
You can check my complete github repo code of this Albums react native App.