├── .eslintrc ├── .gitignore ├── .npmignore ├── Example ├── .buckconfig ├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.tsx ├── __tests__ │ └── App-test.tsx ├── android │ ├── app │ │ ├── _BUCK │ │ ├── build.gradle │ │ ├── build_defs.bzl │ │ ├── debug.keystore │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── textinputeffects │ │ │ │ └── ReactNativeFlipper.java │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── textinputeffects │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.js ├── ios │ ├── Podfile │ ├── Podfile.lock │ ├── TextInputEffects-tvOS │ │ └── Info.plist │ ├── TextInputEffects-tvOSTests │ │ └── Info.plist │ ├── TextInputEffects.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ ├── TextInputEffects-tvOS.xcscheme │ │ │ └── TextInputEffects.xcscheme │ ├── TextInputEffects.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ ├── TextInputEffects │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ └── main.m │ └── TextInputEffectsTests │ │ ├── Info.plist │ │ └── TextInputEffectsTests.m ├── metro.config.js ├── package.json ├── tsconfig.json └── yarn.lock ├── LICENCE ├── README.md ├── lib ├── Akira.js ├── BaseInput.js ├── Fumi.js ├── Hideo.js ├── Hoshi.js ├── Isao.js ├── Jiro.js ├── Kaede.js ├── Kohana.js ├── Madoka.js ├── Makiko.js ├── Sae.js └── index.js ├── package-lock.json ├── package.json ├── screenshots ├── akira.gif ├── full.gif ├── fumi.gif ├── hideo.gif ├── hoshi.gif ├── isao.gif ├── jiro.gif ├── kaede.gif ├── kohana.gif ├── madoka.gif ├── makiko.gif └── sae.gif └── types └── types.d.ts /.eslintrc: -------------------------------------------------------------------------------- 1 | // extended using airbnb's eslint config 2 | // see: https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb 3 | { 4 | "extends": "airbnb", 5 | "parser": "babel-eslint", 6 | 7 | "rules": { 8 | "no-alert": 0, 9 | "no-use-before-define": 0, 10 | "no-return-assign": 0, 11 | "no-mixed-operators": 0, 12 | "no-prototype-builtins": 0, 13 | "react/jsx-closing-bracket-location": 0, 14 | "react/jsx-no-bind": 0, 15 | "react/no-string-refs": 0, 16 | "react/jsx-first-prop-new-line": 0, 17 | "react/jsx-filename-extension": 0, 18 | "react/prefer-stateless-function": 0, 19 | "no-underscore-dangle": 0, 20 | "import/no-unresolved": 0, 21 | "import/no-extraneous-dependencies": 0 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | *.iml 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | Example 2 | screenshots 3 | -------------------------------------------------------------------------------- /Example/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /Example/.eslintrc.js: -------------------------------------------------------------------------------- 1 | export default { 2 | root: true, 3 | extends: '@react-native-community', 4 | parser: '@typescript-eslint/parser', 5 | plugins: ['@typescript-eslint'], 6 | rules: { 7 | quotes: 'double', 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /Example/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # Android/IntelliJ 25 | # 26 | build/ 27 | .idea 28 | .gradle 29 | local.properties 30 | *.iml 31 | 32 | # Visual Studio Code 33 | # 34 | .vscode/ 35 | 36 | # node.js 37 | # 38 | node_modules/ 39 | npm-debug.log 40 | yarn-error.log 41 | 42 | # BUCK 43 | buck-out/ 44 | \.buckd/ 45 | *.keystore 46 | !debug.keystore 47 | 48 | # fastlane 49 | # 50 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 51 | # screenshots whenever they are needed. 52 | # For more information about the recommended setup visit: 53 | # https://docs.fastlane.tools/best-practices/source-control/ 54 | 55 | */fastlane/report.xml 56 | */fastlane/Preview.html 57 | */fastlane/screenshots 58 | 59 | # Bundle artifact 60 | *.jsbundle 61 | 62 | # CocoaPods 63 | /ios/Pods/ 64 | -------------------------------------------------------------------------------- /Example/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: false, 3 | trailingComma: 'all', 4 | }; 5 | -------------------------------------------------------------------------------- /Example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Example/App.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * 5 | * Generated with the TypeScript template 6 | * https://github.com/react-native-community/react-native-template-typescript 7 | * 8 | * @format 9 | */ 10 | 11 | import React from "react"; 12 | import { ScrollView, StyleSheet, Text, View } from "react-native"; 13 | 14 | import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"; 15 | 16 | import { 17 | Kaede, 18 | Hoshi, 19 | Jiro, 20 | Isao, 21 | Madoka, 22 | Akira, 23 | Hideo, 24 | Kohana, 25 | Makiko, 26 | Sae, 27 | Fumi, 28 | } from "react-native-textinput-effects"; 29 | 30 | const App = () => { 31 | return ( 32 | 33 | 34 | Kaede 35 | 36 | 49 | 50 | 51 | Sae 52 | 58 | 63 | 64 | 65 | Hoshi 66 | 67 | 73 | 74 | 75 | Jiro 76 | 81 | 87 | 88 | 89 | Fumi 90 | 99 | 106 | 107 | 108 | Isao 109 | 114 | 120 | 121 | 122 | Akira 123 | 128 | 134 | 135 | 136 | Madoka 137 | 144 | 151 | 152 | 153 | Hideo 154 | 162 | 170 | 171 | 172 | Kohana 173 | 184 | 194 | 195 | 196 | Makiko 197 | 205 | 213 | 214 | 215 | ); 216 | }; 217 | 218 | const styles = StyleSheet.create({ 219 | container: { 220 | flex: 1, 221 | paddingTop: 24, 222 | backgroundColor: "white", 223 | }, 224 | content: { 225 | // not cool but good enough to make all inputs visible when keyboard is active 226 | paddingBottom: 300, 227 | }, 228 | card1: { 229 | paddingVertical: 16, 230 | }, 231 | card2: { 232 | padding: 16, 233 | }, 234 | input: { 235 | marginTop: 4, 236 | }, 237 | title: { 238 | paddingBottom: 16, 239 | textAlign: "center", 240 | color: "#404d5b", 241 | fontSize: 20, 242 | fontWeight: "bold", 243 | opacity: 0.8, 244 | }, 245 | }); 246 | 247 | export default App; 248 | -------------------------------------------------------------------------------- /Example/__tests__/App-test.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /Example/android/app/_BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.textinputeffects", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.textinputeffects", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /Example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation. If none specified and 19 | * // "index.android.js" exists, it will be used. Otherwise "index.js" is 20 | * // default. Can be overridden with ENTRY_FILE environment variable. 21 | * entryFile: "index.android.js", 22 | * 23 | * // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format 24 | * bundleCommand: "ram-bundle", 25 | * 26 | * // whether to bundle JS and assets in debug mode 27 | * bundleInDebug: false, 28 | * 29 | * // whether to bundle JS and assets in release mode 30 | * bundleInRelease: true, 31 | * 32 | * // whether to bundle JS and assets in another build variant (if configured). 33 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 34 | * // The configuration property can be in the following formats 35 | * // 'bundleIn${productFlavor}${buildType}' 36 | * // 'bundleIn${buildType}' 37 | * // bundleInFreeDebug: true, 38 | * // bundleInPaidRelease: true, 39 | * // bundleInBeta: true, 40 | * 41 | * // whether to disable dev mode in custom build variants (by default only disabled in release) 42 | * // for example: to disable dev mode in the staging build type (if configured) 43 | * devDisabledInStaging: true, 44 | * // The configuration property can be in the following formats 45 | * // 'devDisabledIn${productFlavor}${buildType}' 46 | * // 'devDisabledIn${buildType}' 47 | * 48 | * // the root of your project, i.e. where "package.json" lives 49 | * root: "../../", 50 | * 51 | * // where to put the JS bundle asset in debug mode 52 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 53 | * 54 | * // where to put the JS bundle asset in release mode 55 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 56 | * 57 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 58 | * // require('./image.png')), in debug mode 59 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 60 | * 61 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 62 | * // require('./image.png')), in release mode 63 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 64 | * 65 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 66 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 67 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 68 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 69 | * // for example, you might want to remove it from here. 70 | * inputExcludes: ["android/**", "ios/**"], 71 | * 72 | * // override which node gets called and with what additional arguments 73 | * nodeExecutableAndArgs: ["node"], 74 | * 75 | * // supply additional arguments to the packager 76 | * extraPackagerArgs: [] 77 | * ] 78 | */ 79 | 80 | project.ext.react = [ 81 | enableHermes: false, // clean and rebuild if changing 82 | ] 83 | 84 | apply from: "../../node_modules/react-native/react.gradle" 85 | 86 | /** 87 | * Set this to true to create two separate APKs instead of one: 88 | * - An APK that only works on ARM devices 89 | * - An APK that only works on x86 devices 90 | * The advantage is the size of the APK is reduced by about 4MB. 91 | * Upload all the APKs to the Play Store and people will download 92 | * the correct one based on the CPU architecture of their device. 93 | */ 94 | def enableSeparateBuildPerCPUArchitecture = false 95 | 96 | /** 97 | * Run Proguard to shrink the Java bytecode in release builds. 98 | */ 99 | def enableProguardInReleaseBuilds = false 100 | 101 | /** 102 | * The preferred build flavor of JavaScriptCore. 103 | * 104 | * For example, to use the international variant, you can use: 105 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 106 | * 107 | * The international variant includes ICU i18n library and necessary data 108 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 109 | * give correct results when using with locales other than en-US. Note that 110 | * this variant is about 6MiB larger per architecture than default. 111 | */ 112 | def jscFlavor = 'org.webkit:android-jsc:+' 113 | 114 | /** 115 | * Whether to enable the Hermes VM. 116 | * 117 | * This should be set on project.ext.react and mirrored here. If it is not set 118 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode 119 | * and the benefits of using Hermes will therefore be sharply reduced. 120 | */ 121 | def enableHermes = project.ext.react.get("enableHermes", false); 122 | 123 | android { 124 | compileSdkVersion rootProject.ext.compileSdkVersion 125 | 126 | compileOptions { 127 | sourceCompatibility JavaVersion.VERSION_1_8 128 | targetCompatibility JavaVersion.VERSION_1_8 129 | } 130 | 131 | defaultConfig { 132 | applicationId "com.textinputeffects" 133 | minSdkVersion rootProject.ext.minSdkVersion 134 | targetSdkVersion rootProject.ext.targetSdkVersion 135 | versionCode 1 136 | versionName "1.0" 137 | } 138 | splits { 139 | abi { 140 | reset() 141 | enable enableSeparateBuildPerCPUArchitecture 142 | universalApk false // If true, also generate a universal APK 143 | include "armeabi-v7a", "x86", "arm64-v8a", "x86_64" 144 | } 145 | } 146 | signingConfigs { 147 | debug { 148 | storeFile file('debug.keystore') 149 | storePassword 'android' 150 | keyAlias 'androiddebugkey' 151 | keyPassword 'android' 152 | } 153 | } 154 | buildTypes { 155 | debug { 156 | signingConfig signingConfigs.debug 157 | } 158 | release { 159 | // Caution! In production, you need to generate your own keystore file. 160 | // see https://facebook.github.io/react-native/docs/signed-apk-android. 161 | signingConfig signingConfigs.debug 162 | minifyEnabled enableProguardInReleaseBuilds 163 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 164 | } 165 | } 166 | 167 | packagingOptions { 168 | pickFirst "lib/armeabi-v7a/libc++_shared.so" 169 | pickFirst "lib/arm64-v8a/libc++_shared.so" 170 | pickFirst "lib/x86/libc++_shared.so" 171 | pickFirst "lib/x86_64/libc++_shared.so" 172 | } 173 | 174 | // applicationVariants are e.g. debug, release 175 | applicationVariants.all { variant -> 176 | variant.outputs.each { output -> 177 | // For each separate APK per architecture, set a unique version code as described here: 178 | // https://developer.android.com/studio/build/configure-apk-splits.html 179 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] 180 | def abi = output.getFilter(OutputFile.ABI) 181 | if (abi != null) { // null for the universal-debug, universal-release variants 182 | output.versionCodeOverride = 183 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 184 | } 185 | 186 | } 187 | } 188 | } 189 | 190 | dependencies { 191 | implementation fileTree(dir: "libs", include: ["*.jar"]) 192 | //noinspection GradleDynamicVersion 193 | implementation "com.facebook.react:react-native:+" // From node_modules 194 | 195 | implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0" 196 | 197 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { 198 | exclude group:'com.facebook.fbjni' 199 | } 200 | 201 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 202 | exclude group:'com.facebook.flipper' 203 | } 204 | 205 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { 206 | exclude group:'com.facebook.flipper' 207 | } 208 | 209 | if (enableHermes) { 210 | def hermesPath = "../../node_modules/hermes-engine/android/"; 211 | debugImplementation files(hermesPath + "hermes-debug.aar") 212 | releaseImplementation files(hermesPath + "hermes-release.aar") 213 | } else { 214 | implementation jscFlavor 215 | } 216 | } 217 | 218 | // Run this once to be able to run the application with BUCK 219 | // puts all compile dependencies into folder libs for BUCK to use 220 | task copyDownloadableDepsToLibs(type: Copy) { 221 | from configurations.compile 222 | into 'libs' 223 | } 224 | 225 | apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" 226 | 227 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 228 | -------------------------------------------------------------------------------- /Example/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /Example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/Example/android/app/debug.keystore -------------------------------------------------------------------------------- /Example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /Example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Example/android/app/src/debug/java/com/textinputeffects/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.textinputeffects; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin; 21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 22 | import com.facebook.react.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | public class ReactNativeFlipper { 28 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 29 | if (FlipperUtils.shouldEnableFlipper(context)) { 30 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 31 | 32 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 33 | client.addPlugin(new ReactFlipperPlugin()); 34 | client.addPlugin(new DatabasesFlipperPlugin(context)); 35 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 36 | client.addPlugin(CrashReporterPlugin.getInstance()); 37 | 38 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 39 | NetworkingModule.setCustomClientBuilder( 40 | new NetworkingModule.CustomClientBuilder() { 41 | @Override 42 | public void apply(OkHttpClient.Builder builder) { 43 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 44 | } 45 | }); 46 | client.addPlugin(networkFlipperPlugin); 47 | client.start(); 48 | 49 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 50 | // Hence we run if after all native modules have been initialized 51 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 52 | if (reactContext == null) { 53 | reactInstanceManager.addReactInstanceEventListener( 54 | new ReactInstanceManager.ReactInstanceEventListener() { 55 | @Override 56 | public void onReactContextInitialized(ReactContext reactContext) { 57 | reactInstanceManager.removeReactInstanceEventListener(this); 58 | reactContext.runOnNativeModulesQueueThread( 59 | new Runnable() { 60 | @Override 61 | public void run() { 62 | client.addPlugin(new FrescoFlipperPlugin()); 63 | } 64 | }); 65 | } 66 | }); 67 | } else { 68 | client.addPlugin(new FrescoFlipperPlugin()); 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /Example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Example/android/app/src/main/java/com/textinputeffects/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.textinputeffects; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. This is used to schedule 9 | * rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "TextInputEffects"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Example/android/app/src/main/java/com/textinputeffects/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.textinputeffects; 2 | 3 | import android.app.Application; 4 | import android.content.Context; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.soloader.SoLoader; 11 | import java.lang.reflect.InvocationTargetException; 12 | import java.util.List; 13 | 14 | public class MainApplication extends Application implements ReactApplication { 15 | 16 | private final ReactNativeHost mReactNativeHost = 17 | new ReactNativeHost(this) { 18 | @Override 19 | public boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | @SuppressWarnings("UnnecessaryLocalVariable") 26 | List packages = new PackageList(this).getPackages(); 27 | // Packages that cannot be autolinked yet can be added manually here, for example: 28 | // packages.add(new MyReactNativePackage()); 29 | return packages; 30 | } 31 | 32 | @Override 33 | protected String getJSMainModuleName() { 34 | return "index"; 35 | } 36 | }; 37 | 38 | @Override 39 | public ReactNativeHost getReactNativeHost() { 40 | return mReactNativeHost; 41 | } 42 | 43 | @Override 44 | public void onCreate() { 45 | super.onCreate(); 46 | SoLoader.init(this, /* native exopackage */ false); 47 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 48 | } 49 | 50 | /** 51 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 52 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 53 | * 54 | * @param context 55 | * @param reactInstanceManager 56 | */ 57 | private static void initializeFlipper( 58 | Context context, ReactInstanceManager reactInstanceManager) { 59 | if (BuildConfig.DEBUG) { 60 | try { 61 | /* 62 | We use reflection here to pick up the class that initializes Flipper, 63 | since Flipper library is not available in release mode 64 | */ 65 | Class aClass = Class.forName("com.textinputeffects.ReactNativeFlipper"); 66 | aClass 67 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 68 | .invoke(null, context, reactInstanceManager); 69 | } catch (ClassNotFoundException e) { 70 | e.printStackTrace(); 71 | } catch (NoSuchMethodException e) { 72 | e.printStackTrace(); 73 | } catch (IllegalAccessException e) { 74 | e.printStackTrace(); 75 | } catch (InvocationTargetException e) { 76 | e.printStackTrace(); 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/Example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/Example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/Example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/Example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/Example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/Example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/Example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | TextInputEffects 3 | 4 | -------------------------------------------------------------------------------- /Example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "28.0.3" 6 | minSdkVersion = 16 7 | compileSdkVersion = 28 8 | targetSdkVersion = 28 9 | } 10 | repositories { 11 | google() 12 | jcenter() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle:3.5.2") 16 | 17 | // NOTE: Do not place your application dependencies here; they belong 18 | // in the individual module build.gradle files 19 | } 20 | } 21 | 22 | allprojects { 23 | repositories { 24 | mavenLocal() 25 | maven { 26 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 27 | url("$rootDir/../node_modules/react-native/android") 28 | } 29 | maven { 30 | // Android JSC is installed from npm 31 | url("$rootDir/../node_modules/jsc-android/dist") 32 | } 33 | 34 | google() 35 | jcenter() 36 | maven { url 'https://www.jitpack.io' } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.33.1 29 | -------------------------------------------------------------------------------- /Example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/Example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /Example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.0.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /Example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 4 | # Copyright 2015 the original author or authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | ## 21 | ## Gradle start up script for UN*X 22 | ## 23 | ############################################################################## 24 | 25 | # Attempt to set APP_HOME 26 | # Resolve links: $0 may be a link 27 | PRG="$0" 28 | # Need this for relative symlinks. 29 | while [ -h "$PRG" ] ; do 30 | ls=`ls -ld "$PRG"` 31 | link=`expr "$ls" : '.*-> \(.*\)$'` 32 | if expr "$link" : '/.*' > /dev/null; then 33 | PRG="$link" 34 | else 35 | PRG=`dirname "$PRG"`"/$link" 36 | fi 37 | done 38 | SAVED="`pwd`" 39 | cd "`dirname \"$PRG\"`/" >/dev/null 40 | APP_HOME="`pwd -P`" 41 | cd "$SAVED" >/dev/null 42 | 43 | APP_NAME="Gradle" 44 | APP_BASE_NAME=`basename "$0"` 45 | 46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 48 | 49 | # Use the maximum available, or set MAX_FD != -1 to use that value. 50 | MAX_FD="maximum" 51 | 52 | warn () { 53 | echo "$*" 54 | } 55 | 56 | die () { 57 | echo 58 | echo "$*" 59 | echo 60 | exit 1 61 | } 62 | 63 | # OS specific support (must be 'true' or 'false'). 64 | cygwin=false 65 | msys=false 66 | darwin=false 67 | nonstop=false 68 | case "`uname`" in 69 | CYGWIN* ) 70 | cygwin=true 71 | ;; 72 | Darwin* ) 73 | darwin=true 74 | ;; 75 | MINGW* ) 76 | msys=true 77 | ;; 78 | NONSTOP* ) 79 | nonstop=true 80 | ;; 81 | esac 82 | 83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 84 | 85 | # Determine the Java command to use to start the JVM. 86 | if [ -n "$JAVA_HOME" ] ; then 87 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 88 | # IBM's JDK on AIX uses strange locations for the executables 89 | JAVACMD="$JAVA_HOME/jre/sh/java" 90 | else 91 | JAVACMD="$JAVA_HOME/bin/java" 92 | fi 93 | if [ ! -x "$JAVACMD" ] ; then 94 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 95 | 96 | Please set the JAVA_HOME variable in your environment to match the 97 | location of your Java installation." 98 | fi 99 | else 100 | JAVACMD="java" 101 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 102 | 103 | Please set the JAVA_HOME variable in your environment to match the 104 | location of your Java installation." 105 | fi 106 | 107 | # Increase the maximum file descriptors if we can. 108 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 109 | MAX_FD_LIMIT=`ulimit -H -n` 110 | if [ $? -eq 0 ] ; then 111 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 112 | MAX_FD="$MAX_FD_LIMIT" 113 | fi 114 | ulimit -n $MAX_FD 115 | if [ $? -ne 0 ] ; then 116 | warn "Could not set maximum file descriptor limit: $MAX_FD" 117 | fi 118 | else 119 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 120 | fi 121 | fi 122 | 123 | # For Darwin, add options to specify how the application appears in the dock 124 | if $darwin; then 125 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 126 | fi 127 | 128 | # For Cygwin or MSYS, switch paths to Windows format before running java 129 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then 130 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 131 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 132 | JAVACMD=`cygpath --unix "$JAVACMD"` 133 | 134 | # We build the pattern for arguments to be converted via cygpath 135 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 136 | SEP="" 137 | for dir in $ROOTDIRSRAW ; do 138 | ROOTDIRS="$ROOTDIRS$SEP$dir" 139 | SEP="|" 140 | done 141 | OURCYGPATTERN="(^($ROOTDIRS))" 142 | # Add a user-defined pattern to the cygpath arguments 143 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 144 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 145 | fi 146 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 147 | i=0 148 | for arg in "$@" ; do 149 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 150 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 151 | 152 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 153 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 154 | else 155 | eval `echo args$i`="\"$arg\"" 156 | fi 157 | i=$((i+1)) 158 | done 159 | case $i in 160 | (0) set -- ;; 161 | (1) set -- "$args0" ;; 162 | (2) set -- "$args0" "$args1" ;; 163 | (3) set -- "$args0" "$args1" "$args2" ;; 164 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 165 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 166 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 167 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 168 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 169 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 170 | esac 171 | fi 172 | 173 | # Escape application args 174 | save () { 175 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 176 | echo " " 177 | } 178 | APP_ARGS=$(save "$@") 179 | 180 | # Collect all arguments for the java command, following the shell quoting and substitution rules 181 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 182 | 183 | # by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong 184 | if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then 185 | cd "$(dirname "$0")" 186 | fi 187 | 188 | exec "$JAVACMD" "$@" 189 | -------------------------------------------------------------------------------- /Example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 33 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 34 | 35 | @rem Find java.exe 36 | if defined JAVA_HOME goto findJavaFromJavaHome 37 | 38 | set JAVA_EXE=java.exe 39 | %JAVA_EXE% -version >NUL 2>&1 40 | if "%ERRORLEVEL%" == "0" goto init 41 | 42 | echo. 43 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 44 | echo. 45 | echo Please set the JAVA_HOME variable in your environment to match the 46 | echo location of your Java installation. 47 | 48 | goto fail 49 | 50 | :findJavaFromJavaHome 51 | set JAVA_HOME=%JAVA_HOME:"=% 52 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 53 | 54 | if exist "%JAVA_EXE%" goto init 55 | 56 | echo. 57 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 58 | echo. 59 | echo Please set the JAVA_HOME variable in your environment to match the 60 | echo location of your Java installation. 61 | 62 | goto fail 63 | 64 | :init 65 | @rem Get command-line arguments, handling Windows variants 66 | 67 | if not "%OS%" == "Windows_NT" goto win9xME_args 68 | 69 | :win9xME_args 70 | @rem Slurp the command line arguments. 71 | set CMD_LINE_ARGS= 72 | set _SKIP=2 73 | 74 | :win9xME_args_slurp 75 | if "x%~1" == "x" goto execute 76 | 77 | set CMD_LINE_ARGS=%* 78 | 79 | :execute 80 | @rem Setup the command line 81 | 82 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 83 | 84 | @rem Execute Gradle 85 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 86 | 87 | :end 88 | @rem End local scope for the variables with windows NT shell 89 | if "%ERRORLEVEL%"=="0" goto mainEnd 90 | 91 | :fail 92 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 93 | rem the _cmd.exe /c_ return code! 94 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 95 | exit /b 1 96 | 97 | :mainEnd 98 | if "%OS%"=="Windows_NT" endlocal 99 | 100 | :omega 101 | -------------------------------------------------------------------------------- /Example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'TextInputEffects' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /Example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "TextInputEffects", 3 | "displayName": "TextInputEffects" 4 | } -------------------------------------------------------------------------------- /Example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /Example/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from "react-native"; 6 | import App from "./App"; 7 | import {name as appName} from "./app.json"; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /Example/ios/Podfile: -------------------------------------------------------------------------------- 1 | platform :ios, '9.0' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | def add_flipper_pods!(versions = {}) 5 | versions['Flipper'] ||= '~> 0.33.1' 6 | versions['DoubleConversion'] ||= '1.1.7' 7 | versions['Flipper-Folly'] ||= '~> 2.1' 8 | versions['Flipper-Glog'] ||= '0.3.6' 9 | versions['Flipper-PeerTalk'] ||= '~> 0.0.4' 10 | versions['Flipper-RSocket'] ||= '~> 1.0' 11 | 12 | pod 'FlipperKit', versions['Flipper'], :configuration => 'Debug' 13 | pod 'FlipperKit/FlipperKitLayoutPlugin', versions['Flipper'], :configuration => 'Debug' 14 | pod 'FlipperKit/SKIOSNetworkPlugin', versions['Flipper'], :configuration => 'Debug' 15 | pod 'FlipperKit/FlipperKitUserDefaultsPlugin', versions['Flipper'], :configuration => 'Debug' 16 | pod 'FlipperKit/FlipperKitReactPlugin', versions['Flipper'], :configuration => 'Debug' 17 | 18 | # List all transitive dependencies for FlipperKit pods 19 | # to avoid them being linked in Release builds 20 | pod 'Flipper', versions['Flipper'], :configuration => 'Debug' 21 | pod 'Flipper-DoubleConversion', versions['DoubleConversion'], :configuration => 'Debug' 22 | pod 'Flipper-Folly', versions['Flipper-Folly'], :configuration => 'Debug' 23 | pod 'Flipper-Glog', versions['Flipper-Glog'], :configuration => 'Debug' 24 | pod 'Flipper-PeerTalk', versions['Flipper-PeerTalk'], :configuration => 'Debug' 25 | pod 'Flipper-RSocket', versions['Flipper-RSocket'], :configuration => 'Debug' 26 | pod 'FlipperKit/Core', versions['Flipper'], :configuration => 'Debug' 27 | pod 'FlipperKit/CppBridge', versions['Flipper'], :configuration => 'Debug' 28 | pod 'FlipperKit/FBCxxFollyDynamicConvert', versions['Flipper'], :configuration => 'Debug' 29 | pod 'FlipperKit/FBDefines', versions['Flipper'], :configuration => 'Debug' 30 | pod 'FlipperKit/FKPortForwarding', versions['Flipper'], :configuration => 'Debug' 31 | pod 'FlipperKit/FlipperKitHighlightOverlay', versions['Flipper'], :configuration => 'Debug' 32 | pod 'FlipperKit/FlipperKitLayoutTextSearchable', versions['Flipper'], :configuration => 'Debug' 33 | pod 'FlipperKit/FlipperKitNetworkPlugin', versions['Flipper'], :configuration => 'Debug' 34 | end 35 | 36 | # Post Install processing for Flipper 37 | def flipper_post_install(installer) 38 | installer.pods_project.targets.each do |target| 39 | if target.name == 'YogaKit' 40 | target.build_configurations.each do |config| 41 | config.build_settings['SWIFT_VERSION'] = '4.1' 42 | end 43 | end 44 | end 45 | end 46 | 47 | target 'TextInputEffects' do 48 | # Pods for TextInputEffects 49 | pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector" 50 | pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec" 51 | pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired" 52 | pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety" 53 | pod 'React', :path => '../node_modules/react-native/' 54 | pod 'React-Core', :path => '../node_modules/react-native/' 55 | pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules' 56 | pod 'React-Core/DevSupport', :path => '../node_modules/react-native/' 57 | pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS' 58 | pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation' 59 | pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob' 60 | pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image' 61 | pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS' 62 | pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network' 63 | pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings' 64 | pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text' 65 | pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration' 66 | pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/' 67 | 68 | pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact' 69 | pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi' 70 | pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor' 71 | pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector' 72 | pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon" 73 | pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon" 74 | pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga', :modular_headers => true 75 | 76 | pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' 77 | pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' 78 | pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' 79 | 80 | target 'TextInputEffectsTests' do 81 | inherit! :complete 82 | # Pods for testing 83 | end 84 | 85 | use_native_modules! 86 | 87 | # Enables Flipper. 88 | # 89 | # Note that if you have use_frameworks! enabled, Flipper will not work and 90 | # you should disable these next few lines. 91 | add_flipper_pods! 92 | post_install do |installer| 93 | flipper_post_install(installer) 94 | end 95 | end 96 | 97 | target 'TextInputEffects-tvOS' do 98 | # Pods for TextInputEffects-tvOS 99 | 100 | target 'TextInputEffects-tvOSTests' do 101 | inherit! :search_paths 102 | # Pods for testing 103 | end 104 | end -------------------------------------------------------------------------------- /Example/ios/Podfile.lock: -------------------------------------------------------------------------------- 1 | PODS: 2 | - boost-for-react-native (1.63.0) 3 | - CocoaAsyncSocket (7.6.4) 4 | - CocoaLibEvent (1.0.0) 5 | - DoubleConversion (1.1.6) 6 | - FBLazyVector (0.62.2) 7 | - FBReactNativeSpec (0.62.2): 8 | - Folly (= 2018.10.22.00) 9 | - RCTRequired (= 0.62.2) 10 | - RCTTypeSafety (= 0.62.2) 11 | - React-Core (= 0.62.2) 12 | - React-jsi (= 0.62.2) 13 | - ReactCommon/turbomodule/core (= 0.62.2) 14 | - Flipper (0.33.1): 15 | - Flipper-Folly (~> 2.1) 16 | - Flipper-RSocket (~> 1.0) 17 | - Flipper-DoubleConversion (1.1.7) 18 | - Flipper-Folly (2.1.1): 19 | - boost-for-react-native 20 | - CocoaLibEvent (~> 1.0) 21 | - Flipper-DoubleConversion 22 | - Flipper-Glog 23 | - OpenSSL-Universal (= 1.0.2.19) 24 | - Flipper-Glog (0.3.6) 25 | - Flipper-PeerTalk (0.0.4) 26 | - Flipper-RSocket (1.0.0): 27 | - Flipper-Folly (~> 2.0) 28 | - FlipperKit (0.33.1): 29 | - FlipperKit/Core (= 0.33.1) 30 | - FlipperKit/Core (0.33.1): 31 | - Flipper (~> 0.33.1) 32 | - FlipperKit/CppBridge 33 | - FlipperKit/FBCxxFollyDynamicConvert 34 | - FlipperKit/FBDefines 35 | - FlipperKit/FKPortForwarding 36 | - FlipperKit/CppBridge (0.33.1): 37 | - Flipper (~> 0.33.1) 38 | - FlipperKit/FBCxxFollyDynamicConvert (0.33.1): 39 | - Flipper-Folly (~> 2.1) 40 | - FlipperKit/FBDefines (0.33.1) 41 | - FlipperKit/FKPortForwarding (0.33.1): 42 | - CocoaAsyncSocket (~> 7.6) 43 | - Flipper-PeerTalk (~> 0.0.4) 44 | - FlipperKit/FlipperKitHighlightOverlay (0.33.1) 45 | - FlipperKit/FlipperKitLayoutPlugin (0.33.1): 46 | - FlipperKit/Core 47 | - FlipperKit/FlipperKitHighlightOverlay 48 | - FlipperKit/FlipperKitLayoutTextSearchable 49 | - YogaKit (~> 1.18) 50 | - FlipperKit/FlipperKitLayoutTextSearchable (0.33.1) 51 | - FlipperKit/FlipperKitNetworkPlugin (0.33.1): 52 | - FlipperKit/Core 53 | - FlipperKit/FlipperKitReactPlugin (0.33.1): 54 | - FlipperKit/Core 55 | - FlipperKit/FlipperKitUserDefaultsPlugin (0.33.1): 56 | - FlipperKit/Core 57 | - FlipperKit/SKIOSNetworkPlugin (0.33.1): 58 | - FlipperKit/Core 59 | - FlipperKit/FlipperKitNetworkPlugin 60 | - Folly (2018.10.22.00): 61 | - boost-for-react-native 62 | - DoubleConversion 63 | - Folly/Default (= 2018.10.22.00) 64 | - glog 65 | - Folly/Default (2018.10.22.00): 66 | - boost-for-react-native 67 | - DoubleConversion 68 | - glog 69 | - glog (0.3.5) 70 | - OpenSSL-Universal (1.0.2.19): 71 | - OpenSSL-Universal/Static (= 1.0.2.19) 72 | - OpenSSL-Universal/Static (1.0.2.19) 73 | - RCTRequired (0.62.2) 74 | - RCTTypeSafety (0.62.2): 75 | - FBLazyVector (= 0.62.2) 76 | - Folly (= 2018.10.22.00) 77 | - RCTRequired (= 0.62.2) 78 | - React-Core (= 0.62.2) 79 | - React (0.62.2): 80 | - React-Core (= 0.62.2) 81 | - React-Core/DevSupport (= 0.62.2) 82 | - React-Core/RCTWebSocket (= 0.62.2) 83 | - React-RCTActionSheet (= 0.62.2) 84 | - React-RCTAnimation (= 0.62.2) 85 | - React-RCTBlob (= 0.62.2) 86 | - React-RCTImage (= 0.62.2) 87 | - React-RCTLinking (= 0.62.2) 88 | - React-RCTNetwork (= 0.62.2) 89 | - React-RCTSettings (= 0.62.2) 90 | - React-RCTText (= 0.62.2) 91 | - React-RCTVibration (= 0.62.2) 92 | - React-Core (0.62.2): 93 | - Folly (= 2018.10.22.00) 94 | - glog 95 | - React-Core/Default (= 0.62.2) 96 | - React-cxxreact (= 0.62.2) 97 | - React-jsi (= 0.62.2) 98 | - React-jsiexecutor (= 0.62.2) 99 | - Yoga 100 | - React-Core/CoreModulesHeaders (0.62.2): 101 | - Folly (= 2018.10.22.00) 102 | - glog 103 | - React-Core/Default 104 | - React-cxxreact (= 0.62.2) 105 | - React-jsi (= 0.62.2) 106 | - React-jsiexecutor (= 0.62.2) 107 | - Yoga 108 | - React-Core/Default (0.62.2): 109 | - Folly (= 2018.10.22.00) 110 | - glog 111 | - React-cxxreact (= 0.62.2) 112 | - React-jsi (= 0.62.2) 113 | - React-jsiexecutor (= 0.62.2) 114 | - Yoga 115 | - React-Core/DevSupport (0.62.2): 116 | - Folly (= 2018.10.22.00) 117 | - glog 118 | - React-Core/Default (= 0.62.2) 119 | - React-Core/RCTWebSocket (= 0.62.2) 120 | - React-cxxreact (= 0.62.2) 121 | - React-jsi (= 0.62.2) 122 | - React-jsiexecutor (= 0.62.2) 123 | - React-jsinspector (= 0.62.2) 124 | - Yoga 125 | - React-Core/RCTActionSheetHeaders (0.62.2): 126 | - Folly (= 2018.10.22.00) 127 | - glog 128 | - React-Core/Default 129 | - React-cxxreact (= 0.62.2) 130 | - React-jsi (= 0.62.2) 131 | - React-jsiexecutor (= 0.62.2) 132 | - Yoga 133 | - React-Core/RCTAnimationHeaders (0.62.2): 134 | - Folly (= 2018.10.22.00) 135 | - glog 136 | - React-Core/Default 137 | - React-cxxreact (= 0.62.2) 138 | - React-jsi (= 0.62.2) 139 | - React-jsiexecutor (= 0.62.2) 140 | - Yoga 141 | - React-Core/RCTBlobHeaders (0.62.2): 142 | - Folly (= 2018.10.22.00) 143 | - glog 144 | - React-Core/Default 145 | - React-cxxreact (= 0.62.2) 146 | - React-jsi (= 0.62.2) 147 | - React-jsiexecutor (= 0.62.2) 148 | - Yoga 149 | - React-Core/RCTImageHeaders (0.62.2): 150 | - Folly (= 2018.10.22.00) 151 | - glog 152 | - React-Core/Default 153 | - React-cxxreact (= 0.62.2) 154 | - React-jsi (= 0.62.2) 155 | - React-jsiexecutor (= 0.62.2) 156 | - Yoga 157 | - React-Core/RCTLinkingHeaders (0.62.2): 158 | - Folly (= 2018.10.22.00) 159 | - glog 160 | - React-Core/Default 161 | - React-cxxreact (= 0.62.2) 162 | - React-jsi (= 0.62.2) 163 | - React-jsiexecutor (= 0.62.2) 164 | - Yoga 165 | - React-Core/RCTNetworkHeaders (0.62.2): 166 | - Folly (= 2018.10.22.00) 167 | - glog 168 | - React-Core/Default 169 | - React-cxxreact (= 0.62.2) 170 | - React-jsi (= 0.62.2) 171 | - React-jsiexecutor (= 0.62.2) 172 | - Yoga 173 | - React-Core/RCTSettingsHeaders (0.62.2): 174 | - Folly (= 2018.10.22.00) 175 | - glog 176 | - React-Core/Default 177 | - React-cxxreact (= 0.62.2) 178 | - React-jsi (= 0.62.2) 179 | - React-jsiexecutor (= 0.62.2) 180 | - Yoga 181 | - React-Core/RCTTextHeaders (0.62.2): 182 | - Folly (= 2018.10.22.00) 183 | - glog 184 | - React-Core/Default 185 | - React-cxxreact (= 0.62.2) 186 | - React-jsi (= 0.62.2) 187 | - React-jsiexecutor (= 0.62.2) 188 | - Yoga 189 | - React-Core/RCTVibrationHeaders (0.62.2): 190 | - Folly (= 2018.10.22.00) 191 | - glog 192 | - React-Core/Default 193 | - React-cxxreact (= 0.62.2) 194 | - React-jsi (= 0.62.2) 195 | - React-jsiexecutor (= 0.62.2) 196 | - Yoga 197 | - React-Core/RCTWebSocket (0.62.2): 198 | - Folly (= 2018.10.22.00) 199 | - glog 200 | - React-Core/Default (= 0.62.2) 201 | - React-cxxreact (= 0.62.2) 202 | - React-jsi (= 0.62.2) 203 | - React-jsiexecutor (= 0.62.2) 204 | - Yoga 205 | - React-CoreModules (0.62.2): 206 | - FBReactNativeSpec (= 0.62.2) 207 | - Folly (= 2018.10.22.00) 208 | - RCTTypeSafety (= 0.62.2) 209 | - React-Core/CoreModulesHeaders (= 0.62.2) 210 | - React-RCTImage (= 0.62.2) 211 | - ReactCommon/turbomodule/core (= 0.62.2) 212 | - React-cxxreact (0.62.2): 213 | - boost-for-react-native (= 1.63.0) 214 | - DoubleConversion 215 | - Folly (= 2018.10.22.00) 216 | - glog 217 | - React-jsinspector (= 0.62.2) 218 | - React-jsi (0.62.2): 219 | - boost-for-react-native (= 1.63.0) 220 | - DoubleConversion 221 | - Folly (= 2018.10.22.00) 222 | - glog 223 | - React-jsi/Default (= 0.62.2) 224 | - React-jsi/Default (0.62.2): 225 | - boost-for-react-native (= 1.63.0) 226 | - DoubleConversion 227 | - Folly (= 2018.10.22.00) 228 | - glog 229 | - React-jsiexecutor (0.62.2): 230 | - DoubleConversion 231 | - Folly (= 2018.10.22.00) 232 | - glog 233 | - React-cxxreact (= 0.62.2) 234 | - React-jsi (= 0.62.2) 235 | - React-jsinspector (0.62.2) 236 | - React-RCTActionSheet (0.62.2): 237 | - React-Core/RCTActionSheetHeaders (= 0.62.2) 238 | - React-RCTAnimation (0.62.2): 239 | - FBReactNativeSpec (= 0.62.2) 240 | - Folly (= 2018.10.22.00) 241 | - RCTTypeSafety (= 0.62.2) 242 | - React-Core/RCTAnimationHeaders (= 0.62.2) 243 | - ReactCommon/turbomodule/core (= 0.62.2) 244 | - React-RCTBlob (0.62.2): 245 | - FBReactNativeSpec (= 0.62.2) 246 | - Folly (= 2018.10.22.00) 247 | - React-Core/RCTBlobHeaders (= 0.62.2) 248 | - React-Core/RCTWebSocket (= 0.62.2) 249 | - React-jsi (= 0.62.2) 250 | - React-RCTNetwork (= 0.62.2) 251 | - ReactCommon/turbomodule/core (= 0.62.2) 252 | - React-RCTImage (0.62.2): 253 | - FBReactNativeSpec (= 0.62.2) 254 | - Folly (= 2018.10.22.00) 255 | - RCTTypeSafety (= 0.62.2) 256 | - React-Core/RCTImageHeaders (= 0.62.2) 257 | - React-RCTNetwork (= 0.62.2) 258 | - ReactCommon/turbomodule/core (= 0.62.2) 259 | - React-RCTLinking (0.62.2): 260 | - FBReactNativeSpec (= 0.62.2) 261 | - React-Core/RCTLinkingHeaders (= 0.62.2) 262 | - ReactCommon/turbomodule/core (= 0.62.2) 263 | - React-RCTNetwork (0.62.2): 264 | - FBReactNativeSpec (= 0.62.2) 265 | - Folly (= 2018.10.22.00) 266 | - RCTTypeSafety (= 0.62.2) 267 | - React-Core/RCTNetworkHeaders (= 0.62.2) 268 | - ReactCommon/turbomodule/core (= 0.62.2) 269 | - React-RCTSettings (0.62.2): 270 | - FBReactNativeSpec (= 0.62.2) 271 | - Folly (= 2018.10.22.00) 272 | - RCTTypeSafety (= 0.62.2) 273 | - React-Core/RCTSettingsHeaders (= 0.62.2) 274 | - ReactCommon/turbomodule/core (= 0.62.2) 275 | - React-RCTText (0.62.2): 276 | - React-Core/RCTTextHeaders (= 0.62.2) 277 | - React-RCTVibration (0.62.2): 278 | - FBReactNativeSpec (= 0.62.2) 279 | - Folly (= 2018.10.22.00) 280 | - React-Core/RCTVibrationHeaders (= 0.62.2) 281 | - ReactCommon/turbomodule/core (= 0.62.2) 282 | - ReactCommon/callinvoker (0.62.2): 283 | - DoubleConversion 284 | - Folly (= 2018.10.22.00) 285 | - glog 286 | - React-cxxreact (= 0.62.2) 287 | - ReactCommon/turbomodule/core (0.62.2): 288 | - DoubleConversion 289 | - Folly (= 2018.10.22.00) 290 | - glog 291 | - React-Core (= 0.62.2) 292 | - React-cxxreact (= 0.62.2) 293 | - React-jsi (= 0.62.2) 294 | - ReactCommon/callinvoker (= 0.62.2) 295 | - RNVectorIcons (6.6.0): 296 | - React 297 | - Yoga (1.14.0) 298 | - YogaKit (1.18.1): 299 | - Yoga (~> 1.14) 300 | 301 | DEPENDENCIES: 302 | - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) 303 | - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) 304 | - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`) 305 | - Flipper (~> 0.33.1) 306 | - Flipper-DoubleConversion (= 1.1.7) 307 | - Flipper-Folly (~> 2.1) 308 | - Flipper-Glog (= 0.3.6) 309 | - Flipper-PeerTalk (~> 0.0.4) 310 | - Flipper-RSocket (~> 1.0) 311 | - FlipperKit (~> 0.33.1) 312 | - FlipperKit/Core (~> 0.33.1) 313 | - FlipperKit/CppBridge (~> 0.33.1) 314 | - FlipperKit/FBCxxFollyDynamicConvert (~> 0.33.1) 315 | - FlipperKit/FBDefines (~> 0.33.1) 316 | - FlipperKit/FKPortForwarding (~> 0.33.1) 317 | - FlipperKit/FlipperKitHighlightOverlay (~> 0.33.1) 318 | - FlipperKit/FlipperKitLayoutPlugin (~> 0.33.1) 319 | - FlipperKit/FlipperKitLayoutTextSearchable (~> 0.33.1) 320 | - FlipperKit/FlipperKitNetworkPlugin (~> 0.33.1) 321 | - FlipperKit/FlipperKitReactPlugin (~> 0.33.1) 322 | - FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.33.1) 323 | - FlipperKit/SKIOSNetworkPlugin (~> 0.33.1) 324 | - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`) 325 | - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`) 326 | - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`) 327 | - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`) 328 | - React (from `../node_modules/react-native/`) 329 | - React-Core (from `../node_modules/react-native/`) 330 | - React-Core/DevSupport (from `../node_modules/react-native/`) 331 | - React-Core/RCTWebSocket (from `../node_modules/react-native/`) 332 | - React-CoreModules (from `../node_modules/react-native/React/CoreModules`) 333 | - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`) 334 | - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`) 335 | - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) 336 | - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) 337 | - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) 338 | - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) 339 | - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) 340 | - React-RCTImage (from `../node_modules/react-native/Libraries/Image`) 341 | - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`) 342 | - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`) 343 | - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`) 344 | - React-RCTText (from `../node_modules/react-native/Libraries/Text`) 345 | - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) 346 | - ReactCommon/callinvoker (from `../node_modules/react-native/ReactCommon`) 347 | - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) 348 | - RNVectorIcons (from `../node_modules/react-native-vector-icons`) 349 | - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) 350 | 351 | SPEC REPOS: 352 | trunk: 353 | - boost-for-react-native 354 | - CocoaAsyncSocket 355 | - CocoaLibEvent 356 | - Flipper 357 | - Flipper-DoubleConversion 358 | - Flipper-Folly 359 | - Flipper-Glog 360 | - Flipper-PeerTalk 361 | - Flipper-RSocket 362 | - FlipperKit 363 | - OpenSSL-Universal 364 | - YogaKit 365 | 366 | EXTERNAL SOURCES: 367 | DoubleConversion: 368 | :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" 369 | FBLazyVector: 370 | :path: "../node_modules/react-native/Libraries/FBLazyVector" 371 | FBReactNativeSpec: 372 | :path: "../node_modules/react-native/Libraries/FBReactNativeSpec" 373 | Folly: 374 | :podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec" 375 | glog: 376 | :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec" 377 | RCTRequired: 378 | :path: "../node_modules/react-native/Libraries/RCTRequired" 379 | RCTTypeSafety: 380 | :path: "../node_modules/react-native/Libraries/TypeSafety" 381 | React: 382 | :path: "../node_modules/react-native/" 383 | React-Core: 384 | :path: "../node_modules/react-native/" 385 | React-CoreModules: 386 | :path: "../node_modules/react-native/React/CoreModules" 387 | React-cxxreact: 388 | :path: "../node_modules/react-native/ReactCommon/cxxreact" 389 | React-jsi: 390 | :path: "../node_modules/react-native/ReactCommon/jsi" 391 | React-jsiexecutor: 392 | :path: "../node_modules/react-native/ReactCommon/jsiexecutor" 393 | React-jsinspector: 394 | :path: "../node_modules/react-native/ReactCommon/jsinspector" 395 | React-RCTActionSheet: 396 | :path: "../node_modules/react-native/Libraries/ActionSheetIOS" 397 | React-RCTAnimation: 398 | :path: "../node_modules/react-native/Libraries/NativeAnimation" 399 | React-RCTBlob: 400 | :path: "../node_modules/react-native/Libraries/Blob" 401 | React-RCTImage: 402 | :path: "../node_modules/react-native/Libraries/Image" 403 | React-RCTLinking: 404 | :path: "../node_modules/react-native/Libraries/LinkingIOS" 405 | React-RCTNetwork: 406 | :path: "../node_modules/react-native/Libraries/Network" 407 | React-RCTSettings: 408 | :path: "../node_modules/react-native/Libraries/Settings" 409 | React-RCTText: 410 | :path: "../node_modules/react-native/Libraries/Text" 411 | React-RCTVibration: 412 | :path: "../node_modules/react-native/Libraries/Vibration" 413 | ReactCommon: 414 | :path: "../node_modules/react-native/ReactCommon" 415 | RNVectorIcons: 416 | :path: "../node_modules/react-native-vector-icons" 417 | Yoga: 418 | :path: "../node_modules/react-native/ReactCommon/yoga" 419 | 420 | SPEC CHECKSUMS: 421 | boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c 422 | CocoaAsyncSocket: 694058e7c0ed05a9e217d1b3c7ded962f4180845 423 | CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f 424 | DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2 425 | FBLazyVector: 4aab18c93cd9546e4bfed752b4084585eca8b245 426 | FBReactNativeSpec: 5465d51ccfeecb7faa12f9ae0024f2044ce4044e 427 | Flipper: 6c1f484f9a88d30ab3e272800d53688439e50f69 428 | Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41 429 | Flipper-Folly: 2de3d03e0acc7064d5e4ed9f730e2f217486f162 430 | Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6 431 | Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9 432 | Flipper-RSocket: 1260a31c05c238eabfa9bb8a64e3983049048371 433 | FlipperKit: 6dc9b8f4ef60d9e5ded7f0264db299c91f18832e 434 | Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51 435 | glog: 1f3da668190260b06b429bb211bfbee5cd790c28 436 | OpenSSL-Universal: 8b48cc0d10c1b2923617dfe5c178aa9ed2689355 437 | RCTRequired: cec6a34b3ac8a9915c37e7e4ad3aa74726ce4035 438 | RCTTypeSafety: 93006131180074cffa227a1075802c89a49dd4ce 439 | React: 29a8b1a02bd764fb7644ef04019270849b9a7ac3 440 | React-Core: b12bffb3f567fdf99510acb716ef1abd426e0e05 441 | React-CoreModules: 4a9b87bbe669d6c3173c0132c3328e3b000783d0 442 | React-cxxreact: e65f9c2ba0ac5be946f53548c1aaaee5873a8103 443 | React-jsi: b6dc94a6a12ff98e8877287a0b7620d365201161 444 | React-jsiexecutor: 1540d1c01bb493ae3124ed83351b1b6a155db7da 445 | React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493 446 | React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c 447 | React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0 448 | React-RCTBlob: a332773f0ebc413a0ce85942a55b064471587a71 449 | React-RCTImage: e70be9b9c74fe4e42d0005f42cace7981c994ac3 450 | React-RCTLinking: c1b9739a88d56ecbec23b7f63650e44672ab2ad2 451 | React-RCTNetwork: 73138b6f45e5a2768ad93f3d57873c2a18d14b44 452 | React-RCTSettings: 6e3738a87e21b39a8cb08d627e68c44acf1e325a 453 | React-RCTText: fae545b10cfdb3d247c36c56f61a94cfd6dba41d 454 | React-RCTVibration: 4356114dbcba4ce66991096e51a66e61eda51256 455 | ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3 456 | RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4 457 | Yoga: 3ebccbdd559724312790e7742142d062476b698e 458 | YogaKit: f782866e155069a2cca2517aafea43200b01fd5a 459 | 460 | PODFILE CHECKSUM: b9ad8d65f1858b6f2d68dd6621a5054725b3ab23 461 | 462 | COCOAPODS: 1.8.4 463 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffects-tvOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | NSAppTransportSecurity 26 | 27 | NSExceptionDomains 28 | 29 | localhost 30 | 31 | NSExceptionAllowsInsecureHTTPLoads 32 | 33 | 34 | 35 | 36 | NSLocationWhenInUseUsageDescription 37 | 38 | UILaunchStoryboardName 39 | LaunchScreen 40 | UIRequiredDeviceCapabilities 41 | 42 | armv7 43 | 44 | UISupportedInterfaceOrientations 45 | 46 | UIInterfaceOrientationPortrait 47 | UIInterfaceOrientationLandscapeLeft 48 | UIInterfaceOrientationLandscapeRight 49 | 50 | UIViewControllerBasedStatusBarAppearance 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffects-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffects.xcodeproj/xcshareddata/xcschemes/TextInputEffects-tvOS.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffects.xcodeproj/xcshareddata/xcschemes/TextInputEffects.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffects.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffects.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffects/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffects/AppDelegate.m: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | 7 | #if DEBUG 8 | #import 9 | #import 10 | #import 11 | #import 12 | #import 13 | #import 14 | 15 | static void InitializeFlipper(UIApplication *application) { 16 | FlipperClient *client = [FlipperClient sharedClient]; 17 | SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults]; 18 | [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]]; 19 | [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; 20 | [client addPlugin:[FlipperKitReactPlugin new]]; 21 | [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; 22 | [client start]; 23 | } 24 | #endif 25 | 26 | @implementation AppDelegate 27 | 28 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 29 | { 30 | #if DEBUG 31 | InitializeFlipper(application); 32 | #endif 33 | 34 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 35 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 36 | moduleName:@"TextInputEffects" 37 | initialProperties:nil]; 38 | 39 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 40 | 41 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 42 | UIViewController *rootViewController = [UIViewController new]; 43 | rootViewController.view = rootView; 44 | self.window.rootViewController = rootViewController; 45 | [self.window makeKeyAndVisible]; 46 | return YES; 47 | } 48 | 49 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 50 | { 51 | #if DEBUG 52 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 53 | #else 54 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 55 | #endif 56 | } 57 | 58 | @end 59 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffects/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffects/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffects/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffects/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UIAppFonts 6 | 7 | FontAwesome.ttf 8 | 9 | CFBundleDevelopmentRegion 10 | en 11 | CFBundleDisplayName 12 | TextInputEffects 13 | CFBundleExecutable 14 | $(EXECUTABLE_NAME) 15 | CFBundleIdentifier 16 | $(PRODUCT_BUNDLE_IDENTIFIER) 17 | CFBundleInfoDictionaryVersion 18 | 6.0 19 | CFBundleName 20 | $(PRODUCT_NAME) 21 | CFBundlePackageType 22 | APPL 23 | CFBundleShortVersionString 24 | 1.0 25 | CFBundleSignature 26 | ???? 27 | CFBundleVersion 28 | 1 29 | LSRequiresIPhoneOS 30 | 31 | NSAppTransportSecurity 32 | 33 | NSAllowsArbitraryLoads 34 | 35 | NSExceptionDomains 36 | 37 | localhost 38 | 39 | NSExceptionAllowsInsecureHTTPLoads 40 | 41 | 42 | 43 | 44 | NSLocationWhenInUseUsageDescription 45 | 46 | UILaunchStoryboardName 47 | LaunchScreen 48 | UIRequiredDeviceCapabilities 49 | 50 | armv7 51 | 52 | UISupportedInterfaceOrientations 53 | 54 | UIInterfaceOrientationPortrait 55 | UIInterfaceOrientationLandscapeLeft 56 | UIInterfaceOrientationLandscapeRight 57 | 58 | UIViewControllerBasedStatusBarAppearance 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffects/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char * argv[]) { 6 | @autoreleasepool { 7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffectsTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /Example/ios/TextInputEffectsTests/TextInputEffectsTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface TextInputEffectsTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation TextInputEffectsTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 38 | if (level >= RCTLogLevelError) { 39 | redboxError = message; 40 | } 41 | }); 42 | #endif 43 | 44 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 45 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 46 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | 48 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 49 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 50 | return YES; 51 | } 52 | return NO; 53 | }]; 54 | } 55 | 56 | #ifdef DEBUG 57 | RCTSetLogFunction(RCTDefaultLogFunction); 58 | #endif 59 | 60 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 61 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 62 | } 63 | 64 | 65 | @end 66 | -------------------------------------------------------------------------------- /Example/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: false, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /Example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "TextInputEffects", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "start": "react-native start", 9 | "test": "jest", 10 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx" 11 | }, 12 | "dependencies": { 13 | "@types/react-native-vector-icons": "^6.4.5", 14 | "react": "16.11.0", 15 | "react-native": "0.62.2", 16 | "react-native-textinput-effects": "file:../", 17 | "react-native-vector-icons": "^6.6.0" 18 | }, 19 | "devDependencies": { 20 | "@babel/core": "^7.6.2", 21 | "@babel/runtime": "^7.6.2", 22 | "@react-native-community/eslint-config": "^1.0.0", 23 | "@types/jest": "^24.0.24", 24 | "@types/react-native": "^0.62.0", 25 | "@types/react-test-renderer": "16.9.2", 26 | "@typescript-eslint/eslint-plugin": "^2.27.0", 27 | "@typescript-eslint/parser": "^2.27.0", 28 | "babel-jest": "^24.9.0", 29 | "eslint": "^6.5.1", 30 | "jest": "^24.9.0", 31 | "metro-react-native-babel-preset": "^0.58.0", 32 | "prettier": "^2.0.4", 33 | "react-test-renderer": "16.11.0", 34 | "typescript": "^3.8.3" 35 | }, 36 | "jest": { 37 | "preset": "react-native", 38 | "moduleFileExtensions": [ 39 | "ts", 40 | "tsx", 41 | "js", 42 | "jsx", 43 | "json", 44 | "node" 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /Example/tsconfig.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "compilerOptions": { 4 | /* Basic Options */ 5 | "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 6 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 7 | "lib": ["es6"], /* Specify library files to be included in the compilation. */ 8 | "allowJs": true, /* Allow javascript files to be compiled. */ 9 | // "checkJs": true, /* Report errors in .js files. */ 10 | "jsx": "react-native", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 11 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 12 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 13 | // "outFile": "./", /* Concatenate and emit output to single file. */ 14 | // "outDir": "./", /* Redirect output structure to the directory. */ 15 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 16 | // "removeComments": true, /* Do not emit comments to output. */ 17 | "noEmit": true, /* Do not emit outputs. */ 18 | // "incremental": true, /* Enable incremental compilation */ 19 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 20 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 21 | "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 22 | 23 | /* Strict Type-Checking Options */ 24 | "strict": true, /* Enable all strict type-checking options. */ 25 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 26 | // "strictNullChecks": true, /* Enable strict null checks. */ 27 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 28 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 29 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 30 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 31 | 32 | /* Additional Checks */ 33 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 34 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 35 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 36 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 37 | 38 | /* Module Resolution Options */ 39 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 40 | "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 41 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 42 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 43 | // "typeRoots": [], /* List of folders to include type definitions from. */ 44 | // "types": [], /* Type declaration files to be included in compilation. */ 45 | "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 46 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 47 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 48 | 49 | /* Source Map Options */ 50 | // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 51 | // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ 52 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 53 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 54 | 55 | /* Experimental Options */ 56 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 57 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 58 | }, 59 | "exclude": [ 60 | "node_modules", "babel.config.js", "metro.config.js", "jest.config.js" 61 | ] 62 | } 63 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Halil Bilir 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Textinput Effects 2 | 3 | I've come across with [those beautiful](http://tympanus.net/Development/TextInputEffects) text inputs created and [blogged](http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects) by **Codrops** and wanted to port them to react-native. Some of those text fields are now ready to use in iOS and android thanks to react-native. 4 | 5 | There is also a native iOS library called [TextFieldEffects](https://github.com/raulriera/TextFieldEffects) which has built some of them in Swift. 6 | 7 | ![](screenshots/full.gif) 8 | 9 | ## Blog Post 10 | 11 | I've recently written a blog post about [Creating an Animated TextField with React Native](https://bilir.me/blog/creating-an-animated-textfield-with-react-native). While it isn't directly related to this library, I think you might still find it useful to understand the basics of creating an animated text input with `React Native Animated` library. 12 | 13 | ## Installation 14 | 15 | The latest version of this project needs **react-native >= 0.55(March 2018 release)** due to **createRef** usage. Go with the latest version: 16 | 17 | `$ npm install react-native-textinput-effects --save` 18 | 19 | You can stick with version 0.4 if you have an older react-native version: 20 | 21 | `$ npm install react-native-textinput-effects@0.4.2 --save` 22 | 23 | You also need to install [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) if you'd like to use a TextInputEffect component with an icon. Please check out [Installation section](https://github.com/oblador/react-native-vector-icons#installation) on that project. 24 | 25 | ## How to use 26 | 27 | ### Common Props 28 | 29 | | Prop | Type | Description | 30 | |---|---|---| 31 | |**`label`**|String|Displayed as placeholder string of the input.| 32 | |**`style`**|View Style Object|Applied to the root container of the input.| 33 | |**`labelStyle`**|View Style Object|Applied to the container of the label view.| 34 | |**`inputStyle`**|Text Style Object|Applied to the TextInput component.| 35 | |**`value`**|String|This value will be applied to the TextInput and change it's state on every render. Use this prop if you want a [Controlled Component](https://facebook.github.io/react/docs/forms.html#controlled-components).| 36 | |**`defaultValue`**|String|If you want to initialize the component with a non-empty value, you can supply a defaultValue prop. This prop creates an [Uncontrolled Component](https://facebook.github.io/react/docs/forms.html#uncontrolled-components) and is only used during initial render.| 37 | 38 | You can also use default [TextInput Props](https://facebook.github.io/react-native/docs/textinput.html#props). They'll be passed into TextInput component. E.g., use `TextInput`'s `onChange` prop to be notified on text changes. 39 | ```js 40 | { this.setState({textValue: text}) } 42 | /> 43 | ``` 44 | 45 | ### Props for TextInputEffects with an Icon 46 | 47 | This component needs `Icon` component from `react-native-vector-icons` to operate with icons. You should import it before creating a TextInputEffects component. 48 | 49 | `import Icon from 'react-native-vector-icons/FontAwesome';` 50 | 51 | | Prop | Type | Description | 52 | |---|---|---| 53 | |**`iconClass`**|Object|The Icon component class you've imported from react-native-vector-icons.| 54 | |**`iconName`**|String|Name of the icon that is passed to Icon component.| 55 | |**`iconColor`**|String|Applied to the Icon component.| 56 | |**`iconSize`**|Number|Applied to the Icon component.| 57 | 58 | 59 | ## Example 60 | 61 | See [TextInputEffectsExample.js](Example/TextInputEffectsExample.js) file. 62 | 63 | Follow those steps to run the example: 64 | 65 | 1. Clone the repo `git clone https://github.com/halilb/react-native-textinput-effects && cd react-native-textinput-effects/Example` 66 | 2. Install dependencies `npm install`` 67 | 3. Follow [official instructions](https://facebook.github.io/react-native/docs/getting-started.html) to run the example project in a simulator or device. 68 | 69 | You can also check out the example library without any installation on [Appetize.io](https://appetize.io/app/uhgu1wc1htqfcf7bp812gevr2r?device=iphone6s&scale=75&orientation=portrait&osVersion=9.3)! 70 | 71 | ## Input Types 72 | 73 | ### Sae 74 | 75 | ![](screenshots/sae.gif) 76 | 77 | 78 | ```js 79 | import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; 80 | import { Sae } from 'react-native-textinput-effects'; 81 | 82 | const saeInput = ( 83 | 96 | ); 97 | ``` 98 | 99 | ### Fumi 100 | 101 | ![](screenshots/fumi.gif) 102 | 103 | 104 | ```js 105 | import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; 106 | import { Fumi } from 'react-native-textinput-effects'; 107 | 108 | const fumiInput = ( 109 | 118 | ); 119 | ``` 120 | ### Kohana 121 | 122 | ![](screenshots/kohana.gif) 123 | 124 | Kohana supports [Animated Native Driver](https://facebook.github.io/react-native/docs/animations.html#using-the-native-driver). You can use native driver by passing `useNativeDriver`. 125 | 126 | ```js 127 | import MaterialsIcon from 'react-native-vector-icons/MaterialIcons'; 128 | import { Kohana } from 'react-native-textinput-effects'; 129 | 130 | const kohanaInput = ( 131 | 144 | ); 145 | ``` 146 | 147 | ### Makiko 148 | 149 | ![](screenshots/makiko.gif) 150 | 151 | 152 | ```js 153 | import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; 154 | import { Makiko } from 'react-native-textinput-effects'; 155 | 156 | const makikoInput = ( 157 | 165 | ); 166 | ``` 167 | Note: Icon component expands and covers the input. So, the icon should not have any blank spaces for the animation experience. This is the limitation for Makiko. 168 | 169 | ### Isao 170 | 171 | ![](screenshots/isao.gif) 172 | 173 | 174 | ```js 175 | import { Isao } from 'react-native-textinput-effects'; 176 | 177 | const isaoInput = ( 178 | 189 | ); 190 | ``` 191 | 192 | ### Hoshi 193 | 194 | ![](screenshots/hoshi.gif) 195 | 196 | 197 | ```js 198 | import { Hoshi } from 'react-native-textinput-effects'; 199 | 200 | const hoshiInput = ( 201 | 212 | ); 213 | ``` 214 | 215 | ### Jiro 216 | 217 | ![](screenshots/jiro.gif) 218 | 219 | 220 | ```js 221 | import { Jiro } from 'react-native-textinput-effects'; 222 | 223 | const jiroInput = ( 224 | 231 | ); 232 | ``` 233 | 234 | ### Kaede 235 | 236 | ![](screenshots/kaede.gif) 237 | 238 | 239 | ```js 240 | import { Kaede } from 'react-native-textinput-effects'; 241 | 242 | const kaedeInput = ( 243 | 247 | ); 248 | ``` 249 | 250 | ### Akira 251 | 252 | ![](screenshots/akira.gif) 253 | 254 | 255 | ```js 256 | import { Akira } from 'react-native-textinput-effects'; 257 | 258 | const akiraInput = ( 259 | 267 | ); 268 | ``` 269 | 270 | ### Madoka 271 | 272 | ![](screenshots/madoka.gif) 273 | 274 | 275 | ```js 276 | import { Madoka } from 'react-native-textinput-effects'; 277 | 278 | const madokaInput = ( 279 | 288 | ); 289 | ``` 290 | 291 | ### Hideo 292 | 293 | ![](screenshots/hideo.gif) 294 | 295 | 296 | ```js 297 | import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; 298 | import { Hideo } from 'react-native-textinput-effects'; 299 | 300 | const hideoInput = ( 301 | 309 | ); 310 | ``` 311 | 312 | ## Licence 313 | [MIT](http://opensource.org/licenses/mit-license.html) 314 | -------------------------------------------------------------------------------- /lib/Akira.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Animated, 5 | Text, 6 | TextInput, 7 | TouchableWithoutFeedback, 8 | View, 9 | StyleSheet, 10 | } from 'react-native'; 11 | 12 | import BaseInput from './BaseInput'; 13 | 14 | export default class Akira extends BaseInput { 15 | static propTypes = { 16 | /* 17 | * this is applied as active border and label color 18 | */ 19 | borderColor: PropTypes.string, 20 | labelHeight: PropTypes.number, 21 | inputPadding: PropTypes.number, 22 | height: PropTypes.number, 23 | }; 24 | 25 | static defaultProps = { 26 | borderColor: '#7A7593', 27 | labelHeight: 24, 28 | inputPadding: 16, 29 | height: 48, 30 | animationDuration: 200, 31 | }; 32 | 33 | render() { 34 | const { 35 | label, 36 | style: containerStyle, 37 | height: inputHeight, 38 | labelHeight, 39 | inputPadding, 40 | inputStyle, 41 | labelStyle, 42 | borderColor, 43 | } = this.props; 44 | const { 45 | width, 46 | focusedAnim, 47 | value, 48 | } = this.state; 49 | 50 | return ( 51 | 52 | 53 | 67 | 68 | {label} 69 | 70 | 71 | 72 | 90 | {/* left border */} 91 | 104 | {/* top border */} 105 | 117 | {/* right border */} 118 | 131 | {/* bottom border */} 132 | 144 | 145 | ); 146 | } 147 | } 148 | 149 | const styles = StyleSheet.create({ 150 | label: { 151 | backgroundColor: 'transparent', 152 | fontSize: 14, 153 | fontWeight: 'bold', 154 | color: '#cc6055', 155 | textAlign: 'center', 156 | }, 157 | textInput: { 158 | padding: 0, 159 | color: 'black', 160 | fontSize: 18, 161 | textAlign: 'center', 162 | }, 163 | }); 164 | -------------------------------------------------------------------------------- /lib/BaseInput.js: -------------------------------------------------------------------------------- 1 | import { Component, createRef } from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | import { Animated, Text } from "react-native"; 5 | 6 | export default class BaseInput extends Component { 7 | static propTypes = { 8 | label: PropTypes.string, 9 | value: PropTypes.string, 10 | defaultValue: PropTypes.string, 11 | style: PropTypes.any, 12 | inputStyle: Text.propTypes?.style, 13 | labelStyle: Text.propTypes?.style, 14 | easing: PropTypes.func, 15 | animationDuration: PropTypes.number, 16 | useNativeDriver: PropTypes.bool, 17 | 18 | editable: PropTypes.bool, 19 | 20 | /* those are TextInput props which are overridden 21 | * so, i'm calling them manually 22 | */ 23 | onBlur: PropTypes.func, 24 | onFocus: PropTypes.func, 25 | onChange: PropTypes.func, 26 | }; 27 | 28 | constructor(props, context) { 29 | super(props, context); 30 | 31 | this.input = createRef(); 32 | this._onLayout = this._onLayout.bind(this); 33 | this._onChange = this._onChange.bind(this); 34 | this._onBlur = this._onBlur.bind(this); 35 | this._onFocus = this._onFocus.bind(this); 36 | this.focus = this.focus.bind(this); 37 | 38 | const value = props.value || props.defaultValue; 39 | 40 | this.state = { 41 | value, 42 | focusedAnim: new Animated.Value(value ? 1 : 0), 43 | width: null, 44 | }; 45 | } 46 | 47 | componentDidUpdate() { 48 | const newValue = this.props.value; 49 | if (this.props.hasOwnProperty("value") && newValue !== this.state.value) { 50 | this.setState({ 51 | value: newValue, 52 | }); 53 | 54 | // animate input if it's active state has changed with the new value 55 | // and input is not focused currently. 56 | const isFocused = this.inputRef().isFocused(); 57 | if (!isFocused) { 58 | const isActive = Boolean(newValue); 59 | if (isActive !== this.isActive) { 60 | this._toggle(isActive); 61 | } 62 | } 63 | } 64 | } 65 | 66 | _onLayout(event) { 67 | this.setState({ 68 | width: event.nativeEvent.layout.width, 69 | }); 70 | } 71 | 72 | _onChange(event) { 73 | this.setState({ 74 | value: event.nativeEvent.text, 75 | }); 76 | 77 | const onChange = this.props.onChange; 78 | if (onChange) { 79 | onChange(event); 80 | } 81 | } 82 | 83 | _onBlur(event) { 84 | if (!this.state.value) { 85 | this._toggle(false); 86 | } 87 | 88 | const onBlur = this.props.onBlur; 89 | if (onBlur) { 90 | onBlur(event); 91 | } 92 | } 93 | 94 | _onFocus(event) { 95 | this._toggle(true); 96 | 97 | const onFocus = this.props.onFocus; 98 | if (onFocus) { 99 | onFocus(event); 100 | } 101 | } 102 | 103 | _toggle(isActive) { 104 | const { animationDuration, easing, useNativeDriver } = this.props; 105 | this.isActive = isActive; 106 | Animated.timing(this.state.focusedAnim, { 107 | toValue: isActive ? 1 : 0, 108 | duration: animationDuration, 109 | easing, 110 | useNativeDriver: useNativeDriver || false, 111 | }).start(); 112 | } 113 | 114 | // public methods 115 | 116 | inputRef() { 117 | return this.input.current; 118 | } 119 | 120 | focus() { 121 | if (this.props.editable !== false) { 122 | this.inputRef().focus(); 123 | } 124 | } 125 | 126 | blur() { 127 | this.inputRef().blur(); 128 | } 129 | 130 | isFocused() { 131 | return this.inputRef().isFocused(); 132 | } 133 | 134 | clear() { 135 | this.inputRef().clear(); 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /lib/Fumi.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Animated, 5 | TextInput, 6 | TouchableWithoutFeedback, 7 | View, 8 | StyleSheet, 9 | } from 'react-native'; 10 | 11 | import BaseInput from './BaseInput'; 12 | 13 | export default class Fumi extends BaseInput { 14 | static propTypes = { 15 | /* 16 | * This is the icon component you are importing from react-native-vector-icons. 17 | * import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; 18 | * iconClass={FontAwesomeIcon} 19 | */ 20 | iconClass: PropTypes.func.isRequired, 21 | /* 22 | * Passed to react-native-vector-icons library as name prop 23 | */ 24 | iconName: PropTypes.string.isRequired, 25 | /* 26 | * Passed to react-native-vector-icons library as color prop. 27 | * Also used as textInput color. 28 | */ 29 | iconColor: PropTypes.string, 30 | /* 31 | * Passed to react-native-vector-icons library as size prop. 32 | */ 33 | iconSize: PropTypes.number, 34 | 35 | passiveIconColor: PropTypes.string, 36 | height: PropTypes.number, 37 | }; 38 | 39 | static defaultProps = { 40 | height: 48, 41 | iconColor: '#00aeef', 42 | iconSize: 20, 43 | iconWidth: 40, 44 | inputPadding: 16, 45 | passiveIconColor: '#a3a3a3', 46 | animationDuration: 300, 47 | }; 48 | 49 | render() { 50 | const { 51 | iconClass, 52 | iconColor, 53 | iconSize, 54 | passiveIconColor, 55 | iconName, 56 | label, 57 | style: containerStyle, 58 | inputStyle, 59 | height: inputHeight, 60 | inputPadding, 61 | iconWidth, 62 | labelStyle, 63 | } = this.props; 64 | const { focusedAnim, value } = this.state; 65 | const AnimatedIcon = Animated.createAnimatedComponent(iconClass); 66 | const ANIM_PATH = inputPadding + inputHeight; 67 | const NEGATIVE_ANIM_PATH = ANIM_PATH * -1; 68 | 69 | return ( 70 | 76 | 77 | 100 | 101 | 110 | 111 | 128 | 144 | {label} 145 | 146 | 147 | 148 | 165 | 166 | ); 167 | } 168 | } 169 | 170 | const styles = StyleSheet.create({ 171 | container: { 172 | overflow: 'hidden', 173 | paddingTop: 16, 174 | backgroundColor: 'white', 175 | }, 176 | label: { 177 | fontSize: 18, 178 | fontWeight: 'bold', 179 | }, 180 | textInput: { 181 | flex: 1, 182 | color: 'black', 183 | fontSize: 18, 184 | padding: 7, 185 | paddingLeft: 0, 186 | }, 187 | separator: { 188 | position: 'absolute', 189 | width: 1, 190 | backgroundColor: '#f0f0f0', 191 | top: 8, 192 | }, 193 | }); 194 | -------------------------------------------------------------------------------- /lib/Hideo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Animated, 5 | TextInput, 6 | TouchableWithoutFeedback, 7 | View, 8 | StyleSheet, 9 | } from 'react-native'; 10 | 11 | import BaseInput from './BaseInput'; 12 | 13 | export default class Hideo extends BaseInput { 14 | static propTypes = { 15 | /* 16 | * this is applied as background color of icon 17 | */ 18 | iconBackgroundColor: PropTypes.string, 19 | 20 | /* 21 | * This is the icon component you are importing from react-native-vector-icons. 22 | * import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; 23 | * iconClass={FontAwesomeIcon} 24 | */ 25 | iconClass: PropTypes.func.isRequired, 26 | /* 27 | * Passed to react-native-vector-icons library as name prop 28 | */ 29 | iconName: PropTypes.string.isRequired, 30 | /* 31 | * Passed to react-native-vector-icons library as color prop 32 | */ 33 | iconColor: PropTypes.string, 34 | /* 35 | * Passed to react-native-vector-icons library as size prop. 36 | */ 37 | iconSize: PropTypes.number, 38 | }; 39 | 40 | static defaultProps = { 41 | iconColor: 'white', 42 | iconSize: 25, 43 | iconBackgroundColor: '#899dda', 44 | height: 48, 45 | animationDuration: 200, 46 | }; 47 | 48 | render() { 49 | const { 50 | iconClass, 51 | iconColor, 52 | iconSize, 53 | iconName, 54 | iconBackgroundColor, 55 | style: containerStyle, 56 | inputStyle, 57 | height: inputHeight, 58 | } = this.props; 59 | const { 60 | focusedAnim, 61 | value, 62 | } = this.state; 63 | const AnimatedIcon = Animated.createAnimatedComponent(iconClass); 64 | 65 | return ( 66 | 70 | 71 | 83 | 93 | 94 | 95 | 105 | 106 | ); 107 | } 108 | } 109 | 110 | const styles = StyleSheet.create({ 111 | container: { 112 | flex: 1, 113 | flexDirection: 'row', 114 | }, 115 | textInput: { 116 | flex: 1, 117 | paddingHorizontal: 16, 118 | paddingVertical: 0, 119 | color: 'black', 120 | backgroundColor: 'white', 121 | fontSize: 18, 122 | }, 123 | }); 124 | -------------------------------------------------------------------------------- /lib/Hoshi.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Animated, 5 | Text, 6 | TextInput, 7 | TouchableWithoutFeedback, 8 | View, 9 | StyleSheet, 10 | } from 'react-native'; 11 | 12 | import BaseInput from './BaseInput'; 13 | 14 | export default class Hoshi extends BaseInput { 15 | static propTypes = { 16 | borderColor: PropTypes.string, 17 | /* 18 | * this is used to set backgroundColor of label mask. 19 | * this should be replaced if we can find a better way to mask label animation. 20 | */ 21 | maskColor: PropTypes.string, 22 | inputPadding: PropTypes.number, 23 | height: PropTypes.number, 24 | }; 25 | 26 | static defaultProps = { 27 | borderColor: 'red', 28 | inputPadding: 16, 29 | height: 48, 30 | borderHeight: 3, 31 | }; 32 | 33 | render() { 34 | const { 35 | label, 36 | style: containerStyle, 37 | inputStyle, 38 | labelStyle, 39 | maskColor, 40 | borderColor, 41 | borderHeight, 42 | inputPadding, 43 | height: inputHeight, 44 | } = this.props; 45 | const { width, focusedAnim, value } = this.state; 46 | const flatStyles = StyleSheet.flatten(containerStyle) || {}; 47 | const containerWidth = flatStyles.width || width; 48 | 49 | return ( 50 | 61 | 79 | 80 | 99 | 100 | {label} 101 | 102 | 103 | 104 | 110 | 123 | 124 | ); 125 | } 126 | } 127 | 128 | const styles = StyleSheet.create({ 129 | container: { 130 | borderBottomWidth: 2, 131 | borderBottomColor: '#b9c1ca', 132 | }, 133 | labelContainer: { 134 | position: 'absolute', 135 | }, 136 | label: { 137 | fontSize: 16, 138 | color: '#6a7989', 139 | }, 140 | textInput: { 141 | position: 'absolute', 142 | bottom: 2, 143 | padding: 0, 144 | color: '#6a7989', 145 | fontSize: 18, 146 | fontWeight: 'bold', 147 | }, 148 | labelMask: { 149 | height: 24, 150 | }, 151 | border: { 152 | position: 'absolute', 153 | bottom: 0, 154 | left: 0, 155 | right: 0, 156 | }, 157 | }); 158 | -------------------------------------------------------------------------------- /lib/Isao.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Animated, 5 | Easing, 6 | TextInput, 7 | TouchableWithoutFeedback, 8 | View, 9 | StyleSheet, 10 | } from 'react-native'; 11 | 12 | import BaseInput from './BaseInput'; 13 | 14 | export default class Isao extends BaseInput { 15 | static propTypes = { 16 | /* 17 | * this is applied as passive border and label color 18 | */ 19 | passiveColor: PropTypes.string, 20 | /* 21 | * this is applied as active border and label color 22 | */ 23 | activeColor: PropTypes.string, 24 | /* 25 | * active border height 26 | */ 27 | borderHeight: PropTypes.number, 28 | labelHeight: PropTypes.number, 29 | inputPadding: PropTypes.number, 30 | height: PropTypes.number, 31 | }; 32 | 33 | static defaultProps = { 34 | activeColor: 'red', 35 | passiveColor: 'white', 36 | height: 48, 37 | labelHeight: 24, 38 | inputPadding: 16, 39 | borderHeight: 8, 40 | easing: Easing.bezier(0.2, 1, 0.3, 1), 41 | }; 42 | 43 | render() { 44 | const { 45 | label, 46 | style: containerStyle, 47 | height: inputHeight, 48 | borderHeight, 49 | inputPadding, 50 | labelHeight, 51 | inputStyle, 52 | labelStyle, 53 | activeColor, 54 | passiveColor, 55 | } = this.props; 56 | const { 57 | width, 58 | focusedAnim, 59 | value, 60 | } = this.state; 61 | 62 | return ( 63 | 72 | 81 | 99 | 100 | 101 | 107 | {/* passive label */} 108 | 128 | {label} 129 | 130 | {/* active label */} 131 | 150 | {label} 151 | 152 | 153 | 154 | 168 | 169 | ); 170 | } 171 | } 172 | 173 | const styles = StyleSheet.create({ 174 | inputContainer: { 175 | borderBottomWidth: 2, 176 | }, 177 | label: { 178 | position: 'absolute', 179 | paddingTop: 4, 180 | backgroundColor: 'transparent', 181 | fontSize: 14, 182 | fontWeight: 'bold', 183 | }, 184 | textInput: { 185 | color: '#afb3b8', 186 | fontSize: 18, 187 | fontWeight: 'bold', 188 | padding: 0, 189 | }, 190 | border: { 191 | position: 'absolute', 192 | left: 0, 193 | right: 0, 194 | }, 195 | }); 196 | -------------------------------------------------------------------------------- /lib/Jiro.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { 4 | Animated, 5 | Easing, 6 | Text, 7 | TextInput, 8 | TouchableWithoutFeedback, 9 | View, 10 | StyleSheet, 11 | } from "react-native"; 12 | 13 | import BaseInput from "./BaseInput"; 14 | 15 | export default class Jiro extends BaseInput { 16 | static propTypes = { 17 | borderColor: PropTypes.string, 18 | inputPadding: PropTypes.number, 19 | height: PropTypes.number, 20 | }; 21 | 22 | static defaultProps = { 23 | borderColor: "red", 24 | inputPadding: 16, 25 | height: 48, 26 | }; 27 | 28 | constructor(props, context) { 29 | super(props, context); 30 | 31 | const animationValue = props.value ? 1 : 0; 32 | this.state = { 33 | value: props.value, 34 | borderPositionAnim: new Animated.Value(animationValue), 35 | borderHeightAnim: new Animated.Value(animationValue), 36 | labelPositionAnim: new Animated.Value(animationValue), 37 | }; 38 | } 39 | 40 | _toggle(isActive) { 41 | const animationValue = isActive ? 1 : 0; 42 | const borderPositionAnimation = Animated.timing( 43 | this.state.borderPositionAnim, 44 | { 45 | toValue: animationValue, 46 | eaasing: Easing.bezier(0.2, 1, 0.3, 1), 47 | duration: 200, 48 | useNativeDriver: false, 49 | } 50 | ); 51 | const borderHeightAnimation = Animated.timing(this.state.borderHeightAnim, { 52 | toValue: animationValue, 53 | eaasing: Easing.ease, 54 | duration: 200, 55 | useNativeDriver: false, 56 | }); 57 | const labelPositionAnimation = Animated.timing( 58 | this.state.labelPositionAnim, 59 | { 60 | toValue: animationValue, 61 | eaasing: Easing.ease, 62 | duration: 200, 63 | useNativeDriver: false, 64 | } 65 | ); 66 | 67 | if (isActive) { 68 | Animated.sequence([ 69 | borderPositionAnimation, 70 | Animated.parallel([labelPositionAnimation, borderHeightAnimation]), 71 | ]).start(); 72 | } else { 73 | Animated.sequence([ 74 | borderHeightAnimation, 75 | Animated.parallel([borderPositionAnimation, labelPositionAnimation]), 76 | ]).start(); 77 | } 78 | } 79 | 80 | render() { 81 | const { 82 | label, 83 | style: containerStyle, 84 | inputStyle, 85 | labelStyle, 86 | borderColor, 87 | height: inputHeight, 88 | inputPadding, 89 | } = this.props; 90 | const { 91 | width, 92 | borderPositionAnim, 93 | borderHeightAnim, 94 | labelPositionAnim, 95 | value, 96 | } = this.state; 97 | const totalHeight = inputHeight + 2 * inputPadding; 98 | 99 | return ( 100 | 109 | 125 | 143 | 144 | 159 | {label} 160 | 161 | 162 | 163 | ); 164 | } 165 | } 166 | 167 | const styles = StyleSheet.create({ 168 | labelContainer: { 169 | position: "absolute", 170 | backgroundColor: "transparent", 171 | }, 172 | label: { 173 | fontSize: 13, 174 | fontWeight: "bold", 175 | color: "#6a7989", 176 | }, 177 | textInput: { 178 | position: "absolute", 179 | bottom: 0, 180 | padding: 0, 181 | color: "black", 182 | fontSize: 18, 183 | fontWeight: "bold", 184 | }, 185 | border: { 186 | position: "absolute", 187 | bottom: 0, 188 | left: 0, 189 | right: 0, 190 | }, 191 | }); 192 | -------------------------------------------------------------------------------- /lib/Kaede.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Animated, 5 | Easing, 6 | Text, 7 | TextInput, 8 | TouchableWithoutFeedback, 9 | View, 10 | StyleSheet, 11 | } from 'react-native'; 12 | 13 | import BaseInput from './BaseInput'; 14 | 15 | export default class Kaede extends BaseInput { 16 | static propTypes = { 17 | easing: PropTypes.func, 18 | inputPadding: PropTypes.number, 19 | height: PropTypes.number, 20 | }; 21 | 22 | static defaultProps = { 23 | easing: Easing.bezier(0.2, 1, 0.3, 1), 24 | inputPadding: 16, 25 | height: 60, 26 | }; 27 | 28 | render() { 29 | const { 30 | label, 31 | style: containerStyle, 32 | inputStyle, 33 | labelStyle, 34 | height: inputHeight, 35 | inputPadding, 36 | } = this.props; 37 | const { width, focusedAnim, value } = this.state; 38 | const inputWidth = width * 0.6; 39 | 40 | const flatLabelStyle = StyleSheet.flatten(labelStyle); 41 | let labelBackgroundColor = '#EBEAEA'; 42 | if (flatLabelStyle && flatLabelStyle.backgroundColor) { 43 | labelBackgroundColor = flatLabelStyle.backgroundColor; 44 | } 45 | 46 | return ( 47 | 48 | 57 | 70 | 71 | 72 | 86 | 89 | {label} 90 | 91 | 92 | 93 | 94 | ); 95 | } 96 | } 97 | 98 | const styles = StyleSheet.create({ 99 | label: { 100 | fontSize: 16, 101 | fontWeight: 'bold', 102 | color: '#6a7989', 103 | }, 104 | textInput: { 105 | backgroundColor: 'white', 106 | color: 'black', 107 | fontSize: 16, 108 | fontWeight: 'bold', 109 | }, 110 | }); 111 | -------------------------------------------------------------------------------- /lib/Kohana.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Animated, 5 | Easing, 6 | Text, 7 | TextInput, 8 | TouchableWithoutFeedback, 9 | View, 10 | StyleSheet, 11 | } from 'react-native'; 12 | 13 | import BaseInput from './BaseInput'; 14 | 15 | export default class Kohana extends BaseInput { 16 | static propTypes = { 17 | /* 18 | * This is the icon component you are importing from react-native-vector-icons. 19 | * import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; 20 | * iconClass={FontAwesomeIcon} 21 | */ 22 | iconClass: PropTypes.func.isRequired, 23 | /* 24 | * Passed to react-native-vector-icons library as name prop 25 | */ 26 | iconName: PropTypes.string.isRequired, 27 | /* 28 | * Passed to react-native-vector-icons library as color prop 29 | */ 30 | iconColor: PropTypes.string, 31 | /* 32 | * Passed to react-native-vector-icons library as size prop. 33 | */ 34 | iconSize: PropTypes.number, 35 | 36 | inputPadding: PropTypes.number, 37 | }; 38 | 39 | static defaultProps = { 40 | easing: Easing.bezier(0.2, 1, 0.3, 1), 41 | iconSize: 25, 42 | inputPadding: 16, 43 | useNativeDriver: false, 44 | }; 45 | 46 | render() { 47 | const { 48 | iconClass: Icon, 49 | iconColor, 50 | iconSize, 51 | iconName, 52 | label, 53 | style: containerStyle, 54 | inputPadding, 55 | inputStyle, 56 | labelStyle, 57 | iconContainerStyle, 58 | labelContainerStyle, 59 | } = this.props; 60 | const { focusedAnim, value } = this.state; 61 | 62 | return ( 63 | 67 | 68 | 83 | 84 | 85 | 86 | 87 | 107 | 108 | {label} 109 | 110 | 111 | 112 | 124 | 125 | ); 126 | } 127 | } 128 | 129 | const styles = StyleSheet.create({ 130 | container: { 131 | flex: 1, 132 | flexDirection: 'row', 133 | backgroundColor: 'white', 134 | overflow: 'hidden', 135 | }, 136 | label: { 137 | fontSize: 18, 138 | fontWeight: 'bold', 139 | color: '#D2D2D2', 140 | }, 141 | textInput: { 142 | flex: 1, 143 | paddingVertical: 0, 144 | color: 'black', 145 | fontSize: 18, 146 | }, 147 | }); 148 | -------------------------------------------------------------------------------- /lib/Madoka.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Animated, 5 | TextInput, 6 | TouchableWithoutFeedback, 7 | View, 8 | StyleSheet, 9 | } from 'react-native'; 10 | 11 | import BaseInput from './BaseInput'; 12 | 13 | export default class Madoka extends BaseInput { 14 | static propTypes = { 15 | /* 16 | * this is applied as active border and label color 17 | */ 18 | borderColor: PropTypes.string, 19 | labelHeight: PropTypes.number, 20 | inputPadding: PropTypes.number, 21 | height: PropTypes.number, 22 | }; 23 | 24 | static defaultProps = { 25 | borderColor: '#7A7593', 26 | animationDuration: 250, 27 | labelHeight: 24, 28 | inputPadding: 16, 29 | height: 48, 30 | }; 31 | 32 | render() { 33 | const { 34 | label, 35 | style: containerStyle, 36 | height: inputHeight, 37 | inputPadding, 38 | labelHeight, 39 | inputStyle, 40 | labelStyle, 41 | borderColor, 42 | } = this.props; 43 | const { 44 | width, 45 | focusedAnim, 46 | value, 47 | } = this.state; 48 | 49 | return ( 50 | 54 | 57 | 75 | {/* right border */} 76 | 89 | {/* top border */} 90 | 103 | {/* left border */} 104 | 117 | 118 | 119 | 133 | 145 | {label} 146 | 147 | 148 | 149 | 150 | ); 151 | } 152 | } 153 | 154 | const styles = StyleSheet.create({ 155 | inputContainer: { 156 | borderBottomWidth: 2, 157 | }, 158 | labelContainer: { 159 | position: 'absolute', 160 | }, 161 | label: { 162 | backgroundColor: 'transparent', 163 | fontWeight: 'bold', 164 | color: '#6a7989', 165 | }, 166 | textInput: { 167 | paddingVertical: 0, 168 | color: 'black', 169 | fontSize: 18, 170 | fontWeight: 'bold', 171 | }, 172 | }); 173 | -------------------------------------------------------------------------------- /lib/Makiko.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Animated, 5 | Easing, 6 | Text, 7 | TextInput, 8 | TouchableWithoutFeedback, 9 | View, 10 | StyleSheet, 11 | } from 'react-native'; 12 | 13 | import BaseInput from './BaseInput'; 14 | 15 | export default class Makiko extends BaseInput { 16 | static propTypes = { 17 | /* 18 | * This is the icon component you are importing from react-native-vector-icons. 19 | * import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; 20 | * iconClass={FontAwesomeIcon} 21 | */ 22 | iconClass: PropTypes.func.isRequired, 23 | 24 | /* 25 | * Passed to react-native-vector-icons library as name prop. 26 | * This icon expands and covers the input. 27 | * So, the icon should not have any blank spaces for animation experience. 28 | * This is the limitation for Makiko. 29 | */ 30 | iconName: PropTypes.string.isRequired, 31 | 32 | /* 33 | * Passed to react-native-vector-icons library as color prop 34 | */ 35 | iconColor: PropTypes.string, 36 | 37 | /* 38 | * Use iconSize and iconWidth to make the animation work for your icon 39 | */ 40 | iconSize: PropTypes.number, 41 | iconWidth: PropTypes.number, 42 | 43 | inputPadding: PropTypes.number, 44 | height: PropTypes.number, 45 | }; 46 | 47 | static defaultProps = { 48 | iconColor: 'white', 49 | iconSize: 30, 50 | iconWidth: 60, 51 | height: 48, 52 | inputPadding: 16, 53 | easing: Easing.bezier(0.7, 0, 0.3, 1), 54 | animationDuration: 300, 55 | }; 56 | 57 | render() { 58 | const { 59 | iconClass, 60 | iconColor, 61 | iconName, 62 | iconSize, 63 | iconWidth, 64 | style: containerStyle, 65 | height: inputHeight, 66 | inputPadding, 67 | inputStyle, 68 | label, 69 | labelStyle, 70 | } = this.props; 71 | const { 72 | width, 73 | focusedAnim, 74 | value, 75 | } = this.state; 76 | const AnimatedIcon = Animated.createAnimatedComponent(iconClass); 77 | 78 | return ( 79 | 83 | 84 | 91 | 115 | 126 | {label} 127 | 128 | 129 | 130 | 142 | 160 | 161 | ); 162 | } 163 | } 164 | 165 | const styles = StyleSheet.create({ 166 | container: { 167 | backgroundColor: '#CBCBCB', 168 | overflow: 'hidden', 169 | }, 170 | label: { 171 | position: 'absolute', 172 | fontSize: 16, 173 | fontWeight: 'bold', 174 | color: 'white', 175 | backgroundColor: 'transparent', 176 | }, 177 | textInput: { 178 | paddingVertical: 0, 179 | color: 'black', 180 | fontSize: 18, 181 | }, 182 | }); 183 | -------------------------------------------------------------------------------- /lib/Sae.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Animated, 5 | TextInput, 6 | TouchableWithoutFeedback, 7 | View, 8 | StyleSheet, 9 | } from 'react-native'; 10 | 11 | import BaseInput from './BaseInput'; 12 | 13 | export default class Sae extends BaseInput { 14 | static propTypes = { 15 | height: PropTypes.number, 16 | /* 17 | * active border height 18 | */ 19 | borderHeight: PropTypes.number, 20 | /* 21 | * This is the icon component you are importing from react-native-vector-icons. 22 | * import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; 23 | * iconClass={FontAwesomeIcon} 24 | */ 25 | iconClass: PropTypes.func.isRequired, 26 | /* 27 | * Passed to react-native-vector-icons library as name prop 28 | */ 29 | iconName: PropTypes.string, 30 | /* 31 | * Passed to react-native-vector-icons library as color prop. 32 | * This is also used as border color. 33 | */ 34 | iconColor: PropTypes.string, 35 | inputPadding: PropTypes.number, 36 | labelHeight: PropTypes.number, 37 | }; 38 | 39 | static defaultProps = { 40 | iconColor: 'white', 41 | height: 48, 42 | inputPadding: 16, 43 | labelHeight: 24, 44 | borderHeight: 2, 45 | animationDuration: 300, 46 | iconName: 'pencil', 47 | }; 48 | 49 | render() { 50 | const { 51 | iconClass, 52 | iconColor, 53 | iconName, 54 | label, 55 | style: containerStyle, 56 | height: inputHeight, 57 | inputPadding, 58 | labelHeight, 59 | borderHeight, 60 | inputStyle, 61 | labelStyle, 62 | } = this.props; 63 | const { width, focusedAnim, value } = this.state; 64 | const AnimatedIcon = Animated.createAnimatedComponent(iconClass); 65 | 66 | return ( 67 | 77 | 78 | 87 | 99 | {label} 100 | 101 | 102 | 103 | 121 | 122 | 144 | 145 | {/* bottom border */} 146 | 159 | 160 | ); 161 | } 162 | } 163 | 164 | const styles = StyleSheet.create({ 165 | container: { 166 | overflow: 'hidden', 167 | }, 168 | label: { 169 | backgroundColor: 'transparent', 170 | fontWeight: 'bold', 171 | color: '#7771ab', 172 | }, 173 | textInput: { 174 | position: 'absolute', 175 | bottom: 0, 176 | left: 0, 177 | paddingLeft: 0, 178 | color: 'white', 179 | fontSize: 18, 180 | }, 181 | }); 182 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | import Kaede from './Kaede'; 2 | import Hoshi from './Hoshi'; 3 | import Jiro from './Jiro'; 4 | import Isao from './Isao'; 5 | import Madoka from './Madoka'; 6 | import Akira from './Akira'; 7 | import Hideo from './Hideo'; 8 | import Kohana from './Kohana'; 9 | import Makiko from './Makiko'; 10 | import Sae from './Sae'; 11 | import Fumi from './Fumi'; 12 | 13 | export { 14 | Kaede, 15 | Hoshi, 16 | Jiro, 17 | Isao, 18 | Madoka, 19 | Akira, 20 | Hideo, 21 | Kohana, 22 | Makiko, 23 | Sae, 24 | Fumi, 25 | }; 26 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-textinput-effects", 3 | "version": "0.6.2", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "react-native-textinput-effects", 9 | "version": "0.6.2", 10 | "license": "MIT", 11 | "dependencies": { 12 | "@types/react-native-vector-icons": "^6.4.5" 13 | } 14 | }, 15 | "node_modules/@types/prop-types": { 16 | "version": "15.7.3", 17 | "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", 18 | "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" 19 | }, 20 | "node_modules/@types/react": { 21 | "version": "16.9.34", 22 | "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.34.tgz", 23 | "integrity": "sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==", 24 | "dependencies": { 25 | "@types/prop-types": "*", 26 | "csstype": "^2.2.0" 27 | } 28 | }, 29 | "node_modules/@types/react-native": { 30 | "version": "0.62.4", 31 | "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.62.4.tgz", 32 | "integrity": "sha512-AKImyybUzqqPItKNuURkMe7y1X5cxuSJh5td8qbFSEXO58S5qjw01eZweWkKyTVCvrWGXkfm43u1zoYcZSGL6w==", 33 | "dependencies": { 34 | "@types/react": "*" 35 | } 36 | }, 37 | "node_modules/@types/react-native-vector-icons": { 38 | "version": "6.4.5", 39 | "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.5.tgz", 40 | "integrity": "sha512-JBpcjWQE4n0GlE0p6HpDDclT+uXpFC453T5k4h+B38q0utlGJhvgNr8899BoJGc1xOktA2cgqFKmFMJd0h7YaA==", 41 | "dependencies": { 42 | "@types/react": "*", 43 | "@types/react-native": "*" 44 | } 45 | }, 46 | "node_modules/csstype": { 47 | "version": "2.6.10", 48 | "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz", 49 | "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==" 50 | } 51 | }, 52 | "dependencies": { 53 | "@types/prop-types": { 54 | "version": "15.7.3", 55 | "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", 56 | "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" 57 | }, 58 | "@types/react": { 59 | "version": "16.9.34", 60 | "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.34.tgz", 61 | "integrity": "sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==", 62 | "requires": { 63 | "@types/prop-types": "*", 64 | "csstype": "^2.2.0" 65 | } 66 | }, 67 | "@types/react-native": { 68 | "version": "0.62.4", 69 | "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.62.4.tgz", 70 | "integrity": "sha512-AKImyybUzqqPItKNuURkMe7y1X5cxuSJh5td8qbFSEXO58S5qjw01eZweWkKyTVCvrWGXkfm43u1zoYcZSGL6w==", 71 | "requires": { 72 | "@types/react": "*" 73 | } 74 | }, 75 | "@types/react-native-vector-icons": { 76 | "version": "6.4.5", 77 | "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.5.tgz", 78 | "integrity": "sha512-JBpcjWQE4n0GlE0p6HpDDclT+uXpFC453T5k4h+B38q0utlGJhvgNr8899BoJGc1xOktA2cgqFKmFMJd0h7YaA==", 79 | "requires": { 80 | "@types/react": "*", 81 | "@types/react-native": "*" 82 | } 83 | }, 84 | "csstype": { 85 | "version": "2.6.10", 86 | "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz", 87 | "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==" 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-textinput-effects", 3 | "version": "0.6.3", 4 | "description": "TextInput effects for react native", 5 | "license": "MIT", 6 | "keywords": [ 7 | "react", 8 | "react-component", 9 | "react-native", 10 | "text input", 11 | "textinput", 12 | "textfield", 13 | "animation", 14 | "animated", 15 | "ios", 16 | "android" 17 | ], 18 | "main": "lib/index.js", 19 | "types": "types/types.d.ts", 20 | "scripts": {}, 21 | "repository": { 22 | "type": "git", 23 | "url": "git+https://github.com/halilb/react-native-textinput-effects.git" 24 | }, 25 | "bugs": { 26 | "url": "https://github.com/halilb/react-native-textinput-effects/issues" 27 | }, 28 | "author": "Halil Bilir ", 29 | "homepage": "https://github.com/halilb/react-native-textinput-effects#readme", 30 | "dependencies": { 31 | "@types/react-native-vector-icons": "^6.4.5" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /screenshots/akira.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/screenshots/akira.gif -------------------------------------------------------------------------------- /screenshots/full.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/screenshots/full.gif -------------------------------------------------------------------------------- /screenshots/fumi.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/screenshots/fumi.gif -------------------------------------------------------------------------------- /screenshots/hideo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/screenshots/hideo.gif -------------------------------------------------------------------------------- /screenshots/hoshi.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/screenshots/hoshi.gif -------------------------------------------------------------------------------- /screenshots/isao.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/screenshots/isao.gif -------------------------------------------------------------------------------- /screenshots/jiro.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/screenshots/jiro.gif -------------------------------------------------------------------------------- /screenshots/kaede.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/screenshots/kaede.gif -------------------------------------------------------------------------------- /screenshots/kohana.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/screenshots/kohana.gif -------------------------------------------------------------------------------- /screenshots/madoka.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/screenshots/madoka.gif -------------------------------------------------------------------------------- /screenshots/makiko.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/screenshots/makiko.gif -------------------------------------------------------------------------------- /screenshots/sae.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/halilb/react-native-textinput-effects/a6b8f8fa0ca7ac26475c9331afbaf2e971465064/screenshots/sae.gif -------------------------------------------------------------------------------- /types/types.d.ts: -------------------------------------------------------------------------------- 1 | declare module "react-native-textinput-effects" { 2 | import { 3 | TextInputProps, 4 | ViewStyle, 5 | StyleProp, 6 | TextStyle, 7 | EasingFunction, 8 | } from "react-native"; 9 | 10 | class BaseClass extends React.Component { 11 | inputRef(): TextInputProps; 12 | 13 | focus(): void; 14 | 15 | blur(): void; 16 | 17 | isFocused(): boolean; 18 | 19 | clear(): void; 20 | } 21 | 22 | interface CommonProps extends TextInputProps { 23 | label?: string; 24 | value?: string; 25 | defaultValue?: string; 26 | style?: StyleProp; 27 | inputStyle?: StyleProp; 28 | labelStyle?: StyleProp; 29 | inputPadding?: number; 30 | easing?: EasingFunction; 31 | animationDuration?: number; 32 | editable?: boolean; 33 | height?: number; 34 | 35 | /* those are TextInput props which are overridden 36 | * so, i'm calling them manually 37 | */ 38 | onBlur?: () => void; 39 | onFocus?: () => void; 40 | onChange?: () => void; 41 | } 42 | 43 | interface WithIconProps extends CommonProps { 44 | iconClass: React.ComponentClass; 45 | iconName: string; 46 | iconColor?: string; 47 | iconSize?: number; 48 | } 49 | 50 | export interface AkiraProps extends CommonProps { 51 | borderColor?: string; 52 | labelHeight?: number; 53 | } 54 | 55 | class Akira extends BaseClass {} 56 | 57 | export interface FumiProps extends WithIconProps { 58 | passiveIconColor?: string; 59 | } 60 | 61 | class Fumi extends BaseClass {} 62 | 63 | export interface HideoProps extends WithIconProps { 64 | iconBackgroundColor?: string; 65 | } 66 | 67 | class Hideo extends BaseClass {} 68 | 69 | export interface HoshiProps extends CommonProps { 70 | maskColor?: string; 71 | borderColor?: string; 72 | borderHeight?: number 73 | } 74 | 75 | class Hoshi extends BaseClass {} 76 | 77 | export interface IsaoProps extends CommonProps { 78 | passiveColor?: string; 79 | /* 80 | * this is applied as active border and label color 81 | */ 82 | activeColor?: string; 83 | /* 84 | * active border height 85 | */ 86 | borderHeight?: number; 87 | labelHeight?: number; 88 | } 89 | 90 | class Isao extends BaseClass {} 91 | 92 | export interface JiroProps extends CommonProps { 93 | borderColor?: string; 94 | } 95 | 96 | class Jiro extends BaseClass {} 97 | 98 | export interface KaedeProps extends CommonProps {} 99 | 100 | class Kaede extends BaseClass {} 101 | 102 | export interface KohanaProps extends WithIconProps { 103 | useNativeDriver?: boolean; 104 | } 105 | 106 | class Kohana extends BaseClass {} 107 | 108 | export interface MadokaProps extends CommonProps { 109 | borderColor?: string; 110 | } 111 | 112 | class Madoka extends BaseClass {} 113 | 114 | export interface MakikoProps extends WithIconProps { 115 | iconWidth?: number; 116 | } 117 | 118 | class Makiko extends BaseClass {} 119 | 120 | export interface SaeProps extends WithIconProps { 121 | iconName?: string; 122 | labelHeight?: number; 123 | borderHeight?: number; 124 | } 125 | 126 | class Sae extends BaseClass {} 127 | 128 | export type TextInputEffectsProps = 129 | | AkiraProps 130 | | FumiProps 131 | | HideoProps 132 | | HoshiProps 133 | | IsaoProps 134 | | JiroProps 135 | | KaedeProps 136 | | KohanaProps 137 | | MadokaProps 138 | | MakikoProps 139 | | SaeProps; 140 | } 141 | --------------------------------------------------------------------------------