All Projects → Andr3wHur5t → React Native Keyboard Spacer

Andr3wHur5t / React Native Keyboard Spacer

Licence: mit
Plug and play react-native keyboard spacer view.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Keyboard Spacer

Study Path
An organized learning path about Clean Code, Test-Driven Development, Legacy Code, Refactoring, Domain-Driven Design and Microservice Architecture
Stars: ✭ 1,357 (-8%)
Mutual labels:  clean-code
Clean Code Notes
My notes of Clean Code book
Stars: ✭ 104 (-92.95%)
Mutual labels:  clean-code
Android Kotlin Clean Architecture
Android Sample Clean Architecture App written in Kotlin
Stars: ✭ 1,562 (+5.9%)
Mutual labels:  clean-code
Lot60 Ble Keyboard
A 60% bluetooth keyboard (Hardware)
Stars: ✭ 100 (-93.22%)
Mutual labels:  keyboard
Uiviewcontroller Keyboardadditions
Tiny UIViewController category that provides handy way for keyboard handling logic.
Stars: ✭ 102 (-93.08%)
Mutual labels:  keyboard
Clean Arch Pokemon
Clean Architecture de um modo divertido e prático integrando uma API com uma API de Pokémon.
Stars: ✭ 103 (-93.02%)
Mutual labels:  clean-code
Codemaid
CodeMaid is an open source Visual Studio extension to cleanup and simplify our C#, C++, F#, VB, PHP, PowerShell, JSON, XAML, XML, ASP, HTML, CSS, LESS, SCSS, JavaScript and TypeScript coding.
Stars: ✭ 1,353 (-8.27%)
Mutual labels:  clean-code
Karabiner Driverkit Virtualhiddevice
Stars: ✭ 108 (-92.68%)
Mutual labels:  keyboard
Ios Learning Materials
📚Curated list of articles, web-resources, tutorials and code repositories that may help you dig a little bit deeper into iOS [and Apple Platforms].
Stars: ✭ 1,380 (-6.44%)
Mutual labels:  clean-code
Hyperapp Fx
Effects for use with Hyperapp
Stars: ✭ 105 (-92.88%)
Mutual labels:  keyboard
Apex Unified Logging
Platform-Event-based Apex logger for unified logging over transaction boundaries
Stars: ✭ 101 (-93.15%)
Mutual labels:  clean-code
Lhskeyboardadjusting
An easy-to-use Objective-C protocol that automatically resizes / adjusts views when a keyboard appears on iOS.
Stars: ✭ 101 (-93.15%)
Mutual labels:  keyboard
Keyboardavoider
The missing interactive keyboard in SwiftUI for iOS
Stars: ✭ 105 (-92.88%)
Mutual labels:  keyboard
No Framework Tutorial
A small tutorial to show how to create a PHP application without a framework.
Stars: ✭ 1,357 (-8%)
Mutual labels:  clean-code
Kll
KLL Compiler
Stars: ✭ 105 (-92.88%)
Mutual labels:  keyboard
Digitalkeyboard
手动实现简单的身份证数字键盘
Stars: ✭ 99 (-93.29%)
Mutual labels:  keyboard
Ally.js
JavaScript library to help modern web applications with accessibility concerns
Stars: ✭ 1,447 (-1.9%)
Mutual labels:  keyboard
Clean Flutter
This repo is a small explanation of clean architecture on with flutter framework and some test where added
Stars: ✭ 108 (-92.68%)
Mutual labels:  clean-code
Clean Code Javascript
🛁 Clean Code concepts adapted for JavaScript
Stars: ✭ 62,912 (+4165.22%)
Mutual labels:  clean-code
Dev Stuff
😎 Programming stuff for everyone. Collection of articles, videos about architecture, Domain Driven Design, microservices, testing etc.
Stars: ✭ 105 (-92.88%)
Mutual labels:  clean-code

NPM

react-native-keyboard-spacer

Plug and play iOS react-native keyboard spacer view.

image

Quick Start

Install View: npm install --save react-native-keyboard-spacer

Example Usage

The view will automatically perform a layout animation when the keyboard appears or disappears.

import KeyboardSpacer from 'react-native-keyboard-spacer';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Image,
  View,
  TextInput
} from 'react-native';

class DemoApp extends Component {
  render() {
    return (
      <View style={[{flex: 1}]}>
        {/* Some random image to show scaling */}
        <Image source={{uri: 'http://img11.deviantart.net/072b/i/2011/206/7/0/the_ocean_cherry_tree_by_tomcadogan-d41nzsz.png', static: true}}
                 style={{flex: 1}}/>

        {/* The text input to put on top of the keyboard */}
        <TextInput style={{left: 0, right: 0, height: 45}}
              placeholder={'Enter your text!'}/>

        {/* The view that will animate to match the keyboards height */}
        <KeyboardSpacer/>
      </View>
    );
  }
}

AppRegistry.registerComponent('DemoApp', () => DemoApp);

Properties - Basic

Prop Default Type Description
topSpacing 0 number Add or subtract additional spacing from keyboard height
animationConfig A default animation LayoutAnimationConfig LayoutAnimation configuration object

Properties - Methods

Prop Params Type Description
onToggle toggleState function onToggle method is called when when keyboard toggles. Two parameters passed through, keyboardState (boolean, true if keyboard shown) and keyboardSpace (height occupied by keyboard)
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].