kandi background
Explore Kits

react-native-textinput-effects | Text inputs with custom label and icon animations | iOS library

 by   halilb JavaScript Version: v0.6.1 License: MIT

 by   halilb JavaScript Version: v0.6.1 License: MIT

Download this library from

kandi X-RAY | react-native-textinput-effects Summary

react-native-textinput-effects is a JavaScript library typically used in Mobile, iOS, React Native applications. react-native-textinput-effects has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i react-native-textinput-effects' or download it from GitHub, npm.
I've come across with those beautiful text inputs created and blogged 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. There is also a native iOS library called TextFieldEffects which has built some of them in Swift.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • react-native-textinput-effects has a medium active ecosystem.
  • It has 2824 star(s) with 295 fork(s). There are 36 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 13 open issues and 91 have been closed. On average issues are closed in 229 days. There are 9 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of react-native-textinput-effects is v0.6.1
This Library - Support
Best in #iOS
Average in #iOS
This Library - Support
Best in #iOS
Average in #iOS

quality kandi Quality

  • react-native-textinput-effects has 0 bugs and 0 code smells.
This Library - Quality
Best in #iOS
Average in #iOS
This Library - Quality
Best in #iOS
Average in #iOS

securitySecurity

  • react-native-textinput-effects has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • react-native-textinput-effects code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
This Library - Security
Best in #iOS
Average in #iOS
This Library - Security
Best in #iOS
Average in #iOS

license License

  • react-native-textinput-effects is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
This Library - License
Best in #iOS
Average in #iOS
This Library - License
Best in #iOS
Average in #iOS

buildReuse

  • react-native-textinput-effects releases are available to install and integrate.
  • Deployable package is available in npm.
  • Installation instructions, examples and code snippets are available.
  • It has 164 lines of code, 5 functions and 25 files.
  • It has low code complexity. Code complexity directly impacts maintainability of the code.
This Library - Reuse
Best in #iOS
Average in #iOS
This Library - Reuse
Best in #iOS
Average in #iOS
Top functions reviewed by kandi - BETA

Coming Soon for all Libraries!

Currently covering the most popular Java, JavaScript and Python libraries. See a SAMPLE HERE.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.

react-native-textinput-effects Key Features

Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

Common Props

copy iconCopydownload iconDownload
<Sae
  onChangeText={(text) => { this.setState({textValue: text}) }
/>

Sae

copy iconCopydownload iconDownload
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Sae } from 'react-native-textinput-effects';

const saeInput = (
  <Sae
    label={'Email Address'}
    iconClass={FontAwesomeIcon}
    iconName={'pencil'}
    iconColor={'white'}
    inputPadding={16}
    labelHeight={24}
    // active border height
    borderHeight={2}
    // TextInput props
    autoCapitalize={'none'}
    autoCorrect={false}
  />
);

Fumi

copy iconCopydownload iconDownload
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Fumi } from 'react-native-textinput-effects';

const fumiInput = (
  <Fumi
    label={'Course Name'}
    iconClass={FontAwesomeIcon}
    iconName={'university'}
    iconColor={'#f95a25'}
    iconSize={20}
    iconWidth={40}
    inputPadding={16}
  />
);

Kohana

copy iconCopydownload iconDownload
import MaterialsIcon from 'react-native-vector-icons/MaterialIcons';
import { Kohana } from 'react-native-textinput-effects';

const kohanaInput = (
  <Kohana
    style={{ backgroundColor: '#f9f5ed' }}
    label={'Line'}
    iconClass={MaterialsIcon}
    iconName={'directions-bus'}
    iconColor={'#f4d29a'}
    inputPadding={16}
    labelStyle={{ color: '#91627b' }}
    inputStyle={{ color: '#91627b' }}
    labelContainerStyle={{ padding: 20 }}
    iconContainerStyle={{ padding: 20 }}
    useNativeDriver
  />
);

Makiko

copy iconCopydownload iconDownload
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Makiko } from 'react-native-textinput-effects';

