A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard.

Overview

react-native-keyboard-accessory

npm version npm total downloads npm weekly downloads

A React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard.

IOS View Example IOS Navigation Example

Expo Snack Playground

https://snack.expo.io/@ardaogulcan/react-native-keyboard-accessory-playground

Installation

Via npm:

npm install react-native-keyboard-accessory --save

Via Yarn:

yarn add react-native-keyboard-accessory

Usage

You can use the KeyboardAccessoryView or the KeyboardAccessoryNavigation components.

Keyboard Accessory View

Import react-native-keyboard-accessory

import { KeyboardAccessoryView } from 'react-native-keyboard-accessory'

Use it inside your render() function:

<KeyboardAccessoryView>
  <View>
    <TextInput />
  </View>
</KeyboardAccessoryView>

Important: KeyboardAccessoryView should be positioned inside the Root Element which is covering the screen, mostly the top most view styled as { flex: 1 }.

Render Prop

Alternatively, you can also pass a function as the children prop of the component. This allows you to access an isKeyboardVisible prop which is useful to render things conditionally based on the visibility of the keyboard:

<KeyboardAccessoryView>
  {({ isKeyboardVisible }) => {
    return (
      <>
        <Text>Always visible</Text>
        {!isKeyboardVisible ? (
          <Text>Hidden when keyboard is visible</Text>
        ) : null}
      </>
    );
  }}
</KeyboardAccessoryView>

Keyboard Accessory Navigation

Import react-native-keyboard-accessory

import { KeyboardAccessoryNavigation } from 'react-native-keyboard-accessory'

And use it inside your render() function:

<KeyboardAccessoryNavigation />

Important: KeyboardAccessoryNavigation should be positioned inside the Root Element which is covering the screen, mostly the top most view styled as { flex: 1 }.

For Ejected Apps

For Android, make sure you have set android:windowSoftInputMode to adjustResize in android/app/src/main/AndroidManifest.xml

And set androidAdjustResize to true. For example,

<KeyboardAccessoryView androidAdjustResize />
// or
<KeyboardAccessoryNavigation androidAdjustResize />

To maintain KeyboardAvoidingView behavior

<KeyboardAccessoryNavigation avoidKeyboard />

API

KeyboardAccessoryView

Prop Type Default Description
style object null Style object or StyleSheet reference which will be applied to Accessory View
animateOn enum:string 'ios' Enables show/hide animation on given platform. Values: ['ios', 'android', 'all', 'none'].
animationConfig function or object null For passing custom animations to show/hide. If given prop is function, duration and easing parameters from Keyboard event will be passed to the function, function should return LayoutAnimation compatible animation config. Or you can directly pass animation config object.
alwaysVisible boolean false When set to true Accessory View will be always visible at the bottom of the screen. Good for sticky TextInput's
bumperHeight number 15 Bumper height to prevent visual glitches if animation couldn't keep up with the keyboard animation.
visibleOpacity number 1 Opacity of the Accessory when it is visible. Note: Opacity is used for hiding the accessory to prevent render delays.
hiddenOpacity number 0 Opacity of the Accessory when it is hidden.
hideBorder boolean false Set true if you want to hide top border of the Accessory
inSafeAreaView boolean false Set true if you want to adapt SafeAreaView on iPhone X
androidAdjustResize boolean false Set true in ejected apps to adjust resize
avoidKeyboard boolean false Set true if you want accessory to maintain KeyboardAvoidingView behavior. You shouldn't use any other Keyboard Avoiding library when you set this to true

KeyboardAccessoryNavigation

All the KeyboardAccessoryView props will be passed.

Prop Type Default Description
doneButtonTitle string 'Done' Title text to show on the right Button of Navigation View
tintColor string '#007AFF' Tint color for the arrows and done button
doneButton node null Replace default Done Button. Non-Touchable node should be provided.
nextButton node null Replace default Next Button. Non-Touchable node should be provided.
previousButton node null Replace default Previous Button. Non-Touchable node should be provided.
doneDisabled boolean false Disables Done Button
nextDisabled boolean false Disables Next Button
previousDisabled boolean false Disables Previous Button
doneHidden boolean false Hides Done Button
nextHidden boolean false Hides Next Button
previousHidden boolean false Hides Previous Button
accessoryStyle object null Style object or StyleSheet reference which will be applied to Navigation Accessory View.
doneButtonStyle object null Style object or StyleSheet reference which will be applied to Done Button View
doneButtonTitleStyle object null Style object or StyleSheet reference which will be applied to Done Button Text
doneButtonHitslop Insets { left: 0, top: 0, right: 0, bottom: 0 } This defines how far your touch can start away from the doneButton
previousButtonStyle object 0 Style object or StyleSheet reference which will be applied to Previous Button View
nextButtonStyle object 0 Style object or StyleSheet reference which will be applied to Next Button View
nextButtonDirection enum:string 'down' Arrow direction for the Next Button. Values: ['down', 'up', 'right', 'left'].
nextButtonHitslop Insets { left: 0, top: 0, right: 0, bottom: 0 } This defines how far your touch can start away from the nextButton
previousButtonDirection enum:string 'up' Arrow direction for the Previous Button. Values: ['down', 'up', 'right', 'left'].
previousButtonHitslop Insets { left: 0, top: 0, right: 0, bottom: 0 } This defines how far your touch can start away from the previousButton
onDone function null Triggered on Done Button press
onNext function null Triggered on Next Button press
onPrevious function null Triggered on Previous Button press

KeyboardAwareTabBarComponent

Prop Type Default Description
TabBarComponent node, function Provide TabBarComponent to render. Usually from react-navigation

Known Issues

  • Accessory doesn't follow keyboard when closed with drag gesture.
