Buttons that doesn't appear when render
I followed a video tutorial to add authentication in a React app with expo. The problem is the 2 buttons "Log In" and "Sign Up" does not display
Could you tell me why ?
Sometimes there is such problems when the element is not charged yet, but I don't understand why it would be the case here.
firebase.initializeApp({
apiKey: XXXXXXX,
authDomain: XXXXXXX,
databaseURL: XXXXXXX,
projectId: XXXXXXX,
storageBucket: XXXXXXX,
messagingSenderId: XXXXXXX
});
export default class Login extends React.Component {
state = {
email:'',
password:'',
error:'',
loading:false
};
onLoginPress(){
this.state({error:'', loading:true});
firebase.auth().signInWithEmailAndPassword(email, password)
.then(()=>{
this.state({error:'',loading:false})
this.props.navigation.navigater('Home')
})
.catch (()=> {
this.state({error:"authentif faild", loading:false});
})
}
onSignUpPress(){
this.state({error:'', loading:true});
firebase.auth().createWithEmailAndPassword(email, password)
.then(()=>{
this.state({error:'',loading:false})
this.props.navigation.navigater('Home')
})
.catch (()=> {
this.state({error:"authentif faild", loading:false});
})
}
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
}
render() {
return(
<View>
<FormLabel>Email</FormLabel>
<FormInput onChangeText={email => this.setState({email})}/>
<FormLabel>Password</FormLabel>
<FormInput onChangeText={password => this.setState({password })}/>
{this.renderButtonOrLoading()}
</View>
)
}
}
react-native
add a comment |
I followed a video tutorial to add authentication in a React app with expo. The problem is the 2 buttons "Log In" and "Sign Up" does not display
Could you tell me why ?
Sometimes there is such problems when the element is not charged yet, but I don't understand why it would be the case here.
firebase.initializeApp({
apiKey: XXXXXXX,
authDomain: XXXXXXX,
databaseURL: XXXXXXX,
projectId: XXXXXXX,
storageBucket: XXXXXXX,
messagingSenderId: XXXXXXX
});
export default class Login extends React.Component {
state = {
email:'',
password:'',
error:'',
loading:false
};
onLoginPress(){
this.state({error:'', loading:true});
firebase.auth().signInWithEmailAndPassword(email, password)
.then(()=>{
this.state({error:'',loading:false})
this.props.navigation.navigater('Home')
})
.catch (()=> {
this.state({error:"authentif faild", loading:false});
})
}
onSignUpPress(){
this.state({error:'', loading:true});
firebase.auth().createWithEmailAndPassword(email, password)
.then(()=>{
this.state({error:'',loading:false})
this.props.navigation.navigater('Home')
})
.catch (()=> {
this.state({error:"authentif faild", loading:false});
})
}
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
}
render() {
return(
<View>
<FormLabel>Email</FormLabel>
<FormInput onChangeText={email => this.setState({email})}/>
<FormLabel>Password</FormLabel>
<FormInput onChangeText={password => this.setState({password })}/>
{this.renderButtonOrLoading()}
</View>
)
}
}
react-native
add a comment |
I followed a video tutorial to add authentication in a React app with expo. The problem is the 2 buttons "Log In" and "Sign Up" does not display
Could you tell me why ?
Sometimes there is such problems when the element is not charged yet, but I don't understand why it would be the case here.
firebase.initializeApp({
apiKey: XXXXXXX,
authDomain: XXXXXXX,
databaseURL: XXXXXXX,
projectId: XXXXXXX,
storageBucket: XXXXXXX,
messagingSenderId: XXXXXXX
});
export default class Login extends React.Component {
state = {
email:'',
password:'',
error:'',
loading:false
};
onLoginPress(){
this.state({error:'', loading:true});
firebase.auth().signInWithEmailAndPassword(email, password)
.then(()=>{
this.state({error:'',loading:false})
this.props.navigation.navigater('Home')
})
.catch (()=> {
this.state({error:"authentif faild", loading:false});
})
}
onSignUpPress(){
this.state({error:'', loading:true});
firebase.auth().createWithEmailAndPassword(email, password)
.then(()=>{
this.state({error:'',loading:false})
this.props.navigation.navigater('Home')
})
.catch (()=> {
this.state({error:"authentif faild", loading:false});
})
}
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
}
render() {
return(
<View>
<FormLabel>Email</FormLabel>
<FormInput onChangeText={email => this.setState({email})}/>
<FormLabel>Password</FormLabel>
<FormInput onChangeText={password => this.setState({password })}/>
{this.renderButtonOrLoading()}
</View>
)
}
}
react-native
I followed a video tutorial to add authentication in a React app with expo. The problem is the 2 buttons "Log In" and "Sign Up" does not display
Could you tell me why ?
Sometimes there is such problems when the element is not charged yet, but I don't understand why it would be the case here.
firebase.initializeApp({
apiKey: XXXXXXX,
authDomain: XXXXXXX,
databaseURL: XXXXXXX,
projectId: XXXXXXX,
storageBucket: XXXXXXX,
messagingSenderId: XXXXXXX
});
export default class Login extends React.Component {
state = {
email:'',
password:'',
error:'',
loading:false
};
onLoginPress(){
this.state({error:'', loading:true});
firebase.auth().signInWithEmailAndPassword(email, password)
.then(()=>{
this.state({error:'',loading:false})
this.props.navigation.navigater('Home')
})
.catch (()=> {
this.state({error:"authentif faild", loading:false});
})
}
onSignUpPress(){
this.state({error:'', loading:true});
firebase.auth().createWithEmailAndPassword(email, password)
.then(()=>{
this.state({error:'',loading:false})
this.props.navigation.navigater('Home')
})
.catch (()=> {
this.state({error:"authentif faild", loading:false});
})
}
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
}
render() {
return(
<View>
<FormLabel>Email</FormLabel>
<FormInput onChangeText={email => this.setState({email})}/>
<FormLabel>Password</FormLabel>
<FormInput onChangeText={password => this.setState({password })}/>
{this.renderButtonOrLoading()}
</View>
)
}
}
react-native
react-native
edited Nov 19 at 12:08
Hardik
19829
19829
asked Nov 19 at 11:02
Freddlow
499
499
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
I believe its because you are missing () on your return
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return (
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
}
add a comment |
Return the login in and sign up button view in a Round brackets
return (
<View>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
add a comment |
I think you have missed to add round brackets for return method.
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return (
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
}
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373220%2fbuttons-that-doesnt-appear-when-render%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
I believe its because you are missing () on your return
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return (
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
}
add a comment |
I believe its because you are missing () on your return
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return (
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
}
add a comment |
I believe its because you are missing () on your return
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return (
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
}
I believe its because you are missing () on your return
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return (
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
}
answered Nov 19 at 11:32
kivul
447112
447112
add a comment |
add a comment |
Return the login in and sign up button view in a Round brackets
return (
<View>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
add a comment |
Return the login in and sign up button view in a Round brackets
return (
<View>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
add a comment |
Return the login in and sign up button view in a Round brackets
return (
<View>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
Return the login in and sign up button view in a Round brackets
return (
<View>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
answered Nov 19 at 11:32
Abinesh Joyel
1,0221511
1,0221511
add a comment |
add a comment |
I think you have missed to add round brackets for return method.
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return (
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
}
add a comment |
I think you have missed to add round brackets for return method.
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return (
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
}
add a comment |
I think you have missed to add round brackets for return method.
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return (
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
}
I think you have missed to add round brackets for return method.
renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return (
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
)
}
answered Nov 19 at 11:46
Poonam
814
814
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373220%2fbuttons-that-doesnt-appear-when-render%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown