So, basically, I have two JavaScript files, in one of them there's a function that authenticates to an API and the other one is the login screen running in the emulator. When I try to authenticate, I get the error:
undefined is not an object (evaluating 'password.toString')
This is the login screen file:
import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity} from 'react-native';
import styles from './login-styles';
import {auth} from '../../fetches/auth';
class LoginBox extends Component {
constructor(props) {
super(props)
this.state = {
username: '',
password: ''
}
}
render = () => {
return(
<View style={styles.box}>
<View style={styles.header}>
<Text style={{fontSize: 28}}>Bem-vindo ao PostBag v 0.0.2</Text>
</View>
<View styles={styles.app}>
<TextInput style={styles.square}
keyboardType="numeric"
placeholder='Insira sua matrúcla'
onChangeText={(text) => this.setState({username: text})}
value={this.state.username}
/>
<TextInput style={styles.square}
secureTextEntry
placeholder='Insira sua senha'
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}
/>
<TouchableOpacity
style={styles.button}
onPress={() => auth((this.state.username, this.state.password))}
>
<Text style={styles.buttonTxt}>POST</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
export default LoginBox;
This is the authentication function:
import {Alert} from 'react-native';
export function auth(username, password) {
fetch('https://suap.ifrn.edu.br:443/api/v2/autenticacao/token/',
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-csrftoken': 'NDML6yy6HgTUIoypfWMZHMKZ32lgJf5PsNolVnLgewanw5YM4rqwkuvgkyAhEYEA'
},
body: JSON.stringify({
username: username.toString(),
password: password.toString()
})
}).then(function(response) {
var json = response.json()
json.then((data) => {
token = data.token
if (typeof token === 'undefined') {
Alert.alert('Não foi possível fazer login')
}
else {
Alert.alert('Login feito com sucesso')
}
})
})
}
I would really appreciate if anyone could help me with that. Everything that I tried did not work.
I think, because of that password or username is null or undefined at that moment. You can check if they are defined and they are strings as below,
body: JSON.stringify({
username: typeof username === 'string' ? username.toString() : '',
password: typeof password === 'string' ? password.toString() : ''
})
and your view should be changed as follow,
onPress={() => auth(this.state.username, this.state.password)}
Delete extra brackets from onPress.
auth(this.state.username, this.state.password)
Change this
<TouchableOpacity
style={styles.button}
onPress={() => auth((this.state.username, this.state.password))}
>
to
<TouchableOpacity
style={styles.button}
onPress={() => auth(this.state.username, this.state.password)}
>
Also, whenever you're accessing objects with dot operator (.toString()), it's safe to check if the object is present in the first place.
So it's a good idea to convert this
body: JSON.stringify({
username: username.toString(),
password: password.toString()
})
to
body: JSON.stringify({
username: username && username.toString(),
password: password && password.toString()
})
Related
I am a beginner and I'm using Django in the backend of my react native app. I am unable to add data to the django admin panel from my app using fetch method. I am not getting any errors but my data is not getting posted to the backend.I have used the django api as the url in fetch method.
Please let me know if any other code snippet is required to check.
Would appreciate some help here.
export class LoginScreen extends Component {
constructor() {
super();
this.state = {
email: '',
name: '',
};
}
updateValue(text, field) {
if (field == 'email') {
this.setState({
email: text,
});
} else if (field == 'pwd') {
this.setState({
pwd: text,
});
}
}
submit() {
let collection = {};
collection.email = this.state.email;
collection.pwd = this.state.pwd;
console.warn(collection);
let url='http://10.0.0.2:8000/api/mdlApp/'
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(collection),
})
.then((response) => response.json())
.then((collection) => {
console.log('Success:', collection);
})
.catch((error) => {
console.error('Error:', error);
});
}
render() {
return (
<ImageBackground source={require('../images/bg4.png')} style={styles.bg}>
<SafeAreaView style={styles.container}>
<Logo />
<View style={styles.container1}>
<TextInput
style={styles.inputBox}
name="email"
placeholder="Enter Your Email"
placeholderTextColor="#ffffff"
onChangeText={(text) => this.updateValue(text, 'email')}
/>
<TextInput
style={styles.inputBox}
name="pwd"
placeholder="Enter Your Password"
secureTextEntry={true}
placeholderTextColor="#ffffff"
onChangeText={(text) => this.updateValue(text, 'pwd')}
/>
<TouchableOpacity
//onPress={() => this.props.navigation.navigate('HomeApp')}
onPress={() => this.submit()}
style={styles.button}
htmlType="submit">
<Text style={styles.buttonText}> LOGIN </Text>
</TouchableOpacity>
</View>
<View style={styles.signupTextCont}>
<Text style={styles.signupText}>Don't have an account yet?</Text>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Register')}
style={styles.signupButton}>
<Text>Register Now</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</ImageBackground>
);
}
}
change ur code as follows..install axios first
submit = () => {
const url='http://10.0.0.2:8000/api/mdlApp/'
let collection = {
email: this.state.email,
pwd: this.state.pwd
};
axios.post(`${url}`, collection, {
headers: {
'content-type': 'application/json'
}
} ).then(res => {
console.log(res.data)
}))
}
I am coding a stripe React Native gateway and I was coding stripe connections to the API. I used the API in connecting to Stripe but it says that I am not connected to the API. This is mainly in two files: ShopScreen.js and index.js.
Here is ShopScreen.js:
import {PureComponent} from 'react';
import stripe from 'tipsi-stripe';
import Button from '../components/components/Button';
import {
ActivityIndicator,
TouchableOpacity,
TextInput,
Image,
ImageBackground,
} from 'react-native';
import * as React from 'react';
import axios from 'axios';
import {WebView} from 'react-native-webview';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
FlatList,
} from 'react-native';
stripe.setOptions({
publisherKey: 'pk_test_HWcOeGStIfoP98VZkHRIJUmO00E1eZyuQG',
});
class ShopScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
search: '',
data: [],
};
}
handleSearch = (text) => {
this.setState({search: text});
};
componentDidMount() {
axios
.get('http://localhost:3000')
.then((response) => {
this.setState({
data: response.data,
});
})
.catch(function (err) {
alert(err);
});
}
static title = 'Card Form';
state = {
loading: false,
token: null,
};
handleCardPayPress = async () => {
try {
this.setState({loading: true, token: null});
const token = await stripe.paymentRequestWithCardForm({
// Only iOS support this options
smsAutofillDisabled: true,
requiredBillingAddressFields: 'full',
prefilledInformation: {
billingAddress: {
name: 'Vaibhav Herugu',
line1: '2 Darryl Drive',
line2: '',
city: 'Morganville',
state: 'NJ',
country: 'USA',
postalCode: '07751',
email: 'vherugu#gmail.com',
},
},
});
this.setState({loading: false, token: token});
} catch (error) {
this.setState({loading: false});
}
};
makePayment = async () => {
this.setState({loading: true});
axios({
method: 'POST',
url:
'https://us-central1-localmainstreet-b0144.cloudfunctions.net/completePaymentWithStripe',
data: {
amount: 0,
currency: 'usd',
token: this.state.token,
},
}).then((response) => {
console.log(response);
this.setState({loading: false});
});
};
render() {
const {loading, token} = this.state;
console.log('##data', this.state.data);
const Item = ({user}) => {
console.log('##item', user);
return (
<View>
<View style={styles.viewforFlatList}>
<View style={styles.viewforButton}>
<Text style={styles.businessNameStyle}>{user.item.bname}</Text>
<View style={styles.container}>
<Button
style={styles.buttons1}
text="Buy Now"
loading={loading}
onPress={this.handleCardPayPress}
/>
<View style={styles.token}>
{token && (
<>
<Text style={styles.instruction}>
Token: {this.state.token}
</Text>
{this.makePayment}
</>
)}
</View>
</View>
</View>
</View>
<Text style={styles.businessDescandEmailStyle}>
{user.item.bdesc}
</Text>
<Text style={styles.businessDescandEmailStyle}>
Email: {user.item.email}
</Text>
<Text style={styles.phoneNumberStyle}>
Phone Number: {user.item.phonenum}
</Text>
</View>
);
};
const {navigate} = this.props.navigation;
return (
<View style={styles.viewForSearch}>
<StatusBar barStyle="dark-content" />
<View style={styles.viewforButton}>
<TextInput
style={styles.input2}
underlineColorAndroid="transparent"
placeholder="Business Category/Name"
placeholderTextColor="#000000"
autoCapitalize="none"
onChangeText={this.handleSearch}
/>
<TouchableOpacity style={styles.buttons}>
<Text style={styles.buttonText}>Search</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
style={styles.buttonsUnderLogin}
onPress={() => {
navigate('Help');
}}>
<Text style={styles.buttonTextForSignUp}>Help</Text>
</TouchableOpacity>
{/* <WebView
source={{ uri: 'https://reactnative.dev' }}
style={{ marginTop: 20 }}
/> */}
<View style={styles.FlatList}>
<FlatList
data={this.state.data}
renderItem={(user) => <Item user={user} />}
keyExtractor={(user) => user.id}
/>
</View>
</View>
);
}
}
export default ShopScreen;
(styles not shown for ShopScreen.js)
and here is index.js:
const functions = require('firebase-functions');
const stripe = require('stripe')('SECRET-KEY');
exports.completePaymentWithStripe = functions.https.onRequest(
(request, response) => {
stripe.charges
.create({
amount: request.body.amount,
currency: request.body.currency,
source: 'tok_mastercard',
})
.then((charge) => {
response.send(charge);
return charge;
})
.catch((error) => {
console.log(error);
});
},
);
(where it says SECRET-KEY I added my secret key)
This is supposed to connect to Stripe and process my payment. Instead, it shows,
I went to the docs and tried using what it said to use, but it didn't work, so I deleted it.
This is my problem. Thanks.
hey the issue is that you haven't added the token with your request
exports.completePaymentWithStripe = functions.https.onRequest(
(request, response) => {
stripe.customers.create(req.body.token).then(customer => {
stripe.charges
.create({
amount: request.body.amount,
currency: request.body.currency,
source: 'tok_mastercard',
customer: customer.id
})
})
.then((charge) => {
response.send(charge);
return charge;
})
.catch((error) => {
console.log(error);
});
},
);
I'm new to react-native. I currently try to set the login of react-native by using the Laravel API. The API that I used already tested and its work. But when I tried to put in the react-native, it shows the error while i called the API.
The warning in the emulator is:
Possible Unhandled Promise Rejection (id:0):
TypeError: Network request failed
Here is my code.
import React, { Component } from 'react';
import {
StyleSheet,
View,
TextInput,
Text,
TouchableOpacity,
Alert,
AsyncStorage,
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import Logo from '../components/Logo';
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
}
};
signup(){
Actions.signup()
}
home(){
Actions.home()
}
handleLogin = () => {
fetch('http://localhost:8888/api/login',{
method: 'POST',
header:{
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: this.state.email,
password: this.state.password,
})
})
.then((response) => response.json())
.then((res) => {
if (res.success === true){
alert(res.message)
}else{
alert(res.message)
}
alert('test')
})
}
render() {
return (
<View style={styles.container}>
<Logo/>
<View style={styles.inputContainer}>
<TextInput style={styles.inputBox}
underlineColorAndroid='0,0,0,0'
placeholder='Email'
placeholderTextColor= 'grey'
keyboardType= 'email-address'
onChangeText={(text) => this.setState({email:text})}
onSubmitEditing={()=> this.password.focus()}
/>
<TextInput style={styles.inputBox}
underlineColorAndroid='0,0,0,0'
placeholder='Password'
placeholderTextColor= 'grey'
secureTextEntry= {true}
ref={(input) => this.password = input}
onChangeText={(text) => this.setState({password:text})}
/>
<TouchableOpacity style={styles.button} onPress={this.handleLogin}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
<View style={styles.signupText}>
<Text>Don't have an account? </Text>
<TouchableOpacity onPress={this.signup}>
<Text style={styles.signupButton}>Signup</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
Anyone know what's the problem?
Problem solved by setup the adb and use the adb reverse command.
EXAMPLE
adb reverse tcp:8081 tcp:3333
https://stackoverflow.com/a/39108921/12988525
Hello stackoverflow community I am having problem in using onpress method. Actually i want to fire two functions on a single button click like if i press Register button the validate() function and userRegister function works first validate function validate all the fields and then register function registers user into db. I seen setState is responsible for this kind of behaviour since i m new in react native development so i cant implement this kind of functionality
my code :
import React, { Component } from 'react';
import {ToastAndroid, StyleSheet, View, TextInput, Button, Text, Alert } from 'react-native';
export default class Project extends Component {
constructor(props) {
super(props)
this.state = {
UserName: '',
UserEmail: '',
UserPassword: '',
cpassword: "",
UserCity: ''
};
}
Validate=()=>{
if(this.state.UserName == ""){
ToastAndroid.show('Enter UserName',ToastAndroid.SHORT)
}
else if(this.state.UserEmail == ""){
ToastAndroid.show('Enter Email',ToastAndroid.SHORT)
}
else if(this.state.UserPassword == ""){
ToastAndroid.show('Enter Password',ToastAndroid.SHORT)
}
else if(this.state.cpassword == ""){
ToastAndroid.show('Enter Confirm Password',ToastAndroid.SHORT)
}
else if (this.state.UserPassword != this.state.cpassword){
ToastAndroid.show('Password did not match',ToastAndroid.SHORT)
}
else if(this.state.UserCity == ""){
ToastAndroid.show('Enter City Name',ToastAndroid.SHORT)
}
else {
ToastAndroid.show('User Registration Sucessfull', ToastAndroid.SHORT)
}
console.log(this.state)
}
UserRegistrationFunction = () =>{
const {UserName} = this.state;
const {UserEmail} = this.state;
const {UserPassword} = this.state;
const {UserCity} = this.state;
fetch('http://192.168.0.107/loginrn/user_registration.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: this.state.UserName,
email: this.state.UserEmail,
password: this.state.UserPassword,
//confpassword: this.state.cpassword
city : this.state.UserCity,
})
}).then((response) => response.json())
.then((responseJson) => {
// Showing response message coming from server after inserting records.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
}
render() {
return (
<View style={styles.MainContainer}>
<Text style= {styles.title}>User Registration Form</Text>
<TextInput
placeholder="Enter User Name"
onChangeText={name => this.setState({UserName : name})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder="Enter User Email"
onChangeText={email => this.setState({UserEmail : email})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder="Enter User Password"
onChangeText={password => this.setState({UserPassword : password})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
//secureTextEntry={true}
/>
<TextInput
placeholder="Enter User Confirm Password"
onChangeText={cpassword => this.setState({cpassword})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
//secureTextEntry={true}
/>
<TextInput
placeholder="Enter User City Name"
onChangeText={city => this.setState({UserCity : city})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
//secureTextEntry={true}
/>
<Button title="Click Here To Register"
onPress={this.Validate}
color="#2196F3" />
<Button title = "Next" onPress={this.UserRegistrationFunction} color = "#2196F3"/>
</View>
);
}
}
Pass the validate function to onPress = {()=> this.validate()}
And then pass the UserRegistrationFunction in validate function at the end.
import React, { Component } from 'react';
import {ToastAndroid, StyleSheet, View, TextInput, Button, Text, Alert } from 'react-native';
export default class Project extends Component {
constructor(props) {
super(props)
this.state = {
UserName: '',
UserEmail: '',
UserPassword: '',
cpassword: "",
UserCity: ''
};
}
Validate=()=>{
if(this.state.UserName == ""){
ToastAndroid.show('Enter UserName',ToastAndroid.SHORT)
}
else if(this.state.UserEmail == ""){
ToastAndroid.show('Enter Email',ToastAndroid.SHORT)
}
else if(this.state.UserPassword == ""){
ToastAndroid.show('Enter Password',ToastAndroid.SHORT)
}
else if(this.state.cpassword == ""){
ToastAndroid.show('Enter Confirm Password',ToastAndroid.SHORT)
}
else if (this.state.UserPassword != this.state.cpassword){
ToastAndroid.show('Password did not match',ToastAndroid.SHORT)
}
else if(this.state.UserCity == ""){
ToastAndroid.show('Enter City Name',ToastAndroid.SHORT)
}
else {
this.UserRegistrationFunction();
}
console.log(this.state)
}
UserRegistrationFunction = () =>{
const {UserName} = this.state;
const {UserEmail} = this.state;
const {UserPassword} = this.state;
const {UserCity} = this.state;
fetch('http://192.168.0.107/loginrn/user_registration.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: this.state.UserName,
email: this.state.UserEmail,
password: this.state.UserPassword,
//confpassword: this.state.cpassword
city : this.state.UserCity,
})
}).then((response) => response.json())
.then((responseJson) => {
// Showing response message coming from server after inserting records.
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
}
render() {
return (
<View style={styles.MainContainer}>
<Text style= {styles.title}>User Registration Form</Text>
<TextInput
placeholder="Enter User Name"
onChangeText={name => this.setState({UserName : name})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder="Enter User Email"
onChangeText={email => this.setState({UserEmail : email})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder="Enter User Password"
onChangeText={password => this.setState({UserPassword : password})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
//secureTextEntry={true}
/>
<TextInput
placeholder="Enter User Confirm Password"
onChangeText={cpassword => this.setState({cpassword})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
//secureTextEntry={true}
/>
<TextInput
placeholder="Enter User City Name"
onChangeText={city => this.setState({UserCity : city})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
//secureTextEntry={true}
/>
<Button title="Click Here To Register"
onPress={()=>this.Validate()}
color="#2196F3" />
<Button title = "Next" onPress={this.UserRegistrationFunction} color = "#2196F3"/>
</View>
);
}
}
As i mentioned below, You can call two function like this (in class component)
login=()=>{
console.log('login')
}
register =()=>{
console.log('register')
}
<Button title = "Next" onPress={()=>[this.user(),this.register()]}/>
According to your requirement, You should use something like this.
import React, { Component } from 'react';
import {
Alert,
View,
Text,
Image,
TouchableOpacity,
Button,
TextInput,
} from 'react-native';
class HomeScreen extends Component {
state = {
date: '',
month: '',
year: '',
isErrorDate: false,
isErrorDateLenght: false,
isErrorMonth: false,
isErrorMonthLength: false,
isErrorYear: false,
isErrorYearLength: false,
};
onChangeDate = value => {
this.setState({
date: value,
isErrorDate: false,
isErrorDateLenght: false,
});
};
onChangeMonth = value => {
this.setState({
month: value,
isErrorMonth: false,
isErrorMonthLength: false,
});
};
onChangeYear = value => {
this.setState({
year: value,
isErrorYear: false,
isErrorYearLength: false,
});
};
doRegister = () => {
console.log('you have registered');
};
checkDate = () => {
//validation part or function
const { date, month, year } = this.state;
let isErrorDate = date.trim() === '' ? true : false;
let isErrorDateLenght =
date.length > 2 || !/^[0-9]+$/.test(date) || date > 31 ? true : false;
let isErrorMonth = month.trim() === '' ? true : false;
let isErrorMonthLength =
month.length > 2 || !/^[0-9]+$/.test(month) || month > 12 ? true : false;
let isErrorYear = year.trim() === '' ? true : false;
let isErrorYearLength =
year.length > 4 || !/^[0-9]+$/.test(year) ? true : false;
if (
isErrorDate ||
isErrorDateLenght ||
isErrorMonth ||
isErrorMonthLength ||
isErrorYear ||
isErrorYearLength
) {
this.setState({
isErrorDate: isErrorDate,
isErrorDateLenght: isErrorDateLenght,
isErrorMonth: isErrorMonth,
isErrorMonthLength: isErrorMonthLength,
isErrorYear: isErrorYear,
isErrorYearLength: isErrorYearLength,
});
Alert.alert('invalid date /month/ year');
} else {
//submit date and call other functions
this.doRegister();
}
};
render() {
return (
<View style={{ flex: 1 }}>
<View>
<View>
<View style={{ padding: 10 }}>
<TextInput
placeholder="DD"
keyboardType="number-pad"
value={this.state.date}
onChangeText={this.onChangeDate}
/>
</View>
<View style={{ padding: 10 }}>
<TextInput
placeholder="MM"
keyboardType="number-pad"
value={this.state.month}
onChangeText={this.onChangeMonth}
/>
</View>
<View style={{ padding: 10 }}>
<TextInput
placeholder="AA"
keyboardType="number-pad"
value={this.state.year}
onChangeText={this.onChangeYear}
/>
</View>
</View>
</View>
<View>
<Button title ="Next" onPress={this.checkDate}/>
</View>
</View>
);
}
}
export default HomeScreen;
Change this according to your requirement. Feel free for doubts
I am creating an app with react-native and I would like to use createStackNavigator to have three screens. I have a button that I would like to be used to take the user to the third screen.
Here is my code for createStackNavigator
const RootStack = createStackNavigator({
Login: {
screen: LoginActivity
},
Profile: {
screen: ProfileActivity
},
MakeAccount: {
screen: MainProject
}
});
const AppContainer = createAppContainer(RootStack);
export default AppContainer;
Here is my code for the button that navigate to the page/screen
<Button title="Click Here To Create an Account" onPress={() => this.props.navigation.navigate('MakeAccount')} color="#2196F3" />
When I run my app on an iso simulator with Xcode, I get the following message:
I don't know why this is happening...
Also, here's my MainProject class:
class MainProject extends Component {
constructor(props) {
super(props)
this.state = {
UserName: '',
UserEmail: '',
UserPassword: ''
}
}
UserRegistrationFunction = () => {
const { UserName } = this.state;
const { UserEmail } = this.state;
const { UserPassword } = this.state;
fetch('http://ip/user_registration.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: UserEmail,
password: UserPassword
})
}).then((response) => response.json())
.then((responseJson) => {
Alert.alert(responseJson);
}).catch((error) => {
console.error(error);
});
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={{ fontSize: 20, color: "#000", textAlign: 'center', marginBottom: 15}}>User Registron Form</Text>
<TextInput
placeholder="Enter User Name"
onChangeText={UserName => this.setState({UserName})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder="Enter User Email"
onChangeText={UserEmail => this.setState({UserEmail})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder="Enter User Password"
onChangeText={UserPassword => this.setState({UserPassword})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
secureTextEntry={true}
/>
<Button title="Click Here To Register" onPress={this.UserRegistrationFunction} color="#2196F3" />
</View>
);
}
}
export default MainProject;
Looking at the code you have posted here, it seems that the creation of stackNavigator is ok. The error message is very clear about the problem:
"MakeAccount" must be a React Component.
So, it probably means that you are not extending React.Component on MainProject class, or your imports/exports are not correct either where the MainProject are being instantiated OR where you are importing the class (That should be in the same file that you create the stack).
It needs to be something like this, on the file where you instantiate MainProject:
import React from "react";
export default class MainProject extends React.Component {
...
}
Then import it where you are creating the navigator as:
import MainProject from "./CompletePathToMainProject";
...
//Your logic of stackNavigator creation
I don't know how your folders and files are structured, so above CompletePathToMainProject means something like ./account/MainProject.js based on the informations you gave until now