StatusBar change barStyle on textfield focus mode in webview screens

[sebasbeleno]

Description

Hey there.

I have got an issue with the webviews and the screens on the presentation 'modal' (using react navigation)

When I open a new screen on presentation: modal and focus on a textfield change the barStyle and disappear.

I don't know why this occurs. There’s an example:

RN.Bug.mp4

const Screen = ({ navigation, route, checkMemberEmailExists }: Props) => {
  return (
    <View style={styles.container}>
      <StatusBar barStyle={"light-content"} />

      <TextField
        testID={"emailInput"}
        autoCorrect={false}
        value={values.email}
        onChangeText={handleChange("email")}
        onBlur={handleBlur("email")}
        clearButtonMode="always"
        autoCapitalize={"none"}
        autoComplete="username"
        textContentType={"username"}
        keyboardType="email-address"
        placeholder={localizedCopy("emailPlaceholder")}
        returnKeyType="done"
        hasError={!!errors.email && touched.email}
        errorTitle={localizedCopy("emailError")}
        keyboardAppearance={initialMode}
        onSubmitEditing={() => {
          keyboardDismiss();
          handleSubmit();
        }}
      />
    </View>
  );
};

RN.Bug2.mov

Version

0.67.5

Output of npx react-native info

System:
    OS: macOS 13.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 20.42 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: Not Found
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
    Watchman: 2022.10.24.00 - /usr/local/bin/watchman
Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
Languages:
    Java: 11.0.17 - /usr/bin/javac
npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: ^0.67.5 => 0.67.5 
    react-native-macos: Not Found
npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Using React Navigation, create a screen on presentation mode = modal
2. On that new screen, create a textfield
3. Run the app and focus the textfield.

---

1. Create an webview
2. On that webview ensure that you have a textinput
3. Run the app and focus the textfield

Snack, code example, screenshot, or link to a repository

.

[pekq]

@sebasbeleno were you able to resolve this issue or what steps you took to mitigate it?

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.