Text not appearing on ios / android device but working fine on simulator
I've been working on deploying a react-native project which has been working (and continues to work) fine on both ios and android simulator. I've recently deployed it to beta in the playstore and testflight and when we launch the app it appears that some placeholder & default text is missing :-(
I'm new to react-native development, so any advice is greatly appreciated. Could it be that i'm missing something when generating my app bundle? I'm using react-native: 0.55.4. Below is the code on my login page where the labels are missing & the inputs are not being passed to the subsequent page.
.
.
.
constructor(props)
super(props);
this.state =
username: '',
password: '',
isJobOwner: false,
saveCredentials: false,
isLoading: false
;
.
.
.
onPressLogin()
this.props.navigation.navigate('SignUpChoice',
data:
username: this.state.username,
password: this.state.password
);
.
.
.
<Form style=styles.loginForm>
<View style=styles.formInputs>
<UnderlinedInput floating=true label='Email' value=this.state.username
onChangeText=(username) => this.setState(username)
keyboardType='email-address' autoCapitalize='none'/>
<UnderlinedInput floating=true label='Password' value=this.state.password
onChangeText=(password) => this.setState(password)
secureTextEntry=true
autoCapitalize='none'/>
</View>
<View style=styles.formButtons>
<Button transparent
onPress=() => this.onPressForgotPassword()
disabled=this.state.isLoading style=styles.forgotButtonStyle><Text
style=styles.forgotTextStyle>Forgot
Password?</Text></Button>
<Button primary style=styles.loginButtonStyle onPress=() => this.onPressLogin()
disabled=this.state.isLoading>
<Text style=styles.loginTextStyle>Sign In</Text>
</Button>
</View>
.
.
.
function mapStateToProps(state)
const data = state.data.loginReducer;
return
requesting: data.requesting,
successful: data.successful,
errors: data.errors,
isJobOwner: data.isJobOwner
.
.
.
export default connect(mapStateToProps)(LoginScreen);
This is all working fine in on the simulators but on the devices its as if the the state is not being updated.
Edit: Including the source for the UnderlinedInput
import React from 'react';
import Item, Input, Label from 'native-base';
import colors from 'Colors';
const UnderlinedInput = (defaultValue, label, value, onChangeText, secureTextEntry, keyboardType, autoCapitalize, floating, onEndEditing) =>
return (
<Item floatingLabel=floating stackedLabel=!floating style=styles.inputTextStyle>
<Label style=styles.labelStyle>label</Label>
<Input
secureTextEntry=
autoCorrect=false
autoCapitalize=
value=value
onChangeText=onChangeText
keyboardType=
defaultValue=defaultValue
onEndEditing=onEndEditing
style=styles.inputMainStyle
/>
</Item>
);
;
const styles =
inputTextStyle:
borderBottomColor: colors.lightGrey,
borderBottomWidth: 1,
color: colors.lightGrey,
width: '80%',
marginLeft: 'auto',
marginRight: 'auto',
paddingBottom: 10
,
inputMainStyle:
color: colors.lightGrey,
fontSize: 14
,
labelStyle:
fontWeight: '700',
letterSpacing: 1,
paddingTop: 4,
color: colors.lightGrey,
fontSize: 14
;
export default UnderlinedInput;
android ios react-native
add a comment |
I've been working on deploying a react-native project which has been working (and continues to work) fine on both ios and android simulator. I've recently deployed it to beta in the playstore and testflight and when we launch the app it appears that some placeholder & default text is missing :-(
I'm new to react-native development, so any advice is greatly appreciated. Could it be that i'm missing something when generating my app bundle? I'm using react-native: 0.55.4. Below is the code on my login page where the labels are missing & the inputs are not being passed to the subsequent page.
.
.
.
constructor(props)
super(props);
this.state =
username: '',
password: '',
isJobOwner: false,
saveCredentials: false,
isLoading: false
;
.
.
.
onPressLogin()
this.props.navigation.navigate('SignUpChoice',
data:
username: this.state.username,
password: this.state.password
);
.
.
.
<Form style=styles.loginForm>
<View style=styles.formInputs>
<UnderlinedInput floating=true label='Email' value=this.state.username
onChangeText=(username) => this.setState(username)
keyboardType='email-address' autoCapitalize='none'/>
<UnderlinedInput floating=true label='Password' value=this.state.password
onChangeText=(password) => this.setState(password)
secureTextEntry=true
autoCapitalize='none'/>
</View>
<View style=styles.formButtons>
<Button transparent
onPress=() => this.onPressForgotPassword()
disabled=this.state.isLoading style=styles.forgotButtonStyle><Text
style=styles.forgotTextStyle>Forgot
Password?</Text></Button>
<Button primary style=styles.loginButtonStyle onPress=() => this.onPressLogin()
disabled=this.state.isLoading>
<Text style=styles.loginTextStyle>Sign In</Text>
</Button>
</View>
.
.
.
function mapStateToProps(state)
const data = state.data.loginReducer;
return
requesting: data.requesting,
successful: data.successful,
errors: data.errors,
isJobOwner: data.isJobOwner
.
.
.
export default connect(mapStateToProps)(LoginScreen);
This is all working fine in on the simulators but on the devices its as if the the state is not being updated.
Edit: Including the source for the UnderlinedInput
import React from 'react';
import Item, Input, Label from 'native-base';
import colors from 'Colors';
const UnderlinedInput = (defaultValue, label, value, onChangeText, secureTextEntry, keyboardType, autoCapitalize, floating, onEndEditing) =>
return (
<Item floatingLabel=floating stackedLabel=!floating style=styles.inputTextStyle>
<Label style=styles.labelStyle>label</Label>
<Input
secureTextEntry=
autoCorrect=false
autoCapitalize=
value=value
onChangeText=onChangeText
keyboardType=
defaultValue=defaultValue
onEndEditing=onEndEditing
style=styles.inputMainStyle
/>
</Item>
);
;
const styles =
inputTextStyle:
borderBottomColor: colors.lightGrey,
borderBottomWidth: 1,
color: colors.lightGrey,
width: '80%',
marginLeft: 'auto',
marginRight: 'auto',
paddingBottom: 10
,
inputMainStyle:
color: colors.lightGrey,
fontSize: 14
,
labelStyle:
fontWeight: '700',
letterSpacing: 1,
paddingTop: 4,
color: colors.lightGrey,
fontSize: 14
;
export default UnderlinedInput;
android ios react-native
add a comment |
I've been working on deploying a react-native project which has been working (and continues to work) fine on both ios and android simulator. I've recently deployed it to beta in the playstore and testflight and when we launch the app it appears that some placeholder & default text is missing :-(
I'm new to react-native development, so any advice is greatly appreciated. Could it be that i'm missing something when generating my app bundle? I'm using react-native: 0.55.4. Below is the code on my login page where the labels are missing & the inputs are not being passed to the subsequent page.
.
.
.
constructor(props)
super(props);
this.state =
username: '',
password: '',
isJobOwner: false,
saveCredentials: false,
isLoading: false
;
.
.
.
onPressLogin()
this.props.navigation.navigate('SignUpChoice',
data:
username: this.state.username,
password: this.state.password
);
.
.
.
<Form style=styles.loginForm>
<View style=styles.formInputs>
<UnderlinedInput floating=true label='Email' value=this.state.username
onChangeText=(username) => this.setState(username)
keyboardType='email-address' autoCapitalize='none'/>
<UnderlinedInput floating=true label='Password' value=this.state.password
onChangeText=(password) => this.setState(password)
secureTextEntry=true
autoCapitalize='none'/>
</View>
<View style=styles.formButtons>
<Button transparent
onPress=() => this.onPressForgotPassword()
disabled=this.state.isLoading style=styles.forgotButtonStyle><Text
style=styles.forgotTextStyle>Forgot
Password?</Text></Button>
<Button primary style=styles.loginButtonStyle onPress=() => this.onPressLogin()
disabled=this.state.isLoading>
<Text style=styles.loginTextStyle>Sign In</Text>
</Button>
</View>
.
.
.
function mapStateToProps(state)
const data = state.data.loginReducer;
return
requesting: data.requesting,
successful: data.successful,
errors: data.errors,
isJobOwner: data.isJobOwner
.
.
.
export default connect(mapStateToProps)(LoginScreen);
This is all working fine in on the simulators but on the devices its as if the the state is not being updated.
Edit: Including the source for the UnderlinedInput
import React from 'react';
import Item, Input, Label from 'native-base';
import colors from 'Colors';
const UnderlinedInput = (defaultValue, label, value, onChangeText, secureTextEntry, keyboardType, autoCapitalize, floating, onEndEditing) =>
return (
<Item floatingLabel=floating stackedLabel=!floating style=styles.inputTextStyle>
<Label style=styles.labelStyle>label</Label>
<Input
secureTextEntry=
autoCorrect=false
autoCapitalize=
value=value
onChangeText=onChangeText
keyboardType=
defaultValue=defaultValue
onEndEditing=onEndEditing
style=styles.inputMainStyle
/>
</Item>
);
;
const styles =
inputTextStyle:
borderBottomColor: colors.lightGrey,
borderBottomWidth: 1,
color: colors.lightGrey,
width: '80%',
marginLeft: 'auto',
marginRight: 'auto',
paddingBottom: 10
,
inputMainStyle:
color: colors.lightGrey,
fontSize: 14
,
labelStyle:
fontWeight: '700',
letterSpacing: 1,
paddingTop: 4,
color: colors.lightGrey,
fontSize: 14
;
export default UnderlinedInput;
android ios react-native
I've been working on deploying a react-native project which has been working (and continues to work) fine on both ios and android simulator. I've recently deployed it to beta in the playstore and testflight and when we launch the app it appears that some placeholder & default text is missing :-(
I'm new to react-native development, so any advice is greatly appreciated. Could it be that i'm missing something when generating my app bundle? I'm using react-native: 0.55.4. Below is the code on my login page where the labels are missing & the inputs are not being passed to the subsequent page.
.
.
.
constructor(props)
super(props);
this.state =
username: '',
password: '',
isJobOwner: false,
saveCredentials: false,
isLoading: false
;
.
.
.
onPressLogin()
this.props.navigation.navigate('SignUpChoice',
data:
username: this.state.username,
password: this.state.password
);
.
.
.
<Form style=styles.loginForm>
<View style=styles.formInputs>
<UnderlinedInput floating=true label='Email' value=this.state.username
onChangeText=(username) => this.setState(username)
keyboardType='email-address' autoCapitalize='none'/>
<UnderlinedInput floating=true label='Password' value=this.state.password
onChangeText=(password) => this.setState(password)
secureTextEntry=true
autoCapitalize='none'/>
</View>
<View style=styles.formButtons>
<Button transparent
onPress=() => this.onPressForgotPassword()
disabled=this.state.isLoading style=styles.forgotButtonStyle><Text
style=styles.forgotTextStyle>Forgot
Password?</Text></Button>
<Button primary style=styles.loginButtonStyle onPress=() => this.onPressLogin()
disabled=this.state.isLoading>
<Text style=styles.loginTextStyle>Sign In</Text>
</Button>
</View>
.
.
.
function mapStateToProps(state)
const data = state.data.loginReducer;
return
requesting: data.requesting,
successful: data.successful,
errors: data.errors,
isJobOwner: data.isJobOwner
.
.
.
export default connect(mapStateToProps)(LoginScreen);
This is all working fine in on the simulators but on the devices its as if the the state is not being updated.
Edit: Including the source for the UnderlinedInput
import React from 'react';
import Item, Input, Label from 'native-base';
import colors from 'Colors';
const UnderlinedInput = (defaultValue, label, value, onChangeText, secureTextEntry, keyboardType, autoCapitalize, floating, onEndEditing) =>
return (
<Item floatingLabel=floating stackedLabel=!floating style=styles.inputTextStyle>
<Label style=styles.labelStyle>label</Label>
<Input
secureTextEntry=
autoCorrect=false
autoCapitalize=
value=value
onChangeText=onChangeText
keyboardType=
defaultValue=defaultValue
onEndEditing=onEndEditing
style=styles.inputMainStyle
/>
</Item>
);
;
const styles =
inputTextStyle:
borderBottomColor: colors.lightGrey,
borderBottomWidth: 1,
color: colors.lightGrey,
width: '80%',
marginLeft: 'auto',
marginRight: 'auto',
paddingBottom: 10
,
inputMainStyle:
color: colors.lightGrey,
fontSize: 14
,
labelStyle:
fontWeight: '700',
letterSpacing: 1,
paddingTop: 4,
color: colors.lightGrey,
fontSize: 14
;
export default UnderlinedInput;
android ios react-native
android ios react-native
edited Nov 14 '18 at 0:52
Tarig
asked Nov 14 '18 at 0:15
TarigTarig
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
from my point of view, it's because you are using a third party libraries UnderlinedInput, be sure that those components are not 100% reliable, they my not work on some devices, or for some cases. If you try for exemple to use a simple TextInput, Iam sure it will work.
Thanks for your response but I think the UnderlinedInput is a component that used quite standard react-native controls editing original post to include. If it was this component specifically wouldn't it break in the simulator first?
– Tarig
Nov 14 '18 at 0:49
Like i said, it may not work on some* devices, or fore some cases* . But I just noticed something, for exemple in keyboardType , the value assigned is a string, so why are you adding the braquet , when the value is a String, you don't have to add those braquet , juste write for exemple, keyboardType = "email-adresse". So try to remove them when u have a String
– G. Adnane
Nov 14 '18 at 13:00
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%2f53291353%2ftext-not-appearing-on-ios-android-device-but-working-fine-on-simulator%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
from my point of view, it's because you are using a third party libraries UnderlinedInput, be sure that those components are not 100% reliable, they my not work on some devices, or for some cases. If you try for exemple to use a simple TextInput, Iam sure it will work.
Thanks for your response but I think the UnderlinedInput is a component that used quite standard react-native controls editing original post to include. If it was this component specifically wouldn't it break in the simulator first?
– Tarig
Nov 14 '18 at 0:49
Like i said, it may not work on some* devices, or fore some cases* . But I just noticed something, for exemple in keyboardType , the value assigned is a string, so why are you adding the braquet , when the value is a String, you don't have to add those braquet , juste write for exemple, keyboardType = "email-adresse". So try to remove them when u have a String
– G. Adnane
Nov 14 '18 at 13:00
add a comment |
from my point of view, it's because you are using a third party libraries UnderlinedInput, be sure that those components are not 100% reliable, they my not work on some devices, or for some cases. If you try for exemple to use a simple TextInput, Iam sure it will work.
Thanks for your response but I think the UnderlinedInput is a component that used quite standard react-native controls editing original post to include. If it was this component specifically wouldn't it break in the simulator first?
– Tarig
Nov 14 '18 at 0:49
Like i said, it may not work on some* devices, or fore some cases* . But I just noticed something, for exemple in keyboardType , the value assigned is a string, so why are you adding the braquet , when the value is a String, you don't have to add those braquet , juste write for exemple, keyboardType = "email-adresse". So try to remove them when u have a String
– G. Adnane
Nov 14 '18 at 13:00
add a comment |
from my point of view, it's because you are using a third party libraries UnderlinedInput, be sure that those components are not 100% reliable, they my not work on some devices, or for some cases. If you try for exemple to use a simple TextInput, Iam sure it will work.
from my point of view, it's because you are using a third party libraries UnderlinedInput, be sure that those components are not 100% reliable, they my not work on some devices, or for some cases. If you try for exemple to use a simple TextInput, Iam sure it will work.
answered Nov 14 '18 at 0:35
G. AdnaneG. Adnane
8418
8418
Thanks for your response but I think the UnderlinedInput is a component that used quite standard react-native controls editing original post to include. If it was this component specifically wouldn't it break in the simulator first?
– Tarig
Nov 14 '18 at 0:49
Like i said, it may not work on some* devices, or fore some cases* . But I just noticed something, for exemple in keyboardType , the value assigned is a string, so why are you adding the braquet , when the value is a String, you don't have to add those braquet , juste write for exemple, keyboardType = "email-adresse". So try to remove them when u have a String
– G. Adnane
Nov 14 '18 at 13:00
add a comment |
Thanks for your response but I think the UnderlinedInput is a component that used quite standard react-native controls editing original post to include. If it was this component specifically wouldn't it break in the simulator first?
– Tarig
Nov 14 '18 at 0:49
Like i said, it may not work on some* devices, or fore some cases* . But I just noticed something, for exemple in keyboardType , the value assigned is a string, so why are you adding the braquet , when the value is a String, you don't have to add those braquet , juste write for exemple, keyboardType = "email-adresse". So try to remove them when u have a String
– G. Adnane
Nov 14 '18 at 13:00
Thanks for your response but I think the UnderlinedInput is a component that used quite standard react-native controls editing original post to include. If it was this component specifically wouldn't it break in the simulator first?
– Tarig
Nov 14 '18 at 0:49
Thanks for your response but I think the UnderlinedInput is a component that used quite standard react-native controls editing original post to include. If it was this component specifically wouldn't it break in the simulator first?
– Tarig
Nov 14 '18 at 0:49
Like i said, it may not work on some* devices, or fore some cases* . But I just noticed something, for exemple in keyboardType , the value assigned is a string, so why are you adding the braquet , when the value is a String, you don't have to add those braquet , juste write for exemple, keyboardType = "email-adresse". So try to remove them when u have a String
– G. Adnane
Nov 14 '18 at 13:00
Like i said, it may not work on some* devices, or fore some cases* . But I just noticed something, for exemple in keyboardType , the value assigned is a string, so why are you adding the braquet , when the value is a String, you don't have to add those braquet , juste write for exemple, keyboardType = "email-adresse". So try to remove them when u have a String
– G. Adnane
Nov 14 '18 at 13:00
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.
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%2f53291353%2ftext-not-appearing-on-ios-android-device-but-working-fine-on-simulator%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