Dfyjkt

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=secureTextEntry 
 autoCorrect=false
 autoCapitalize= 'words'
 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;

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.