withAuthenticator warning: A component is changing an uncontrolled input of type text to be controlled.

[juri-diener]

          Hi 👋 Closing this as we have not heard back from you. If you are still experiencing this issue and in need of assistance, please feel free to comment and provide us with any information previously requested by our team members so we can re-open this issue and be better able to assist you. Thank you!

This is issue is still there. But only on the web. when I start typing something in that input, the warning pops up as well when pasting something.

Originally posted by @chrisbonifacio in #9460 (comment)

[cwomack]

Hey there, @juri-diener 👋. Looks like we may need a little more info about what's happening to cause this, your local setup, etc. Can you clarify what version of Amplify you're on and share any relevant frontend code that's causing this? Also, can you share your full package.json so we can see your dependencies? Thanks!

[juri-diener]

Hey, so the amplify version is 11.0.5 I had issues with the new one. And someone told me to use this version because it's kinda more stable.

`
import React, { useEffect } from "react";
import { Stack } from "expo-router";

import { signOut } from "aws-amplify/auth";
import { withAuthenticator } from "@aws-amplify/ui-react-native";

import AntDesign from "@expo/vector-icons/AntDesign";
import { SafeAreaProvider } from "react-native-safe-area-context";

import { Amplify } from "aws-amplify";
import amplifyconfig from "../amplifyconfiguration.json";

Amplify.configure(amplifyconfig);

import { color } from "@/styles/colors";
import CustomButton from "@/components/CustomButton";

function RootLayout() {
useEffect(() => {
console.log("Mount");
return () => {
console.log("Unmount");
};
}, []);

return (


<Stack.Screen
name="index"
options={{
headerShown: true,
title: "",
headerStyle: { backgroundColor: color(95).gray },
headerShadowVisible: false,
headerRight: (props) => {
return (
<CustomButton
onPress={() => signOut()}
viewStyle={{ backgroundColor: "transparent" }}
>


);
},
}}
/>
<Stack.Screen
name="(tabs)"
options={{ headerShown: false, presentation: "fullScreenModal" }}
/>


);
}

// export default RootLayout;
export default withAuthenticator(RootLayout);
`

And my package.json:

`
{
"name": "app-connect",
"version": "1.0.0",
"main": "expo-router/entry",
"scripts": {
"start": "expo start",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
"@aws-amplify/cli": "^11.0.5",
"@aws-amplify/react-native": "^1.0.28",
"@aws-amplify/ui-react-native": "^2.1.5",
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@expo/metro-runtime": "~3.1.3",
"@react-native-async-storage/async-storage": "^1.23.1",
"@react-native-community/netinfo": "^11.3.1",
"aws-amplify": "^6.0.28",
"expo": "~50.0.14",
"expo-av": "~13.10.6",
"expo-constants": "~15.4.6",
"expo-image-manipulator": "~11.8.0",
"expo-image-picker": "~14.7.1",
"expo-linking": "~6.2.2",
"expo-router": "~3.4.8",
"expo-status-bar": "~1.11.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.73.6",
"react-native-gesture-handler": "~2.14.0",
"react-native-get-random-values": "^1.11.0",
"react-native-reanimated": "~3.6.2",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0",
"react-native-web": "~0.19.6",
"zustand": "^4.5.2"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/react": "~18.2.45",
"typescript": "^5.1.3"
},
"private": true
}

`

[Pejmanc]

Hey,
I'm having the same problem:

{
  "name": "belly-mvp",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@aws-amplify/react-native": "^1.1.1",
    "@aws-amplify/rtn-web-browser": "^1.0.30",
    "@aws-amplify/ui-react-native": "^2.2.2",
    "@expo/vector-icons": "^14.0.0",
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-native-community/netinfo": "^11.3.2",
    "@react-navigation/native": "^6.0.2",
    "aws-amplify": "^6.3.2",
    "expo": "~50.0.14",
    "expo-font": "~11.10.3",
    "expo-linking": "~6.2.2",
    "expo-router": "~3.4.8",
    "expo-splash-screen": "~0.26.4",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.3",
    "expo-web-browser": "~12.8.2",
    "formik": "^2.4.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.6",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-get-random-values": "^1.11.0",
    "react-native-paper": "^5.12.3",
    "react-native-safe-area-context": "^4.10.1",
    "react-native-screens": "~3.29.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "jest": "^29.2.1",
    "jest-expo": "~50.0.4",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.1.3"
  },
  "private": true
}

Here's my RootLayoutNav

import { useEffect } from 'react'
import { SafeAreaView } from 'react-native-safe-area-context'
import { MD3LightTheme as DefaultTheme, PaperProvider } from 'react-native-paper'
import FontAwesome from '@expo/vector-icons/FontAwesome'
import { useFonts } from 'expo-font'
import { Stack } from 'expo-router'
import * as SplashScreen from 'expo-splash-screen'

import { Authenticator } from '@aws-amplify/ui-react-native'
import { Amplify } from 'aws-amplify'
import config from '../src/aws-exports'

Amplify.configure(config)

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from 'expo-router'

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: '(tabs)',
}

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync()

export default function RootLayout() {
  const [loaded, error] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
    ...FontAwesome.font,
  })

  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
    if (error) throw error
  }, [error])

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync()
    }
  }, [loaded])

  if (!loaded) {
    return null
  }

  return <RootLayoutNav />
}

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: '#0b0',
    secondary: 'yellow',
  },
}

function RootLayoutNav() {
  return (
    <Authenticator.Provider>
      <Authenticator>
        <SafeAreaView>
          <PaperProvider theme={theme}>
            <Stack>
              <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            </Stack>
          </PaperProvider>
        </SafeAreaView>
      </Authenticator>
    </Authenticator.Provider>
  )
}