Unable to apply custom theme to withAuthenticator [React Native] [Help wanted]

I am passing the theme object to the withAuthenticator HOC but it doesn’t seem to have any effect. I still seem to have a navbar on top of my every screen, the auth screens as well as my app home screen.

Can anyone confirm having faced this issue? Would this happen due to amplify or is this a side-effect of using react-native-navigation? Any help is appreciated!

Here is how it looks:

Here is my code:

/**
 * Dashboard screen with Authenticator wrapper around the entire app.
 */

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { ConfirmSignUp, AmplifyTheme, ForgotPassword, RequireNewPassword, withAuthenticator } from 'aws-amplify-react-native'
import MySignIn from './MySignIn';
import MySignUp from './MySignUp';
import { THEME_COLOR } from './config';

class Dashboard extends Component {
	render() {
		return (
			<View style={styles.container}>
				<Text>
					<Text style={styles.welcome}>This is Dashboard screen.</Text>
				</Text>
			</View>
		);
	}
}

const myNavBar = Object.assign({}, AmplifyTheme.navBar, { width: 0, height: 0});
const MyTheme = Object.assign({}, AmplifyTheme, { navBar: myNavBar });


const styles = StyleSheet.create({
	welcome: {
		fontSize: 30,
		color: 'black'
	},
	container: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center'
	}
});

export default withAuthenticator(Dashboard, false, [
	<MySignIn/>,
	<MySignUp />,
	<ConfirmSignUp/>,
	// <ForgotPassword/> ,
	// <RequireNewPassword/>
], null, MyTheme); 

[imehra07]

After spending much time and using both Authenticator component and withAuthenticator HOC I have finally found something that worked, hopefully this will help others , source code below.My requirement was only to change the button and link texts and also to have a custom signup config

const AmplifyCustomTheme = Object.assign({}, AmplifyTheme, { button: { …AmplifyTheme.button, backgroundColor: “#156760”, }, buttonDisabled: { …AmplifyTheme.buttonDisabled, backgroundColor: “#6dbdb5”, }, sectionFooterLink: { …AmplifyTheme.sectionFooterLink, color: “#156760”, }, });

export default withAuthenticator( App, false, undefined, null, AmplifyCustomTheme, signupConfig );

[github-actions[bot]]

This issue has been automatically locked since there hasn’t been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.