Currently, it seems that react native version 0.77 has not been adapted to react native version 0.77, and Edge-to-edge and 16K Page Size, I can't currently be in 16K

[nangongmoyan]

Is your feature request related to a problem? Please describe.
When I run it on a 16K emulator, there is the following error message:
1.Warning: TypeError: Cannot read property 'KeyboardProvider' of undefined
2.libworklets.so not found on /data/app/~~Lce-pUC4OZIx5pN8Xchx1w==/com.demo-t4fpmh3h_T32ZbejLCqkog==/base.apk!/lib/arm64-v8a flag: 5
java.lang.UnsatisfiedLinkError: dlopen failed: empty/missing DT_HASH/DT_GNU_HASH in "/data/app/~~Lce-pUC4OZIx5pN8Xchx1w==/com.demo-t4fpmh3h_T32ZbejLCqkog==/base.apk!/lib/arm64-v8a/libworklets.so" (new hash type from the future?)

Describe the solution you'd like
I hope it will work fine on a 16K device

Additional context

The following are the related configurations of the project:

npx react-native info
info Fetching system and libraries information...
System:
  OS: macOS 15.3
  CPU: (8) x64 Apple M1
  Memory: 37.77 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.21
    path: /usr/local/bin/yarn
  npm:
    version: 10.2.3
    path: /usr/local/bin/npm
  Watchman:
    version: 2023.12.04.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /usr/local/bin/pod
SDKs:
  iOS SDK: Not Found
  Android SDK:
    API Levels:
      - "29"
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-33 | Google APIs ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google APIs Intel x86_64 Atom
      - android-34 | Google Play ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
      - android-35 | Pre-Release 16 KB Page Size Google Play ARM 64 v8a
      - android-35 | Pre-Release 16 KB Page Size Google APIs ARM 64 v8a
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.12816248
  Xcode:
    version: /undefined
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/nangongmoyan/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.0
    wanted: 0.77.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

The current react native version is 0.77 and the react-native-keyboard-controller version is 1.16.2

[kirillzyusko]

Hey @nangongmoyan

Indeed, I haven't added support for RN 0.77 yet, but it's in my TODO list 👀 Hopefully this month the support will be landed. Thank you for opening the issue 🙌

[nangongmoyan]

Hey   嘿@nangongmoyan

Indeed, I haven't added support for RN 0.77 yet, but it's in my TODO list 👀 Hopefully this month the support will be landed. Thank you for opening the issue 🙌确实，我还没有增加对RN 0.77的支持，但是它在我的待办事项名单中👀希望本月的支持将被降落。感谢您打开问题🙌

Then let me tell you my hard work first, haha

[kirillzyusko]

@nangongmoyan which reanimated version do you use?

[nangongmoyan]

@nangongmoyan which reanimated version do you use?

The react-native-reanimated version I am currently using is 3.16.7, but this version seems to not yet be adapted to 16K page size

[kirillzyusko]

Okay @nangongmoyan

So maybe a problem in reanimated? Not in keyboard controller? Or without a keyboard controller everything works fine?

[kirillzyusko]

I tested #801 and from my observations 1.16.2 should work with 0.77. I'll publish 1.16.3 soon and will ask you to test again. If it doesn't work after 1.16.3 can you prepare a reproduction example?

[nangongmoyan]

1.16.3

OK, I will test it again after 1.16.3 is released. The results will be replied to this issue. Please reply to me after 1.16.3 is released. Thank you

[nangongmoyan]

I tested #801 and from my observations 1.16.2 should work with 0.77. I'll publish 1.16.3 soon and will ask you to test again. If it doesn't work after 1.16.3 can you prepare a reproduction example?

In the morning, I created a new demo to test. The following is the package.json of the project

{
  "name": "Demo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.3.1",
    "react-native": "0.77.0",
    "react-native-keyboard-controller": "^1.16.2",
    "react-native-reanimated": "^3.16.7"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.77.0",
    "@react-native/eslint-config": "0.77.0",
    "@react-native/metro-config": "0.77.0",
    "@react-native/typescript-config": "0.77.0",
    "@types/jest": "^29.5.13",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

Below is the App.tsx of the project

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { KeyboardProvider } from 'react-native-keyboard-controller';


type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({children, title}: SectionProps): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <KeyboardProvider statusBarTranslucent>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={backgroundStyle}>
          <Header />
          <View
            style={{
              backgroundColor: isDarkMode ? Colors.black : Colors.white,
            }}>
            <Section title="Step One">
              Edit <Text style={styles.highlight}>App.tsx</Text> to change this
              screen and then come back to see your edits.
            </Section>
            <Section title="See Your Changes">
              <ReloadInstructions />
            </Section>
            <Section title="Debug">
              <DebugInstructions />
            </Section>
            <Section title="Learn More">
              Read the docs to discover what to do next:
            </Section>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </KeyboardProvider>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

but i always receive error: 1.Warning: TypeError: Cannot read property 'KeyboardProvider' of undefined and so on，I'll continue to wait for your 1.16.3 before checking

[kirillzyusko]

I'll continue to wait for your 1.16.3 before checking

I published 1.16.3 - feel free to try 🙌

but i always receive error: 1.Warning: TypeError: Cannot read property 'KeyboardProvider' of undefined and so on

Okay, if you get it again would you mind to publish a reproduction example, so we both would have the same codebase?

[nangongmoyan]

I'll continue to wait for your 1.16.3 before checking在检查之前，我将继续等待您的1.16.3

I published 1.16.3 - feel free to try 🙌我出版了1.16.3随时尝试🙌

but i always receive error: 1.Warning: TypeError: Cannot read property 'KeyboardProvider' of undefined and so on但是我总是会收到错误：1。Warning：TypeError：无法读取未定义的属性'键盘推广器'等等

Okay, if you get it again would you mind to publish a reproduction example, so we both would have the same codebase?好的，如果您再次得到它，您会介意发布一个复制示例，因此我们俩都有相同的代码库？

I've replaced it with version 1.16.3 in the morning, but I still get the same error. Do I need any information to provide?

I'm not sure if it's the problem caused by react-native-reanimated library

Here is the project address of my current running example:https://github.com/nangongmoyan/KeyboardController16K

[kirillzyusko]

@nangongmoyan you forgot to add babel plugin: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-2-add-reanimateds-babel-plugin

After adding babel plugin and adding flex: 1 to SafeAreaView it works:

Can I close the issue?