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
Related
I am new to React Native and I am trying to create a simple app with tab navigation to fetch NBA data. I created a Team page with 2 buttons to fetch East or West conference team data. I tried to pass all the params from App.js to Team.js. It was meant to be fetching the data from the API when button is clicked.
However, an error occured when i tried to press the button in Team (the two buttons in Category component)
Error: Category.js:13:70 TypeError: undefined is not a function, js engine: hermes) ... a function (confOncClick) that was used in the Category.js (A component in Team page) is undefined
Error screenshot: Error
App.js
import React, {useState} from 'react';
import {View, Text, StyleSheet, FlatList, Alert} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import {v4 as uuid} from 'uuid';
import 'react-native-get-random-values';
import Team from './pages/Team';
import Header from './components/Header';
import Home from './pages/Home';
import axios from 'axios';
const App = () => {
const [teamData, setTeamData] = useState([]);
const [confIndex, setConfIndex] = useState();
function SettingsScreen() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Settings!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
const confOnClick = async text => {
console.log(text);
if (text === 'East') {
setConfIndex(0);
} else {
setConfIndex(1);
}
const options = {
method: 'GET',
url: 'https://api-nba-v1.p.rapidapi.com/teams',
params: {conference: text},
headers: {
'X-RapidAPI-Key': /.../,
'X-RapidAPI-Host': 'api-nba-v1.p.rapidapi.com',
},
};
await axios
.request(options)
.then(function (response) {
console.log(response.data.response);
console.log(typeof response.data.response);
setTeamData(response.data.response);
})
.catch(function (error) {
console.error(error);
});
};
return (
<View style={styles.container}>
<Header />
<NavigationContainer>
<Tab.Navigator screenOptions={{headerShown: false}}>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen
name="Team"
component={Team}
options={{confOnClick: confOnClick, teamData: teamData}}
/>
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
</NavigationContainer>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;
Team.js
import React from 'react';
import {View, StyleSheet, FlatList, Alert} from 'react-native';
import ListItem from '../components/ListItem';
import Category from '../components/Category';
function Team({confOnClick, teamData}) {
return (
<View>
<Category confOnClick={confOnClick} />
<FlatList
data={teamData}
renderItem={({item}) => <ListItem item={item} />}
/>
</View>
);
}
export default Team;
Category.js
import React from 'react';
import {View, StyleSheet, FlatList, Alert} from 'react-native';
import ListItem from '../components/ListItem';
import Category from '../components/Category';
function Team({confOnClick, teamData}) {
return (
<View>
<Category confOnClick={confOnClick} />
<FlatList
data={teamData}
renderItem={({item}) => <ListItem item={item} />}
/>
</View>
);
}
export default Team;
the confOnClick passed to Category seems to be undefined but I am not sure what is the issue. Could be because of the way I pass from app.js?
<Tab.Screen
name="Team"
component={Team}
options={{confOnClick: confOnClick, teamData: teamData}}
/>
hope I made it clear and please let me know if I can provide more info
I have tried passing the params in different ways in Tab.Screen navigator with initialParams, params, options and also change the component to children but somehow i didn't get it right.
you can use initialParams in Tab.Screen like
<Tab.Screen
name="Team"
component={Team}
initialParams={{confOnClick: confOnClick, teamData: teamData}}
/>
Team.js
function Team({route}) {
const {confOnClick, teamData} = route.params;
...
}
I started to learn react-native and for now I created a few components in order to use signing in my firebase project. I already created a firebase project from firebase console and dealt with lots of errors. Finally I created my App.js as :
import React, {Component} from 'react';
import {View} from 'react-native';
//import firebase from 'firebase';
//import firebase from '#firebase/app';
import * as firebase from 'firebase';
import '#firebase/auth';
import Header from './src/components/common/Header';
import LoginForm from './src/components/LoginForm';
import CardSection from './src/components/common/CardSection';
import Button from './src/components/common/Button';
import Spinner from './src/components/common/Spinner';
class Main extends Component {
state = {loggedIn: null};
componentDidMount() {
if (!firebase.apps.length) {
firebase.initializeApp({
apiKey: 'AIzaSyCuggnPGozfGB9M1elP7yOG5kdH3Xk5BDM',
authDomain: 'digitus-trial.firebaseapp.com',
databaseURL:
'https://digitus-trial-default-rtdb.europe-west1.firebasedatabase.app',
projectId: 'digitus-trial',
storageBucket: 'digitus-trial.appspot.com',
messagingSenderId: '811615820065',
appId: '1:811615820065:web:993900aab9e5927b5a0660',
measurementId: 'G-4KSTW48LX0',
});
} else {
firebase.app();
}
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.setState({loggedIn: true});
} else {
this.setState({loggedIn: false});
}
});
}
logoutClicked() {
firebase.auth().signOut();
}
renderContent() {
switch (this.state.loggedIn) {
case true:
return (
<CardSection>
<Button onPress={this.logoutClicked.bind(this)}>Logout</Button>
</CardSection>
);
case false:
return <LoginForm />;
default:
return (
<View>
<Spinner size="large" />
</View>
);
}
}
render() {
return (
<View>
<Header headerText="Digitus Trial" />
{this.renderContent()}
</View>
);
}
}
export default Main;
My problem is when I press login button my button fade out instead of showing a indicator. And also I couldn't get any message which I already put console.log flagging. I'm working with Windows 10 and Android emulator. Can you help me out? For further information here is my form file:
import React, {Component} from 'react';
import {TextInput} from 'react-native';
import firebase from '#firebase/app';
import '#firebase/auth';
import Button from './common/Button';
import Card from './common/Card';
import CardSection from './common/CardSection';
import Spinner from './common/Spinner';
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {email: '', password: '', loading: false};
}
loginClick() {
this.setState({loading: true});
const {email, password} = this.state;
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(this.loginSuccess.bind(this))
.catch(() => {
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then(this.loginSuccess.bind(this))
.catch(this.loginFail.bind(this));
});
}
onPressSignIn() {
this.setState({
loading: true,
});
}
renderCurrentState() {
const {inputStyle} = styles;
if (this.state.loading) {
return (
<Card>
<CardSection>
<TextInput
placeholder="Email"
style={inputStyle}
value={this.state.email}
onChangeText={(email) => this.setState({email})}
/>
</CardSection>
<CardSection>
<TextInput
placeholder="Password"
style={inputStyle}
value={this.state.password}
onChangeText={(password) => this.setState({password})}
/>
</CardSection>
<CardSection>
<Spinner size="large" />
</CardSection>
</Card>
);
}
return (
<Card>
<CardSection>
<TextInput
placeholder="Email"
style={inputStyle}
value={this.state.email}
onChangeText={(email) => this.setState({email})}
/>
</CardSection>
<CardSection>
<TextInput
placeholder="Password"
style={inputStyle}
value={this.state.password}
onChangeText={(password) => this.setState({password})}
/>
</CardSection>
<CardSection>
<Button onPress={() => this.onPressSignIn()}>Login</Button>
</CardSection>
</Card>
);
}
render() {
return <Card>{this.renderCurrentState()}</Card>;
}
}
//Android has no shadow property, in order to use in IOS emulator make elevation:1
const styles = {
inputStyle: {
color: '#000',
paddingRight: 5,
paddingLeft: 5,
fontSize: 18,
lineHeight: 23,
flex: 1,
},
};
export default LoginForm;
After several trials, I found that firebase services are too slow. For every login operation, I need to wait 30 secs or so. So my problem was solved.
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>
);
}
}
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'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 ./.