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

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

Quality

Security

License

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

security Security

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

build Reuse

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.

react-native-textinput-effects Examples and Code Snippets

See all related Code Snippets

Common Props

Copy

Download

&lt;Sae
  onChangeText={(text) =&gt; { this.setState({textValue: text}) }
/&gt;

Sae

Copy

Download

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

const saeInput = (
  &lt;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}
  /&gt;
);

Fumi

Copy

Download

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

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

Kohana

Copy

Download

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

const kohanaInput = (
  &lt;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={{&nbsp;padding: 20 }}
    useNativeDriver
  /&gt;
);

Makiko

Copy

Download

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

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

Isao

Copy

Download

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

const isaoInput = (
  &lt;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'}
  /&gt;
);

Hoshi

Copy

Download

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

const hoshiInput = (
  &lt;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'}
  /&gt;
);

Jiro

Copy

Download

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

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

Kaede

Copy

Download

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

const kaedeInput = (
  &lt;Kaede
    label={'Website'}
    inputPadding={16}
  /&gt;
);

Akira

Copy

Download

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

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

Madoka

Copy

Download

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

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

Hideo

Copy

Download

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

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

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

Copy

Download

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

See all related Code Snippets

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 .