Add scrollableContainerStyle

.gitignore

@@ -20,7 +20,6 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-project.xcworkspace
 
 # Android/IntelliJ
 #
@@ -33,10 +32,6 @@ local.properties
 /android/gradlew.bat
 /android/gradle/
 
-# Visual Studio Code
-#
-.vscode/
-
 # node.js
 #
 node_modules/

README.md

@@ -62,6 +62,8 @@ Lastly, validate if the content above the accessory view has correct offsets, if
 
 - `renderBackground` (optional) - accepts a function returning React node. This is useful when you want to have a custom node as a background (e.g. `<ImageBackground style={StyleSheet.absoluteFill} />` ). Remember about absolute positioning.
 
+- `scrollableContainerStyle` (optional) - accepts [View Style Props](https://reactnative.dev/docs/view-style-props). Use to style the container wrapping a scrollable component passed in `renderScrollable`. In case you want scrollable to fill the entire container try passing `flex: 1` here.
+
 - `spaceBetweenKeyboardAndAccessoryView` (optional) - accepts a number. Use to adjust space between the accessory view and the keyboard, when the latter is open. Read more [here](#handling-wrong-offsets).
 
 - `useListenersOnAndroid` (optional) - accepts a boolean. By default, Android OS will resize the window when the keyboard is open and accessory view will automatically be positioned above the keyboard. This behavior can be amended, so if for some reason accessory view doesn't appear on top of the keyboard, try setting this prop, it will calculate the content height based on a keyboard listener. Has no impact on iOS.

example/.editorconfig

@@ -0,0 +1,3 @@
+# Windows files
+[*.bat]
+end_of_line = crlf

example/.eslintrc.js

@@ -1,7 +1,6 @@
 module.exports = {
   extends: ['@react-native-community', 'plugin:prettier/recommended'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'simple-import-sort'],
+  plugins: ['simple-import-sort'],
   root: true,
   rules: {
     'import/order': 'off',

example/.gitattributes

@@ -1,4 +1,3 @@
-# specific for windows script files
+# Windows files should use crlf line endings
+# https://help.github.com/articles/dealing-with-line-endings/
 *.bat text eol=crlf
-
-*.pbxproj -text

example/.gitignore

@@ -20,7 +20,6 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-project.xcworkspace
 
 # Android/IntelliJ
 #
@@ -30,10 +29,6 @@ build/
 local.properties
 *.iml
 
-# Visual Studio Code
-#
-.vscode/
-
 # node.js
 #
 node_modules/

example/README.md

@@ -1,4 +1,4 @@
-# Example
+# example
 
 ## Getting Started
 
@@ -23,3 +23,20 @@ or
 ```bash
 yarn android
 ```
+
+## Updating project
+
+1. Remove current `example` project
+2. Create a project named `example` using [react-native-better-template](https://github.com/demchenkoalex/react-native-better-template)
+3. Revert `README.md` so you can see this guide
+4. In `tsconfig.json` add
+
+```json
+"baseUrl": ".",
+"paths": {
+  "@flyerhq/react-native-keyboard-accessory-view": ["../src"]
+},
+```
+
+5. Check the difference in `metro.config.js` and combine all
+6. Revert `App.tsx`

example/android/app/build.gradle

@@ -122,6 +122,8 @@ def jscFlavor = 'org.webkit:android-jsc:+'
 def enableHermes = project.ext.react.get('enableHermes', false);
 
 android {
+    ndkVersion rootProject.ext.ndkVersion
+
     compileSdkVersion rootProject.ext.compileSdkVersion
 
     compileOptions {
@@ -170,18 +172,20 @@ android {
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
             // https://developer.android.com/studio/build/configure-apk-splits.html
+            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
             def versionCodes = ['armeabi-v7a': 1, 'x86': 2, 'arm64-v8a': 3, 'x86_64': 4]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants
                 output.versionCodeOverride =
-                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
             }
 
         }
     }
 }
 
 dependencies {
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlinVersion"
     implementation fileTree(dir: 'libs', include: ['*.jar'])
     //noinspection GradleDynamicVersion
     implementation 'com.facebook.react:react-native:+'  // From node_modules

example/android/app/src/debug/AndroidManifest.xml

@@ -2,7 +2,12 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
 
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+    <application
+        android:usesCleartextTraffic="true"
+        tools:ignore="GoogleAppIndexingWarning"
+        tools:targetApi="28">
+        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
 </manifest>

example/android/app/src/main/AndroidManifest.xml

@@ -21,7 +21,5 @@
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
-        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
     </application>
-
 </manifest>

example/android/app/src/main/java/com/example/MainApplication.kt

@@ -15,6 +15,8 @@ class MainApplication : Application(), ReactApplication {
 
         override fun getPackages(): List<ReactPackage> {
             val packages = PackageList(this).packages
+            // Packages that cannot be autolinked yet can be added manually here, for example:
+            // packages.add(MyReactNativePackage());
             return packages
         }
 

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

@@ -1,7 +1,7 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:textColor">#000000</item>
     </style>

example/android/build.gradle

@@ -2,20 +2,20 @@
 
 buildscript {
     ext {
-        buildToolsVersion = '29.0.3'
-        minSdkVersion = 16
-        compileSdkVersion = 29
-        targetSdkVersion = 29
-        kotlinVersion = '1.4.21'
+        buildToolsVersion = '30.0.3'
+        minSdkVersion = 21
+        compileSdkVersion = 30
+        targetSdkVersion = 30
+        kotlinVersion = '1.5.0'
+        ndkVersion = '22.0.7026061'
     }
     repositories {
         google()
         jcenter()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:4.1.2'
+        classpath 'com.android.tools.build:gradle:4.2.1'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
-
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }
@@ -35,6 +35,6 @@ allprojects {
 
         google()
         jcenter()
-        maven { url 'https://jitpack.io' }
+        maven { url 'https://www.jitpack.io' }
     }
 }

example/android/gradle.properties

@@ -25,4 +25,4 @@ android.useAndroidX=true
 android.enableJetifier=true
 
 # Version of flipper SDK to use with React Native
-FLIPPER_VERSION=0.73.0
+FLIPPER_VERSION=0.87.0

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-6.8.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

example/android/gradlew

@@ -82,6 +82,7 @@ esac
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 
+
 # Determine the Java command to use to start the JVM.
 if [ -n "$JAVA_HOME" ] ; then
     if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
@@ -129,6 +130,7 @@ fi
 if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
     APP_HOME=`cygpath --path --mixed "$APP_HOME"`
     CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
     JAVACMD=`cygpath --unix "$JAVACMD"`
 
     # We build the pattern for arguments to be converted via cygpath

example/android/gradlew.bat

@@ -5,7 +5,7 @@
 @rem you may not use this file except in compliance with the License.
 @rem You may obtain a copy of the License at
 @rem
-@rem      http://www.apache.org/licenses/LICENSE-2.0
+@rem      https://www.apache.org/licenses/LICENSE-2.0
 @rem
 @rem Unless required by applicable law or agreed to in writing, software
 @rem distributed under the License is distributed on an "AS IS" BASIS,
@@ -40,7 +40,7 @@ if defined JAVA_HOME goto findJavaFromJavaHome
 
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto init
+if "%ERRORLEVEL%" == "0" goto execute
 
 echo.
 echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
@@ -54,7 +54,7 @@ goto fail
 set JAVA_HOME=%JAVA_HOME:"=%
 set JAVA_EXE=%JAVA_HOME%/bin/java.exe
 
-if exist "%JAVA_EXE%" goto init
+if exist "%JAVA_EXE%" goto execute
 
 echo.
 echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
@@ -64,28 +64,14 @@ echo location of your Java installation.
 
 goto fail
 
-:init
-@rem Get command-line arguments, handling Windows variants
-
-if not "%OS%" == "Windows_NT" goto win9xME_args
-
-:win9xME_args
-@rem Slurp the command line arguments.
-set CMD_LINE_ARGS=
-set _SKIP=2
-
-:win9xME_args_slurp
-if "x%~1" == "x" goto execute
-
-set CMD_LINE_ARGS=%*
-
 :execute
 @rem Setup the command line
 
 set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
+
 @rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
 
 :end
 @rem End local scope for the variables with windows NT shell

example/android/settings.gradle

@@ -1,4 +1,3 @@
 rootProject.name = 'example'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
-
 include ':app'

example/ios/Podfile

@@ -6,14 +6,19 @@ platform :ios, '10.0'
 target 'example' do
   config = use_native_modules!
 
-  use_react_native!(:path => config["reactNativePath"])
+  use_react_native!(
+    :path => config[:reactNativePath],
+    # to enable hermes on iOS, change `false` to `true` and then install pods
+    :hermes_enabled => false
+  )
 
   # Enables Flipper.
   #
   # Note that if you have use_frameworks! enabled, Flipper will not work and
-  # you should disable these next few lines.
-  use_flipper!({ 'Flipper' => '0.73.0' })
+  # you should disable the next line.
+  use_flipper!({ 'Flipper' => '0.87.0' })
+
   post_install do |installer|
-    flipper_post_install(installer)
+    react_native_post_install(installer)
   end
 end