Comments
  • [Android][EMULATOR] KeyboardAccessoryView is detached from keyboard when input is focused

    [Android][EMULATOR] KeyboardAccessoryView is detached from keyboard when input is focused

    It works fine on iOS.

    Structure of my screen:

    <View style={{ flex: 1 }}>
      <View>
        ...
      </View>
      <KeyboardAccessoryView>
        <View><Text> ... </Text></View>
      </KeyboardAccessoryView>
    </View>
    

    The result: screen shot 2018-06-19 at 16 09 28 screen shot 2018-06-19 at 16 09 38

    opened by theohdv 13
  • Accessory never shown when alwaysVisible is false

    Accessory never shown when alwaysVisible is false

    When alwaysVisible is set to false, the accessory never shows, not even when the keyboard comes up. I have narrowed down the issue to this line. When the keyboardWillShow or keyboardDidShow event is received, these lines set the right accessoryHeight in the state. When the children layout, however, the line mentioned previously resets this value to 0, even if isKeyboardVisible is true.

    I fixed the issue by changing:

    accessoryHeight: this.props.alwaysVisible ? layoutEvent.nativeEvent.layout.height : 0,
    

    to:

    accessoryHeight: this.props.alwaysVisible || this.state.isKeyboardVisible ? layoutEvent.nativeEvent.layout.height : 0,
    
    opened by TuurDutoit 6
  • Implement Props to Hide Prev/Next Buttons

    Implement Props to Hide Prev/Next Buttons

    Please do not merge.

    There's still some more work to be done here and I haven't actually tested the code because I can't get the example to link to the package. Is the example working?

    Changes:

    • Adds nextHidden boolean prop to hide next button (defaults to false)
    • Adds prevHidden boolean prop to hide prev button (also defaults to false)
    • Renames previousDisabled prop to prevDisabled (to follow the rest of the props)

    Connect https://github.com/ardaogulcan/react-native-keyboard-accessory/issues/5.

    opened by pburtchaell 6
  • Add a TypeScript module definition

    Add a TypeScript module definition

    Adds a TS module definition based on the documentation and prop types.

    The type for KeyboardAwareTabBarComponent could be improved (the pass-through props will be untyped, essentially) but it should not cause any problems.

    Perhaps the project will be written in TS one day, but this is a good part-way solution 😃

    You'll need to make sure index.d.ts is included in the nom package when publishing.

    opened by jdmunro 5
  • Update KeyboardAccessoryView.js

    Update KeyboardAccessoryView.js

    when keyboard show the out view should set real height

    keyboard not show

    View TextInput(flex:1) KeyboardView() View (height: 64)

    KeyboardShow

    View TextInput(flex:1) KeyboardView() View(height: 64, but parent view is 'absolute', so textinput is full height ...)

    opened by binlaniua 5
  • react-native-keyboard-accessory: Command failed.

    react-native-keyboard-accessory: Command failed.

    When I try to install with yarn,

    yarn add react-native-keyboard-accessory

    It throws error like this.

    yarn add v1.3.2
    [1/4] 🔍  Resolving packages...
    [2/4] 🚚  Fetching packages...
    [3/4] 🔗  Linking dependencies...
    warning " > @perrymitchell/[email protected]" has unmet peer dependency "[email protected]*".
    warning "expo > [email protected]" has incorrect peer dependency "[email protected]".
    warning "expo > [email protected]" has incorrect peer dependency "[email protected]".
    warning "react-native-dialog-component > react-native-root-siblings > [email protected]" has unmet peer dependency "[email protected]^15.5.10".
    warning " > [email protected]" has unmet peer dependency "[email protected]^4.2.0".
    warning " > [email protected]" has unmet peer dependency "[email protected]".
    [4/4] 📃  Building fresh packages...
    [3/4] ⢀ native-base
    [2/4] ⢀ react-native-elements
    [4/4] ⢀ react-native-keyboard-accessory
    [-/4] ⢀ waiting...
    error /Users/hide/Desktop/username/reactNative/appname/node_modules/react-native-keyboard-accessory: Command failed.
    Exit code: 1
    Command: cd example && npm install
    Arguments:
    
    
    
    
    

    How can I solve this issue?

    opened by teamhide 4
  • Optionally allow children to accept a function

    Optionally allow children to accept a function

    This PR is a simple change that enables you to pass a render prop to KeyboardAccessoryView.

    I've found in multiple applications that it's really convenient to be able to render different views depending on whether the keyboard is visible or not. By using a render prop it allows us a really convenient way to do this, without having to subscribe to any events.

    e.g:

    <KeyboardAccessoryView alwaysVisible>
      {({isKeyboardVisible}) => {
        return (
          <>
            <Text>My Keyboard Accessory</Text>
            {!isKeyboardVisible ? (
              <Text>Hidden when keyboard is visible</Text>
            ) : null}
          </>
        )
      }}
    </KeyboardAccessoryView>
    

    Since this is optional, it is a non-breaking change.

    opened by jdmunro 3
  • Android is not registering onPress events

    Android is not registering onPress events

    In the Android emulator, I am not getting the KeyboardAccessoryView to fire any touch events. I wrapped the entire view in a TouchableOpacity component, and the onPress handler does not ever fire. Is it possible this is just the behavior in the emulator?

          <TouchableOpacity onPress={() => console.log('pressed!')}>
          <View style={{ height: (isKeyboardVisible || alwaysVisible ? visibleHeight  : 0) }}>
            <View
              style={[
                styles.accessory,
                !hideBorder && styles.accessoryBorder,
                style,
                {
                  opacity: (isKeyboardVisible || alwaysVisible ? visibleOpacity : hiddenOpacity),
                  bottom: keyboardHeight - bumperHeight - (applySafeArea ? 0 : 0),
                  height: accessoryHeight + bumperHeight + (applySafeArea ? (isKeyboardVisible ? 0 : 20) : 0),
                  backgroundColor: KomplishTheme.primaryColor,
                }
              ]}
            >
              <View onLayout={this.handleChildrenLayout}>
                { this.props.children }
              </View>
            </View>
          </View>
          </TouchableOpacity>
    
    Screen Shot 2020-01-24 at 7 21 43 AM
    opened by bsbechtel 3
  • Android: Custom keyboard accessory view not avoided

    Android: Custom keyboard accessory view not avoided

    I have a KeyboardAccessoryView which embeds some Views and a TextInput (Red part on attachment). It works fine on iOS and Android:

    inSafeAreaView={true}
    alwaysVisible={true}
    androidAdjustResize={false}
    avoidKeyboard={false}
    

    But I have a few users using custom Android keyboards such as SwiftKey (Blue part on attachment). The offset seems to be matching SwiftKey's accessory view height.

    Any idea to solve this issue?

    SwiftKeyAccessoryView

    opened by ddcrobert 3
  • Extra space appears at top of view after using keyboardAccessoryNavigation

    Extra space appears at top of view after using keyboardAccessoryNavigation

    When I tap the next or previous buttons, it scrolls as expected but when I tap the Done button or tap outside the keyboard, extra space appears at the top of the View (see video in zip file): ExtraSpace.zip

    The code: <ScreenRoot {...getCommonProps(this.props)} navigator={this.props.navigator} showFormNav={false} avoidKeyboard={false}> <KeyboardScrollView> <Form form={formName} ref={this.saveForm} onSubmit={this.handleSubmit} validate={validate} initialValues={this.initialValues} > {this.props.currentUser.showDigitalDials === 'Yes' && <FormPicker title={'Contact Method'} name={'actualContactMethod'} items={actualContactMethodItems}/>} <FormSwitch title={'New Set?'} name={'isNewSetCode'} /> <FormSwitch title={'Create Appointment?'} name={'createAppointment'} /> {appointmentComponents} </Form> </KeyboardScrollView> <KeyboardAccessoryNavigation/> </ScreenRoot>

    opened by clfristoe 3
  • Using RN's inputAccessoryView for native iOS?

    Using RN's inputAccessoryView for native iOS?

    • https://facebook.github.io/react-native/blog/2018/03/22/building-input-accessory-view-for-react-native.html
    • https://facebook.github.io/react-native/docs/inputaccessoryview.html

    Has anyone looked at moving the iOS side of this component to use RN's own, since 0.55? It's built to use the native iOS component to ensure stickiness. That is however iOS only, and this component supports both iOS and Android. Would be great to get the best of both worlds.

    opened by fungilation 3
  • Random UI cut off issues

    Random UI cut off issues

    • Accessory section cuts off at the bottom in web views randomly on both android/iOS
    • Keyboard is mostly lowered to the bottom showing the Accessory alone in random situations in iOS

    The issues are random as in for input fields on the same screen, the accessory keyboard might be fine for one input field focus but not for another. Issue Preview:

    https://user-images.githubusercontent.com/102243843/172815383-671e583d-f379-4be6-86d0-92424eebd313.mov

    https://user-images.githubusercontent.com/102243843/172815983-da1a4de7-02ef-4912-a71a-9e54dae5e7cc.mov

    Code:

    `<View style={styles.container}> <WebView ref={webViewRef} // injectedJavaScriptBeforeContentLoaded={runFirst} injectedJavaScriptBeforeContentLoaded={jsCode} mixedContentMode="compatibility" onMessage={msg => console.log(msg.nativeEvent.data)} source={{ uri: webViewUrl, }} javaScriptEnabled />

      <KeyboardAccessoryView animateOn="all" androidAdjustResize>
        {({isKeyboardVisible}) => (
          <SafeAreaView>
            {isKeyboardVisible && (
              <ScrollView
                horizontal
                keyboardShouldPersistTaps="handled"
                showsHorizontalScrollIndicator={false}
                // contentContainerStyle={styles.scrollContainer}
              >
                {data?.map((item, index) => (
                  <Button
                    key={`item-${index}-${item}`}
                    onPress={() => {
                      webViewRef.current.postMessage(item);
                      // setText(item);
                    }}
                    title={`  ${item}  `}
                  />
                ))}
              </ScrollView>
            )}
          </SafeAreaView>
        )}
      </KeyboardAccessoryView>
    </View>`
    
    opened by nwfiam248 0
  • Bump simple-plist from 1.1.1 to 1.3.1 in /example

    Bump simple-plist from 1.1.1 to 1.3.1 in /example

    Bumps simple-plist from 1.1.1 to 1.3.1.

    Release notes

    Sourced from simple-plist's releases.

    TypeScript

    This release is a rewrite of the JavaScript code into TypeScript code to add strong typing for those who would choose to use it.

    As this is a minor release there should be minimal risk in upgrading from v1.1.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump async from 2.6.3 to 2.6.4 in /example

    Bump async from 2.6.3 to 2.6.4 in /example

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Attempt to fix LayoutAnimation Warning (#76)

    Attempt to fix LayoutAnimation Warning (#76)

    #76 Warning: Overriding previous layout animation with new one before the first began

    Attempt to fix the warning by saving the animating status in state and only running the animation if it's not already animating.

    opened by eminsr 0
  • Bump minimist from 1.2.5 to 1.2.6 in /example

    Bump minimist from 1.2.5 to 1.2.6 in /example

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(0.1.16)
  • 0.1.16(Nov 29, 2021)

    • Fix cut off next button arrow - https://github.com/ardaogulcan/react-native-keyboard-accessory/pull/68
    • Fix issue where multiline text inputs are not able to grow - https://github.com/ardaogulcan/react-native-keyboard-accessory/pull/77
    Source code(tar.gz)
    Source code(zip)
  • 0.1.15(Mar 10, 2021)

  • 0.1.14(Mar 10, 2021)

  • 0.1.13(Oct 26, 2020)

  • 0.1.12(Aug 2, 2020)

  • 0.1.11(Jun 21, 2020)

  • 0.1.10(Oct 6, 2019)

  • 0.1.9(Oct 17, 2018)

    • Allow passing a stateless component as TabBarComponent (#35), @anddon
    • Apply safeArea only for iPhone X (and newer) (#36), @kirillplatonov
    Source code(tar.gz)
    Source code(zip)
  • 0.1.8(Oct 2, 2018)

    • Add avoidKeyboard prop to maintain KeyboardAvoidingView behaviour. Usage
    • Fix nextButtonStyle prop for KeybardAccessoryNavigation (Issue: #27, PR: #28 )
    • Fix publish issues in faulty versions 0.1.6 and 0.1.7
    Source code(tar.gz)
    Source code(zip)
  • 0.1.5(Sep 9, 2018)

  • 0.1.4(Sep 7, 2018)

    • Fix Detached KeyboardAccessoryView on ejected Android Apps. (Issue: https://github.com/ardaogulcan/react-native-keyboard-accessory/issues/17 , Commit: https://github.com/ardaogulcan/react-native-keyboard-accessory/commit/9fd684978df749cc2a76cdf1289c3a4a069d82a3)
    Source code(tar.gz)
    Source code(zip)
  • 0.1.2(Jul 8, 2018)

  • 0.1.1(Jul 8, 2018)

    BREAKING CHANGE: https://github.com/ardaogulcan/react-native-keyboard-accessory/commit/4bb597618441ee65323f1fa277c55eff52251458

    • Changed KeyboardAwareTabBarComponent's tabBarComponent prop to TabBarComponent
    • Remove defaultProp from KeyboardAwareTabBarComponent to avoid react-navigation dependency. Now, TabBarComponent prop is required and you should provide TabBarComponent from your project.
    Source code(tar.gz)
    Source code(zip)
  • 0.0.12(May 29, 2018)

    • Update KeyboardAccessoryView to support React 16.3 lifecycle hooks. https://github.com/ardaogulcan/react-native-keyboard-accessory/commit/74324c97b43daa2f1b62e167b04e413c50358c95
    Source code(tar.gz)
    Source code(zip)
  • 0.0.11(May 29, 2018)

    • Add inSafeAreaView prop to support SafeAreaView on iPhoneX https://github.com/ardaogulcan/react-native-keyboard-accessory/commit/7e54b868f276df3f3dff0f0cd9610f47743474ab
    Source code(tar.gz)
    Source code(zip)
  • 0.0.10(Apr 23, 2018)

  • 0.0.9(Apr 14, 2018)

  • 0.0.8(Mar 14, 2018)

    • Add default top border to KeyboardAccessoryView (and Navigation) to comply with iOS Input Accessory View 7a29bfc74bc6d2a1f2e454491a69b021c86baca8
    • Fix issue obscure other UI elements when keyboard is hidden on some devices https://github.com/ardaogulcan/react-native-keyboard-accessory/pull/8
    • Fix android adjustResize issue and add KeyboardAwareTabBarComponent for use with react-navigation TabNavigator. https://github.com/ardaogulcan/react-native-keyboard-accessory/pull/4
    Source code(tar.gz)
    Source code(zip)
  • 0.0.7(Mar 14, 2018)

    • Add props for hiding next/previous buttons on KeyboardAccessoryNavigation https://github.com/ardaogulcan/react-native-keyboard-accessory/pull/6
    • Fixes postinstall bug from version 0.0.6 https://github.com/ardaogulcan/react-native-keyboard-accessory/commit/625b5298f9de38f66ad0f6ee13b289e4e4fb6558
    Source code(tar.gz)
    Source code(zip)
Owner
Arda Pektaş
*.*
Arda Pektaş
null 133 Sep 20, 2022
PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components

React Native - PicPay Aplicação PicPay usando React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient e styl

Osvaldo Kalvaitir Filho 24 Sep 30, 2022
Plug and play react-native keyboard spacer view.

react-native-keyboard-spacer Plug and play iOS react-native keyboard spacer view. Quick Start Install View: npm install --save react-native-keyboard-s

Andrew Hurst 1.5k Sep 17, 2022
Component for zooming react native views🔎

react-native-reanimated-zoom Component for zooming react native views. ?? demo.mp4 Features Performant. No state triggered re-renders. ⚡️ Can be used

nishan (o^▽^o) 212 Sep 21, 2022
A React Native component that implements SectionList with inverted direction and working sticky header

InvertedSectionList A React Native component that implements SectionList with inverted direction and working sticky header Demo import React, { Functi

Launch Platform 17 Aug 29, 2022
React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons)

react-native-tabs React Native platform-independent tabs. Could be used for bottom tab bars as well as sectioned views (with tab buttons) Why I need t

Pavel Aksonov 716 Sep 10, 2022
⚡ Build React Native views blazingly fast.

⚡ Stacks · Build React Native views blazingly fast. Motivation Disclaimer: Stacks is not yet another full design system. Max Stoiber has recently writ

Marcin Dziewulski 776 Sep 24, 2022
A ScrollView-like component with parallax and sticky header support.

Rodrigocs - Animated Driver This component now uses Native Driver by default. Remember to pass a Animated component to renderScrollComponent, by defau

Alexander Vitanov 2.2k Sep 26, 2022
📲 Create dynamic views through device, display and orientation detection (DEPRECATED)

?? React Native Device Display This package is now deprecated and I am not actively maintaining it. In the meantime you can also use react-native-orie

Karl Daniel 107 Sep 12, 2022
Cycle.js run() for react-native-navigation on react-native-web

Cycle Native Navigation Web Similar to and largely compatible with cycle-native-navigation but meant for use with react-native-web and Electron. npm i

André Staltz 5 Apr 8, 2022
Simple, performant & type-safe cross platform navigation in React Native / React Native Web

Simple and performant cross platform navigation on iOS, Android and the web with simple and type-safe api for React 18 (alpha)

webRidge 33 Aug 26, 2022
🧼 Bubble Tab Bar Component for React Native which supports React Navigation V5 and TypeScript

?? react-native-bubble-tabbar Bubble Tab Bar Component for React Native which supports React Navigation V5 and TypeScript ?? Action ?? Installation np

Junho Yeo 43 Mar 29, 2022
react-native-3dcube-navigation ★80 - Page Swiper component with 3D cube transition (horizontal and vertical)

react-native-3dcube-navigation Installation With Yarn $ yarn add react-native-3dcube-navigation With NPM $ npm i react-native-3dcube-navigation --save

Zeh Fernandes 274 Aug 21, 2022
A performant customizable bottom sheet component made on top of wix react-native-navigation library.

?? React Native Navigation Bottom Sheet Extension A performant customizable bottom sheet component made on top of wix react-native-navigation library.

CursedWizard 45 Sep 21, 2022
React Native: Native Siri Wave View

ReactNative: Native Siri Wave View (Android/iOS): Deprecated Due to time constraint, this library is deprecated and not maintained anymore, You can s

Pranav Raj Singh Chauhan 137 Jul 20, 2022
React Native Grid/Collection View component

react-native-grid-view THIS PROJECT IS NO LONGER MAINTAINED, PLEASE GRAB THE SOURCE CODE AND TAKE OWNERSHIP IN YOUR OWN PROJECT IF YOU FIND IT USEFUL.

Luis Floreani 281 Jul 12, 2022
A react native scroll view component with Parallax header :p

RNParallax (react-native-parallax-header) A react native scroll view component with Parallax header :p Inspired by GitHub - jaysoo/react-native-parall

Carol 515 Sep 19, 2022
A lightweight View component for React Native

react-native-view A lightweight View component that can be styled quickly. Installation $ npm install react-native-view --save then import View from '

Alexander Vitanov 39 Oct 25, 2021