Buttons are not clickable until the TextInputField receives focus.

[FernandoPerin]

Description

The issue is located on a screen that encompasses an external chat service product, where it contains a View responsible for exchanging messages between the agent and the user, and a View that displays a TextInputField and a Button.

During the initial loading of this screen, all buttons on it become static (without performing any action when tapped). To "unfreeze" these buttons, the user must tap on the text editing field (causing the field to receive focus). Immediately after this action, all buttons become clickable again.

Below is the code of the Views that compose the screen:

`private var ChatFeed: some View { VStack { if isLoading { ProgressView("Carregando mensagens...") .frame(maxWidth: .infinity, maxHeight: .infinity) .edgesIgnoringSafeArea(.all) } ChatFeedList .onAppear { viewModel.checkIfWithinBusinessHours(completion: { isWithinBusinessHours, isBusinessHoursConfigured in self.shouldHideBusinessHoursBanner = !isBusinessHoursConfigured self.isWithinBusinessHours = isWithinBusinessHours businessHoursMessage = isWithinBusinessHours ? "You are within business hours" : "You are not within business hours" isLoading = false })

              }
              .opacity(isLoading ? 0 : 1) // Hide the list when loading

  if let active = self.viewModel.active {
    if active.boolValue {
      ChatBottomBar.opacity(isLoading ? 0 : 1) // Hide the list when loading
    } else {
      ButtonsBottomBar.opacity(isLoading ? 0 : 1) // Hide the list when loading
    }
  }

  }

}`

` private var ButtonsBottomBar: some View { HStack { VStack(spacing: 12) {

    VStack {
                Text("Hello, World!")
                    .foregroundColor(.white)
            }
            .frame(width: 50, height: 50) // Define o tamanho do VStack
            .background(Color.red) // Define a cor de fundo
            .onTapGesture {
                // Adicione ação aqui para lidar com o toque no VStack
                print("VStack foi tocado!")
            }

      Button(action: {
          print("Avaliando atendimento")
          showAlert = true
      }) {
          Text("Clique aqui e avalie nosso atendimento")
              .padding(.horizontal, 16)
              .padding(.vertical, 12)
              .font(.callout.weight(.semibold))
              .frame(maxWidth: .infinity)
      }
      .background(RoundedCorners(color: Color(hex: 0x006497), tl: 4, tr: 4, bl: 4, br: 4))
      .foregroundColor(.white)
      .alert(isPresented: $showAlert) {
        Alert(title: Text("Avaliando atendimento"), message: Text("Avalie nosso atendimento"), dismissButton: .default(Text("OK")))
      }

      Button(action: {
          print("Encerrando atendimento")
        self.viewModel.onCloseCase()
      }) {
          Text("Encerrar atendimento")
              .padding(.horizontal, 16)
              .padding(.vertical, 12)
              .font(.callout.weight(.semibold))
              .frame(maxWidth: .infinity)
      }
      .background(RoundedCorners(color: Color(hex: 0x006497), tl: 4, tr: 4, bl: 4, br: 4))
      .foregroundColor(.white)
  }
  .padding(.horizontal, 12)
  .padding(.vertical, 6)
}

}`

` private var ChatBottomBar: some View { HStack { CustomTextField(placeholder: Text("Escreva sua mensagem"), text: $messageInputText)

      Button {
          print("Sending text message...")
          viewModel.sendTextMessage(message: messageInputText.description)
          messageInputText = ""
          withAnimation {
              isButtonPressed = true
          }

          DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
              withAnimation {
                  isButtonPressed = false
              }
          }

          // Adicione algum código aqui, se necessário
      } label: {
          Image(systemName: "paperplane.fill")
              .foregroundColor(.white)
              .padding(8)
              .background(messageInputText.isEmpty ? Color.gray.opacity(0.3) : Color.blue)
              .cornerRadius(6)
              .scaleEffect(isButtonPressed ? 1.15 : 1.0)
      }
      .disabled(messageInputText.isEmpty)
  }
  .padding(.leading)
  .padding(.trailing, 6)
  .padding(.vertical, 6)
  .background(Color.gray.opacity(0.1))
  .cornerRadius(6)
  .padding()

}`

Steps to reproduce

It's an internal application.

React Native Version

0.66

Affected Platforms

Runtime - iOS

Output of npx react-native info

Nothing to display.

Stacktrace or Logs

Nothing to display.

Reproducer

It's an internal application.

Screenshots and Videos

No response

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[github-actions[bot]]

:warning:	Add or Reformat Version Info
:information_source:	We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2

[cortinico]

Closing as 0.66 is not a supported version of React Native