Merge pull request #345 from obytes/keyboard-handling

Keyboard handling

Author: yjose

__mocks__/react-native-keyboard-controller.ts

@@ -0,0 +1 @@
+module.exports = require('react-native-keyboard-controller/jest');

android/app/build.gradle

@@ -4,6 +4,27 @@ apply plugin: "com.facebook.react"
 
 def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
 
+static def versionToNumber(major, minor, patch) {
+  return patch * 100 + minor * 10000 + major * 1000000
+}
+
+def getRNVersion() {
+  def version = providers.exec {
+    workingDir(projectDir)
+    commandLine("node", "-e", "console.log(require('react-native/package.json').version);")
+  }.standardOutput.asText.get().trim()
+
+  def coreVersion = version.split("-")[0]
+  def (major, minor, patch) = coreVersion.tokenize('.').collect { it.toInteger() }
+
+  return versionToNumber(
+      major,
+      minor,
+      patch
+  )
+}
+def rnVersion = getRNVersion()
+
 /**
  * This is the configuration block to customize your React Native Android app.
  * By default you don't need to apply any configuration, just uncomment the lines you need.
@@ -57,6 +78,11 @@ react {
     //
     //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
     // hermesFlags = ["-O", "-output-source-map"]
+
+    if (rnVersion >= versionToNumber(0, 75, 0)) {
+        /* Autolinking */
+        autolinkLibrariesWithApp()
+    }
 }
 
 /**
@@ -110,6 +136,7 @@ android {
             shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
         }
     }
     packagingOptions {
@@ -168,5 +195,7 @@ dependencies {
     }
 }
 
-apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
-applyNativeModulesAppBuildGradle(project)
+if (rnVersion < versionToNumber(0, 75, 0)) {
+    apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
+    applyNativeModulesAppBuildGradle(project)
+}

android/app/src/main/res/values/styles.xml

@@ -4,7 +4,6 @@
     <item name="android:editTextStyle">@style/ResetEditText</item>
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
-    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
     <item name="android:statusBarColor">#2E3C4B</item>
   </style>
   <style name="ResetEditText" parent="@android:style/Widget.EditText">

android/gradle.properties

@@ -25,6 +25,9 @@ android.useAndroidX=true
 # Automatically convert third-party libraries to use AndroidX
 android.enableJetifier=true
 
+# Enable AAPT2 PNG crunching
+android.enablePngCrunchInReleaseBuilds=true
+
 # Use this property to specify which architecture you want to build.
 # You can also override it from the CLI using
 # ./gradlew <task> -PreactNativeArchitectures=x86_64
@@ -54,6 +57,3 @@ EX_DEV_CLIENT_NETWORK_INSPECTOR=true
 
 # Use legacy packaging to compress native libraries in the resulting APK.
 expo.useLegacyPackaging=false
-
-android.kotlinVersion=1.7.22
-android.extraMavenRepos=[]

android/gradle/wrapper/gradle-wrapper.jar

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,19 @@
+import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
+
+plugins {
+    kotlin("jvm") version "1.9.24"
+    id("java-gradle-plugin")
+}
+
+repositories {
+    mavenCentral()
+}
+
+gradlePlugin {
+    plugins {
+        create("reactSettingsPlugin") {
+            id = "com.facebook.react.settings"
+            implementationClass = "expo.plugins.ReactSettingsPlugin"
+        }
+    }
+}

android/react-settings-plugin/build.gradle.kts

@@ -0,0 +1,10 @@
+package expo.plugins
+
+import org.gradle.api.Plugin
+import org.gradle.api.initialization.Settings
+
+class ReactSettingsPlugin : Plugin<Settings> {
+  override fun apply(settings: Settings) {
+    // Do nothing, just register the plugin.
+  }
+}

android/react-settings-plugin/src/main/kotlin/expo/plugins/ReactSettingsPlugin.kt

@@ -1,3 +1,49 @@
+pluginManagement {
+  def version = providers.exec {
+    commandLine("node", "-e", "console.log(require('react-native/package.json').version);")
+  }.standardOutput.asText.get().trim()
+  def (_, reactNativeMinor, reactNativePatch) = version.split("-")[0].tokenize('.').collect { it.toInteger() }
+
+  includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json')"].execute(null, rootDir).text.trim()).getParentFile().toString())
+  if(reactNativeMinor == 74 && reactNativePatch <= 3){
+    includeBuild("react-settings-plugin")
+  }
+}
+
+plugins { id("com.facebook.react.settings") }
+
+def getRNMinorVersion() {
+  def version = providers.exec {
+    commandLine("node", "-e", "console.log(require('react-native/package.json').version);")
+  }.standardOutput.asText.get().trim()
+
+  def coreVersion = version.split("-")[0]
+  def (major, minor, patch) = coreVersion.tokenize('.').collect { it.toInteger() }
+
+  return minor
+}
+
+if (getRNMinorVersion() >= 75) {
+  extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
+    if (System.getenv('EXPO_UNSTABLE_CORE_AUTOLINKING') == '1') {
+      println('\u001B[32mUsing expo-modules-autolinking as core autolinking source\u001B[0m')
+      def command = [
+        'node',
+        '--no-warnings',
+        '--eval',
+        'require(require.resolve(\'expo-modules-autolinking\', { paths: [require.resolve(\'expo/package.json\')] }))(process.argv.slice(1))',
+        'react-native-config',
+        '--json',
+        '--platform',
+        'android'
+      ].toList()
+      ex.autolinkLibrariesFromCommand(command)
+    } else {
+      ex.autolinkLibrariesFromCommand()
+    }
+  }
+}
+
 rootProject.name = 'ObytesApp'
 
 dependencyResolutionManagement {
@@ -11,8 +57,10 @@ dependencyResolutionManagement {
 apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
 useExpoModules()
 
-apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
-applyNativeModulesSettingsGradle(settings)
+if (getRNMinorVersion() < 75) {
+  apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
+  applyNativeModulesSettingsGradle(settings)
+}
 
 include ':app'
 includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile())

android/settings.gradle

@@ -50,14 +50,6 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     ],
     'expo-localization',
     'expo-router',
-    [
-      'expo-build-properties',
-      {
-        android: {
-          kotlinVersion: '1.7.22', // this is for softinput package
-        },
-      },
-    ],
     [
       'app-icon-badge',
       {

app.config.ts

@@ -106,19 +106,14 @@ Any Component with props that inherit from the `InputControllerType` can be used
 
 ## Handling Keyboard
 
-The template comes with [`react-native-avoid-softinput`](https://mateusz1913.github.io/react-native-avoid-softinput/) pre-installed and configured to handle the keyboard. You only need to use the `useSoftKeyboardEffect` hook on your screen, and you're good to go.
+The template comes with [`react-native-keyboard-controller`](https://kirillzyusko.github.io/react-native-keyboard-controller/) pre-installed and configured to handle the keyboard. You only need to check the [documentation](https://kirillzyusko.github.io/react-native-keyboard-controller/) and use the appropriate approach for your use case. ( note that we already added the `KeyboardProvider` to the layout in the root file)
 
-```tsx
-import React from 'react';
-import { useSoftKeyboardEffect } from '@/core/keyboard';
-import { LoginForm } from './login-form';
-
-export const Login = () => {
-  useSoftKeyboardEffect();
-  return <LoginForm />;
-};
-```
+Make sure to check the following video for more details on how to handle keyboard in react native:
 
-:::tip
-Note that the hook is not an all-in-one solution for all cases, and you might need more customization depending on your use case. So, please refer to the documentation [recipes pages](https://mateusz1913.github.io/react-native-avoid-softinput/docs/recipes/recipes-form) for more information.
-:::
+<div class="embed-container">
+  <iframe
+    src="https://www.youtube.com/embed/Y51mDfAhd4E?si=8uPml61z0R1hsZGy&amp;start=1139"
+    frameborder="0"
+    allowfullscreen
+  ></iframe>
+</div>

docs/src/content/docs/ui-and-theme/Forms.mdx

@@ -80,3 +80,20 @@
   font-weight: 600;
   line-height: 1.2;
 }
+
+.embed-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+}
+.embed-container iframe,
+.embed-container object,
+.embed-container embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}