Skip to content

Commit

Permalink
Hotfix to resolve issue where native-base "<Content>" component was c…
Browse files Browse the repository at this point in the history 
…ausing a blank Settings Screen (#480)

ActivityIndicator was not being displayed on some Android devices due to blending gray spinner into gray background; switch to Colors.tintColor resolves the issue
  • Loading branch information
@zdmc23
zdmc23 authored Oct 18, 2020
1 parent 6bf76e1 commit 7c4f565
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 164 deletions.
4 changes: 2 additions & 2 deletions app.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"slug": "discipletoolsapp",
"privacy": "public",
"platforms": ["ios", "android"],
"version": "1.8.0",
"version": "1.8.1",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
Expand All @@ -23,7 +23,7 @@
"android": {
"package": "tools.disciple.app",
"googleServicesFile": "./google-services.json",
"versionCode": 180
"versionCode": 181
},
"description": ""
}
Expand Down
2 changes: 1 addition & 1 deletion screens/LoginScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -824,7 +824,7 @@ class LoginScreen extends React.Component {
</View>
{passwordErrorMessage}
{this.state.loading ? (
<ActivityIndicator style={{ margin: 20 }} size="small" />
<ActivityIndicator color={Colors.tintColor} style={{ margin: 20 }} size="small" />
) : (
<View>
<Button style={styles.signInButton} onPress={this.onLoginPress} block>
Expand Down
319 changes: 158 additions & 161 deletions screens/SettingsScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
Body,
Button as NbButton,
Container,
Content,
Icon,
Left,
ListItem,
Expand Down Expand Up @@ -356,169 +355,40 @@ class SettingsScreen extends React.Component {
return (
<Container style={styles.container}>
{!this.props.isConnected && this.offlineBarRender()}
<Content>
<ListItem itemHeader first avatar style={styles.header}>
<Left>
<Thumbnail source={require('../assets/images/gravatar-default.png')} />
</Left>
<Body style={styles.headerBody}>
<Text
style={[
{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
},
styles.username,
]}>
{this.props.userData.displayName}
</Text>
<Text
style={[
{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
},
styles.domain,
]}>
{this.props.userData.domain}
</Text>
</Body>
</ListItem>

{/* === Storybook === */}
{__DEV__ && (
<ListItem icon onPress={() => this.props.navigation.navigate('Storybook')}>
<Left>
<NbButton onPress={() => this.props.navigation.navigate('Storybook')}>
<Icon active name="flask" />
</NbButton>
</Left>
<Body style={styles.body}>
<Text
style={{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
}}>
{i18n.t('settingsScreen.storybook')}
</Text>
</Body>
<Right>
<Icon active name={this.props.i18n.isRTL ? 'arrow-back' : 'arrow-forward'} />
</Right>
</ListItem>
)}
{/* === Online === */}
<ListItem icon onPress={this.onFABPress}>
<Left>
<NbButton onPress={this.onFABPress}>
<Icon active name="ios-flash" />
</NbButton>
</Left>
<Body style={styles.body}>
<Text
style={{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
}}>
{i18n.t('global.online')}
</Text>
</Body>
<Right>
<Switch
value={this.props.isConnected}
onChange={this.onFABPress}
disabled={!this.props.networkStatus}
/>
</Right>
</ListItem>
{/* === Language === */}
<ListItem icon>
<Left>
<NbButton>
<Icon active type="FontAwesome" name="language" />
</NbButton>
</Left>
<Body style={styles.body}>
<Text
style={{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
}}>
{i18n.t('global.language')}
</Text>
</Body>
<Right>
<Picker
style={{ width: 150 }}
selectedValue={this.props.i18n.locale}
onValueChange={this.selectLanguage}>
{this.renderLanguagePickerItems()}
</Picker>
</Right>
</ListItem>
{/* === Remember password === */}
<ListItem icon>
<Left>
<NbButton>
<Icon active type="MaterialCommunityIcons" name="onepassword" />
</NbButton>
</Left>
<Body style={styles.body}>
<Text
style={{
<ListItem itemHeader first avatar style={styles.header}>
<Left>
<Thumbnail source={require('../assets/images/gravatar-default.png')} />
</Left>
<Body style={styles.headerBody}>
<Text
style={[
{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
}}>
{i18n.t('settingsScreen.rememberPassword')}
</Text>
</Body>
<Right>
<Switch value={this.props.rememberPassword} onChange={this.toggleRememberPassword} />
</Right>
</ListItem>
{/* === PIN Code === */}
<ListItem icon onPress={this.toggleShowPIN}>
<Left>
<NbButton>
<Icon active type="MaterialCommunityIcons" name="security" />
</NbButton>
</Left>
<Body style={styles.body}>
<Text
style={{
},
styles.username,
]}>
{this.props.userData.displayName}
</Text>
<Text
style={[
{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
}}>
{`${
this.props.pinCode.enabled
? i18n.t('settingsScreen.remove')
: i18n.t('settingsScreen.set')
} ${i18n.t('settingsScreen.pinCode')}`}
</Text>
</Body>
</ListItem>
{/* === Help / Support === */}
<ListItem icon onPress={this.draftNewSupportEmail}>
<Left>
<NbButton>
<Icon active name="help-circle" />
</NbButton>
</Left>
<Body style={styles.body}>
<Text
style={{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
}}>
{i18n.t('settingsScreen.helpSupport')}
</Text>
</Body>
</ListItem>
{/* === Logout === */}
<ListItem icon onPress={this.signOutAsync}>
},
styles.domain,
]}>
{this.props.userData.domain}
</Text>
</Body>
</ListItem>

{/* === Storybook === */}
{__DEV__ && (
<ListItem icon onPress={() => this.props.navigation.navigate('Storybook')}>
<Left>
<NbButton>
<Icon active name="log-out" />
<NbButton onPress={() => this.props.navigation.navigate('Storybook')}>
<Icon active name="flask" />
</NbButton>
</Left>
<Body style={styles.body}>
Expand All @@ -527,14 +397,141 @@ class SettingsScreen extends React.Component {
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
}}>
{i18n.t('settingsScreen.logout')}
{i18n.t('settingsScreen.storybook')}
</Text>
</Body>
<Right>
<Icon active name={this.props.i18n.isRTL ? 'arrow-back' : 'arrow-forward'} />
</Right>
</ListItem>
</Content>
)}
{/* === Online === */}
<ListItem icon onPress={this.onFABPress}>
<Left>
<NbButton onPress={this.onFABPress}>
<Icon active name="ios-flash" />
</NbButton>
</Left>
<Body style={styles.body}>
<Text
style={{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
}}>
{i18n.t('global.online')}
</Text>
</Body>
<Right>
<Switch
value={this.props.isConnected}
onChange={this.onFABPress}
disabled={!this.props.networkStatus}
/>
</Right>
</ListItem>
{/* === Language === */}
<ListItem icon>
<Left>
<NbButton>
<Icon active type="FontAwesome" name="language" />
</NbButton>
</Left>
<Body style={styles.body}>
<Text
style={{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
}}>
{i18n.t('global.language')}
</Text>
</Body>
<Right>
<Picker
style={{ width: 150 }}
selectedValue={this.props.i18n.locale}
onValueChange={this.selectLanguage}>
{this.renderLanguagePickerItems()}
</Picker>
</Right>
</ListItem>
{/* === Remember password === */}
<ListItem icon>
<Left>
<NbButton>
<Icon active type="MaterialCommunityIcons" name="onepassword" />
</NbButton>
</Left>
<Body style={styles.body}>
<Text
style={{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
}}>
{i18n.t('settingsScreen.rememberPassword')}
</Text>
</Body>
<Right>
<Switch value={this.props.rememberPassword} onChange={this.toggleRememberPassword} />
</Right>
</ListItem>
{/* === PIN Code === */}
<ListItem icon onPress={this.toggleShowPIN}>
<Left>
<NbButton>
<Icon active type="MaterialCommunityIcons" name="security" />
</NbButton>
</Left>
<Body style={styles.body}>
<Text
style={{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
}}>
{`${
this.props.pinCode.enabled
? i18n.t('settingsScreen.remove')
: i18n.t('settingsScreen.set')
} ${i18n.t('settingsScreen.pinCode')}`}
</Text>
</Body>
</ListItem>
{/* === Help / Support === */}
<ListItem icon onPress={this.draftNewSupportEmail}>
<Left>
<NbButton>
<Icon active name="help-circle" />
</NbButton>
</Left>
<Body style={styles.body}>
<Text
style={{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
}}>
{i18n.t('settingsScreen.helpSupport')}
</Text>
</Body>
</ListItem>
{/* === Logout === */}
<ListItem icon onPress={this.signOutAsync}>
<Left>
<NbButton>
<Icon active name="log-out" />
</NbButton>
</Left>
<Body style={styles.body}>
<Text
style={{
writingDirection: this.props.i18n.isRTL ? 'rtl' : 'ltr',
textAlign: this.props.i18n.isRTL ? 'right' : 'left',
}}>
{i18n.t('settingsScreen.logout')}
</Text>
</Body>
<Right>
<Icon active name={this.props.i18n.isRTL ? 'arrow-back' : 'arrow-forward'} />
</Right>
</ListItem>
<Text style={styles.versionText}>{Constants.manifest.version}</Text>
<Toast
ref={(c) => {
Expand Down

0 comments on commit 7c4f565

Please sign in to comment.