How to hide default SignOut using AWS Amplify with React Native? - amazon-web-services

Question

I am using AWS Amplify in my React Native app as instructed here: https://docs.amplify.aws/ui/auth/authenticator/q/framework/react-native/#using-the-authenticator-component
It is working, more or less. But when I log in there is a box saying Hello with a Sign Out button added to the project. I can get rid of this by setting hideDefault={true} but then if I log out there is no login/signup screen. My code is below, thank you for any help.
import { StyleSheet, Text, Button,View,Platform,StatusBar,Image, TouchableWithoutFeedback, SafeAreaView } from 'react-native';
import {useState} from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { useNavigationContainerRef } from '#react-navigation/native';
import Ionicons from 'react-native-vector-icons/Ionicons';
// Screens
import Browsescreen from './screens/Browsescreen';
// AWS
import { Authenticator } from 'aws-amplify-react-native/dist/Auth';
const Tab = createBottomTabNavigator();
function App() {
const navigationRef = useNavigationContainerRef();
const [showLoggedInPage, setLoggedInPage] = useState(false);
const loggedInPage = showLoggedInPage ? (
<SafeAreaView style={styles.container}>
<StatusBar style="auto" />
<View>
[REMOVED]
</View>
<NavigationContainer ref={navigationRef}>
<Tab.Navigator>
[REMOVED]
</Tab.Navigator>
</NavigationContainer>
</SafeAreaView>
) : null;
return (
<Authenticator
onStateChange={(authState) => {
console.log(authState)
if (authState == "signedIn") {
setLoggedInPage(true);
} else {
setLoggedInPage(false);
}
}
}
hideDefault={false}
>
{loggedInPage}
</Authenticator>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ddd',
},
});
export default App;
I am new to this, please make it as simple as possible and provide sample if possible. Thank you!

Answer 1

Based on this documentation, if you are using the HOC component withAuthenticator.
export default withAuthenticator(App, {
// Render a sign out button once logged in
includeGreetings: true,
});
The sign-out button is shown when "includeGreetings" is set to "true". Changing it to "false" will hide the sign-out button.