const makikoInput = (
  <Makiko
    label={'Comment'}
    iconClass={FontAwesomeIcon}
    iconName={'comment'}
    iconColor={'white'}
    inputPadding={16}
    inputStyle={{ color: '#db786d' }}
  />
);

Isao

copy iconCopydownload iconDownload
import { Isao } from 'react-native-textinput-effects';

const isaoInput = (
  <Isao
    label={'First Name'}
    // this is applied as active border and label color
    activeColor={'#da7071'}
    // active border height
    borderHeight={8}
    inputPadding={16}
    labelHeight={24}
    // this is applied as passive border and label color
    passiveColor={'#dadada'}
  />
);

Hoshi

copy iconCopydownload iconDownload
import { Hoshi } from 'react-native-textinput-effects';

const hoshiInput = (
  <Hoshi
    label={'Town'}
    // this is used as active border color
    borderColor={'#b76c94'}
    // active border height
    borderHeight={3}
    inputPadding={16}
    // this is used to set backgroundColor of label mask.
    // please pass the backgroundColor of your TextInput container.
    backgroundColor={'#F9F7F6'}
  />
);

Jiro

copy iconCopydownload iconDownload
import { Jiro } from 'react-native-textinput-effects';

const jiroInput = (
  <Jiro
    label={'Dog\'s name'}
    // this is used as active and passive border color
    borderColor={'#9b537a'}
    inputPadding={16}
    inputStyle={{ color: 'white' }}
  />
);

Kaede

copy iconCopydownload iconDownload
import { Kaede } from 'react-native-textinput-effects';

const kaedeInput = (
  <Kaede
    label={'Website'}
    inputPadding={16}
  />
);

Akira

copy iconCopydownload iconDownload
import { Akira } from 'react-native-textinput-effects';

const akiraInput = (
  <Akira
    label={'First Name'}
    // this is used as active and passive border color
    borderColor={'#a5d1cc'}
    inputPadding={16}
    labelHeight={24}
    labelStyle={{ color: '#ac83c4' }}
  />
);

Madoka

copy iconCopydownload iconDownload
import { Madoka } from 'react-native-textinput-effects';

const madokaInput = (
  <Madoka
    label={'Frequency'}
    // this is used as active and passive border color
    borderColor={'#aee2c9'}
    inputPadding={16}
    labelHeight={24}
    labelStyle={{ color: '#008445' }}
    inputStyle={{ color: '#f4a197' }}
  />
);

Hideo

copy iconCopydownload iconDownload
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Hideo } from 'react-native-textinput-effects';

const hideoInput = (
  <Hideo
    iconClass={FontAwesomeIcon}
    iconName={'envelope'}
    iconColor={'white'}
    // this is used as backgroundColor of icon container view.
    iconBackgroundColor={'#f2a59d'}
    inputStyle={{ color: '#464949' }}
  />
);

this permision (android.permission.QUERY_ALL_PACKAGES) was automatically added to Manifest

copy iconCopydownload iconDownload
<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES"
        tools:node="remove" tools:ignore="QueryAllPackagesPermission" />

Community Discussions

Trending Discussions on react-native-textinput-effects
  • this permision (android.permission.QUERY_ALL_PACKAGES) was automatically added to Manifest
Trending Discussions on react-native-textinput-effects

QUESTION

this permision (android.permission.QUERY_ALL_PACKAGES) was automatically added to Manifest

Asked 2022-Jan-18 at 18:30

I have a react native app that it worked well until upgrade packages Actually after upgrade packages this permision added (android.permission.QUERY_ALL_PACKAGES) to manifest.please help me

