Argthtjtr

I am trying to customize the styling of the AWS WithAuthenticator HOC in my React Native application. I followed the Amplify documentation step by step. However, the app keeps rendering the default styling (orange buttons) instead of the expected custom color.

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

import Amplify from '@aws-amplify/core';

import config from './aws-exports';

import { withAuthenticator } from 'aws-amplify-react-native';

import { AmplifyTheme } from 'aws-amplify-react-native';



// custom colors for components 

const Mybutton = Object.assign({}, AmplifyTheme.button, { backgroundColor: '#000', });

//console.log('My own design: ', Mybutton)

const MyTheme = Object.assign({}, AmplifyTheme, { button: Mybutton });





class App extends React.Component {

  render() {

    return (

      <View style={styles.container}>

        <Text>You are now signed in!</Text>

      </View>

    );

  }

}



export default withAuthenticator(App, { includeGreetings: true }, false, , null, MyTheme)



const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

});

Can anyone point me to what am I doing wrong?