this is first package.json

  {
  "name": "mazeapp",
  "version": "2.0.0",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@gregfrench/react-native-wheel-picker": "^1.2.15",
    "@miblanchard/react-native-slider": "^2.0.1",
    "@react-native-community/async-storage": "1.12.1",
    "@react-native-community/checkbox": "0.3.0",
    "@react-native-community/netinfo": "4.6.0",
    "@react-native-community/toolbar-android": "0.1.0-rc.2",
    "@react-native-firebase/app": "6.7.1",
    "@react-native-firebase/messaging": "6.7.1",
    "@react-native-picker/picker": "^1.9.10",
    "axios": "^0.19.0",
    "lottie-react-native": "3.5.0",
    "moment-jalaali": "^0.9.2",
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-native": "0.61.5",
    "react-native-app-intro-slider": "4.0.4",
    "react-native-awesome-alerts": "1.4.2",
    "react-native-background-actions": "^2.6.4",
    "react-native-background-timer": "2.4.1",
    "react-native-check-box": "^2.1.7",
    "react-native-confirmation-code-field": "^4.1.0",
    "react-native-date-picker": "3.2.5",
    "react-native-device-info": "5.6.5",
    "react-native-easy-toast": "^1.2.0",
    "react-native-emoji": "1.8.0",
    "react-native-exit-app": "^1.1.0",
    "react-native-file-picker": "0.0.19",
    "react-native-fs": "^2.16.6",
    "react-native-gesture-handler": "1.5.6",
    "react-native-i18n": "^2.0.15",
    "react-native-image-crop-picker": "^0.28.0",
    "react-native-image-picker": "2.3.4",
    "react-native-inappbrowser-reborn": "^3.5.1",
    "react-native-item-select": "0.3.0",
    "react-native-modal": "11.5.6",
    "react-native-modalbox": "2.0.2",
    "react-native-motion": "1.0.5",
    "react-native-otp-verify": "^1.0.3",
    "react-native-persian-calendar-picker": "^3.1.1",
    "react-native-popup-dialog": "0.18.3",
    "react-native-progress": "4.1.2",
    "react-native-push-notification": "^7.3.1",
    "react-native-rate": "^1.2.4",
    "react-native-ratings": "^7.4.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-root-toast": "3.2.1",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-sectioned-multi-select": "0.8.1",
    "react-native-select-contact": "^1.5.0",
    "react-native-simple-modal": "^9.0.1",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-sound": "0.11.0",
    "react-native-sqlite-storage": "^5.0.0",
    "react-native-stars": "^1.2.2",
    "react-native-step-indicator": "^1.0.3",
    "react-native-svg": "9.13.3",
    "react-native-svg-charts": "5.4.0",
    "react-native-swiper": "^1.6.0",
    "react-native-table-component": "^1.2.1",
    "react-native-textinput-effects": "^0.5.1",
    "react-native-typing-animation": "^0.1.7",
    "react-native-uuid-generator": "^6.1.1",
    "react-native-vector-icons": "6.7.0",
    "react-native-view-more-text": "^2.1.0",
    "react-native-web": "^0.11.7",
    "react-native-webview": "^11.4.1",
    "react-navigation": "4.4.3",
    "react-navigation-stack": "^1.10.3",
    "react-navigation-tabs": "2.10.1",
    "react-number-format": "4.4.1",
    "react-redux": "7.2.2",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0",
    "rn-fetch-blob": "^0.12.0",
    "socket.io-client": "^2.4.0",
    "styled-components": "5.2.1",
    "victory-native": "^33.0.1"
  },
  "devDependencies": {
    "@babel/core": "7.12.3",
    "@babel/runtime": "7.12.1",
    "@react-native-community/eslint-config": "^0.0.7",
    "babel-jest": "25.5.1",
    "eslint": "^6.8.0",
    "jest": "25.5.4",
    "jetifier": "1.6.6",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-native-bundle-visualizer": "2.2.1",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

this is secound file package.json

 {
  "name": "mazeapp",
  "version": "2.1.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@miblanchard/react-native-slider": "^2.0.1",
    "@react-native-community/async-storage": "1.12.1",
    "@react-native-community/checkbox": "0.3.0",
    "@react-native-community/netinfo": "4.6.0",
    "@react-native-community/toolbar-android": "^0.2.1",
    "@react-native-firebase/analytics": "^14.0.0",
    "@react-native-firebase/app": "^14.0.0",
    "@react-native-firebase/messaging": "^14.0.0",
    "axios": "^0.19.0",
    "lottie-react-native": "3.5.0",
    "moment-jalaali": "^0.9.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-native": "^0.66.4",
    "react-native-app-intro-slider": "4.0.4",
    "react-native-awesome-alerts": "1.4.2",
    "react-native-background-actions": "^2.6.4",
    "react-native-background-timer": "2.4.1",
    "react-native-check-box": "^2.1.7",
    "react-native-confirmation-code-field": "^7.2.0",
    "react-native-device-info": "5.6.5",
    "react-native-emoji": "1.8.0",
    "react-native-exit-app": "^1.1.0",
    "react-native-file-picker": "0.0.19",
    "react-native-fs": "^2.16.6",
    "react-native-gesture-handler": "1.5.6",
    "react-native-image-crop-picker": "^0.28.0",
    "react-native-image-picker": "2.3.4",
    "react-native-inappbrowser-reborn": "^3.5.1",
    "react-native-item-select": "0.3.0",
    "react-native-modal": "11.5.6",
    "react-native-modalbox": "2.0.2",
    "react-native-motion": "1.0.5",
    "react-native-otp-verify": "^1.0.3",
    "react-native-persian-calendar-picker": "^3.1.1",
    "react-native-progress": "4.1.2",
    "react-native-push-notification": "^7.3.1",
    "react-native-rate": "^1.2.4",
    "react-native-ratings": "^7.4.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-root-toast": "^3.3.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-select-contact": "^1.5.0",
    "react-native-simple-modal": "^9.0.1",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-sound": "0.11.0",
    "react-native-sqlite-storage": "^5.0.0",
    "react-native-stars": "^1.2.2",
    "react-native-step-indicator": "^1.0.3",
    "react-native-svg": "^9.13.3",
    "react-native-svg-charts": "5.4.0",
    "react-native-swiper": "^1.6.0",
    "react-native-textinput-effects": "^0.5.1",
    "react-native-typing-animation": "^0.1.7",
    "react-native-uuid-generator": "^6.1.1",
    "react-native-vector-icons": "^9.0.0",
    "react-native-view-more-text": "^2.1.0",
    "react-native-web": "^0.11.7",
    "react-native-webview": "^11.4.1",
    "react-navigation": "4.4.3",
    "react-navigation-stack": "^1.10.3",
    "react-navigation-tabs": "^2.10.1",
    "react-number-format": "4.4.1",
    "react-redux": "7.2.2",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0",
    "rn-fetch-blob": "^0.12.0",
    "socket.io-client": "^2.4.0",
    "victory-native": "^33.0.1"
  },
  "devDependencies": {
    "@babel/core": "7.16.5",
    "@babel/runtime": "7.16.5",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "eslint": "7.14.0",
    "jest": "26.6.3",
    "jetifier": "1.6.6",
    "metro-react-native-babel-preset": "0.66.2",
    "react-native-bundle-visualizer": "2.2.1",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        // googlePlayServicesVersion = "4.3.3" // default: "+"
        // firebaseMessagingVersion = "+" // default: "+"
        buildToolsVersion = "30.0.2"
        minSdkVersion = 21
        compileSdkVersion = 30
        targetSdkVersion = 30
        supportLibVersion = "28.0.0"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:4.2.2")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
        classpath 'com.google.gms:google-services:4.3.3'
        classpath 'com.google.firebase:firebase-crashlytics-gradle:2.8.1'
    }
}

allprojects {
    repositories {
        mavenCentral()
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        google()
        maven { url 'https://jitpack.io' }
  
      }
}

ANSWER

Answered 2022-Jan-18 at 18:30

It is because of target SDK updated to 30, some features (eg: Speech recognition,TTS) works in from android 11 device only after adding following code in our AndroidManifest.xml

<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES"
        tools:node="remove" tools:ignore="QueryAllPackagesPermission" />

also android:exported="true" inside <activity>

It is mentioned in here Behavior changes: Apps targeting Android 11

Source https://stackoverflow.com/questions/70757094

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install react-native-textinput-effects

The latest version of this project needs react-native >= 0.55(March 2018 release) due to createRef usage. Go with the latest version:.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Explore Related Topics

Share this Page

share link
Reuse Pre-built Kits with react-native-textinput-effects
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.