Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all 28476 articles
Browse latest View live

Package signatures do not match the previously installed version

$
0
0

This my project: https://github.com/kenpeter/my_hak_news, which is a direct copy of https://github.com/grigio/HAgnostic-News.

Git clone https://github.com/kenpeter/my_hak_news, then run react-native run-android

Got this error:

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to finalize session : INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package com.hagnosticnews signatures do not match the previously installed version; ignoring!

Relevant issue: https://github.com/grigio/HAgnostic-News/issues/1, I follow various ways, but not able to resolve this issue.


I want to navigate from App.js to Q1.s and run it via android emulator

$
0
0

App.js

import React, { Component } from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

function App(props) {
return (


<View style={styles.container}>
  <Text style={styles.loremIpsum}>
    Feedback Survey After Medical Check Up
  </Text>
  <TouchableOpacity
    onPress={() => props.navigation.navigate("Q1")}
    style={styles.button}
  >
    <Text style={styles.takeSurvey}>Take Survey</Text>
  </TouchableOpacity>
</View> );}

Q1.js

import React, { Component } from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";
import EntypoIcon from "react-native-vector-icons/Entypo";
import IoniconsIcon from "react-native-vector-icons/Ionicons";
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

The error is undefined is not an object(evaluating 'props.navigation.navigate').And also i already installed package "react-navigation" and "react-navigation-stack" but it can't detect the import that package in the file.Why?

Task 'assembleRelease' not found in root project 'android'

$
0
0

I'm using Reactnative 0.54.0 and react-native-cli 2.0.1 along side gradle 4.8.1

I have created a react-native project using create-react-native-app myProjectName

When I created the project, it doesn't include android and ios folders, so I added them manually.

I also installed gradle using choco and then created a wrapper for it using gradle wrapper --gradle-version 4.8.1 --distribution-type all

so I am developing react-native using microsoft vsCode and then see my application in action using Genymotion emulator, everything is fine

now, I want to generate the final Signed APK for play store, I'm using this guide provided by react-native

https://facebook.github.io/react-native/docs/signed-apk-android.html

When I want to run gradlew assembleRelease I get this error

C:\myApp\android>gradlew assembleRelease

FAILURE: Build failed with an exception.

* What went wrong:
Task 'assembleRelease' not found in root project 'android'.

* Try:
Run gradlew tasks to get a list of available tasks. Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 4s

what's wrong with assembleRelease? what should I do?

to add more info, I have to say that when I want to build this project in VSTS (TFS Online) I get this error

2018-07-17T16:20:14.9268702Z ##[error]Error: Not found wrapperScript: D:\a\1\s\gradlew

Any clue is appriciated Thanks

Update: as @philipp asked, this is the list of tasks that gradlew have listed and assembleRelease is not one one them!!!! what's the reason?

C:\myApp\Android>gradlew tasks

> Task :tasks

------------------------------------------------------------
All tasks runnable from root project
------------------------------------------------------------

Build Setup tasks
-----------------
init - Initializes a new Gradle build.
wrapper - Generates Gradle wrapper files.

Help tasks
----------
buildEnvironment - Displays all buildscript dependencies declared in root project 'android'.
components - Displays the components produced by root project 'android'. [incubating]
dependencies - Displays all dependencies declared in root project 'android'.
dependencyInsight - Displays the insight into a specific dependency in root project 'android'.
dependentComponents - Displays the dependent components of components in root project 'android'. [incubating]
help - Displays a help message.
model - Displays the configuration model of root project 'android'. [incubating]
projects - Displays the sub-projects of root project 'android'.
properties - Displays the properties of root project 'android'.
tasks - Displays the tasks runnable from root project 'android'.

To see all tasks and more detail, run gradlew tasks --all

To see more detail about a task, run gradlew help --task <task>

BUILD SUCCESSFUL in 1s
1 actionable task: 1 executed

and this is myApp\android**build.gradle**

project.ext.react = [
    bundleInStaging: true 
]
task wrapper(type: Wrapper) {
    gradleVersion = '4.8.1'
}
android {
    defaultConfig {
        applicationId "com.sunkime.client"
    }
    signingConfigs {
        staging {
            keyAlias = "staging"
            storeFile = file("my-release-key.keystore")
            keyPassword = "qwert%$#@!"
            storePassword = "qwert%$#@!"
        }
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword qwert%$#@!
                keyAlias qwert%$#@!
                keyPassword qwert%$#@!
            }
        }
    }
    buildTypes {
        debug {
            applicationIdSuffix ".debug"
        }
        staging {
            applicationIdSuffix ".staging"
            signingConfig signingConfigs.staging
            minifyEnabled true
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }

        release {
            applicationIdSuffix ".release"
            signingConfig signingConfigs.release
            minifyEnabled true
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
}

I also used gradlew clean and no difference

The library com.google.firebase:firebase-iid is being requested by various other libraries at [[17.0.0,17.0.0]], but resolves to 16.2.0

$
0
0

I started to get this error today, yesterday everything worked fine, there was no changes in gradle or firebase version

The library com.google.firebase:firebase-iid is being requested by various other libraries at [[17.0.0,17.0.0]], but resolves to 16.2.0. Disable the plugin and check your dependencies tree using ./gradlew :app:dependencies.

I saw that yesterday was update in google-services plugin, probably that is causing the problem.

How to fix this problem?

Error: jest-haste-map: Haste module naming collision:

$
0
0

I have created a custom npm module (will use xxx instead of its name) and link it manually using npm install.

I tried very hard and searched :

before raising a question. I would be thankful if someone tell me what wrong with my code or my approach or any error in my code.

When I run react-native run-android following error is raised by metro bundler

Error: jest-haste-map: Haste module naming collision:
  Duplicate module name: react-native
  Paths: E:\cdg-native\CDG\node_modules\react-native-XXX\node_modules\react-native\package.json collides with E:\cdg-native\CDG\node_modules\react-native\package.json

This error is caused by `hasteImpl` returning the same name for different files.

My custom module package.json is

{
  "name": "react-native-xxx",
  "version": "1.0.0",
  "description": "Library to render xxx",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\"&& exit 1"
  },
  "keywords": [
    "react native xxx"
  ],
  "author": "Firdous Nath",
  "license": "ISC",
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  },
  "devDependencies": {
    "react": "^16.6.1",
    "react-native": "^0.57.5",
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1"
  }
}

index.js of the custom module is very simple as below

import React from "react";
import { Text } from "react-native";

export default class XXXView extends React.Component {

    render() {
        return (
            <Text> From custom module </Text>
        );
    }
}

file where I am using custom module is

import React from "react";
import {StyleSheet, View} from "react-native";
import XXXView from "react-native-xxx"
//import {XXXView} from "react-native-xxx" -> I tried this as well

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <XXXView/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#f5fcff"
    }
});

I tried npm install /absolute/path/to/xxx and it linked module correctly. By correctly I mean I can see react-native-xxx package in nodemodule directory. I did all possible ways but nothing worked.

I also tried but got no success

  • yarn add /absolute/path/to/react-native-xxx
  • react-native link react-native-xxx
  • react-native run-android

[react-native]could not connect to development server on android

$
0
0

When I run "react-native run-android",it gives me error:"could not connect to development server...".

  • Package server is running and i can access it directly from browser in mobile device.
  • My android device connected to computer has debugging enabled i checked it using adb devices command.
  • My android version is 4.4.4 so i cannot use adb reverse command.
  • I have set the ip address and port in Dev setting.
  • Usb debug is on.
  • OS is windows7.

So how to fix the red error screen issue?Any suggestion is appreciated!

Error screen

Have tried all other answers found for this problem: Your Android App Bundle is signed with the wrong key. Ensure that your App Bundle is signed [..]

$
0
0

I am trying to upload a completely new app to the play store but am being met with the error "Your Android App Bundle is signed with the wrong key. Ensure that your App Bundle is signed with the correct signing key and try again". I have tried my best to follow and understand the instructions and believe I have followed them.

From https://developer.android.com/studio/publish/app-signing#generate-key I have done these steps and created a new keystore.jks file. I then continue to the next step and sign my app with that same key, providing the same password used to create it. I left they key alias as key0 which was the default, and checked off 'Export encrypted key for enrolling published apps in Google Play App Signing', though I have not had a chance to use the file it exports. I made sure the build type was set to release, not debug and made my app-release.aab file.

I then continue onto the next section for 'Opt in to app signing by Google Play'/'Opt in a new app'. Step 1 is covered by the steps I've taken previously. I then sign into the developer account and navigate to the app I set up (there is only one associated with the account), and go to the App Releases page from the navigation on the right.

I scroll down to 'Internal test track' and edit release. It is set to edit not create because initially I tried to upload a React Native 0.57 app and found that I had to update it to a more recent version before the store would accept it. I kept the name and 'what's new in this release?' section but removed the app that was there previously and saved the page. I also made sure to remove this previous version from the Artifact library, which is now empty.

When I try to upload my app-release.aab file I am told "Your Android App Bundle is signed with the wrong key. Ensure that your App Bundle is signed with the correct signing key and try again: SHA1: [...]". This is where I am stuck now.

Things I have researched and tried:

  1. I have tried cleaning the project and recreating the keystore file and rebuilding the app with that. Same wrong key result.
  2. I have changed the location of the .jks file in case there some caching going on in. Same wrong key result.
  3. I have tried removing the debug.keystore file from android/app/debug.keystore, AS did not like that and would not build the bundle successfully without it
  4. I have checked for a few debuggable properties that may have been set within the .gradle file(s), debuggable = true, and testCoverageEnabled = true (Or some other value). Neither of these were set.
  5. I have made sure that the same password was being used in creation through the above steps to create and sign. Same wrong key result.
  6. Crying and giving up. Same wrong key result.
  7. I have read that having the signingConfig specified anywhere in your gradle files will override the choice you make during the bundle creation and have commented that out for release buildtypes. After uploading I was told my app was not signed.
  8. Instead of using AS, I followed this guide: https://facebook.github.io/react-native/docs/signed-apk-android and made an appname.keystore file, signingConfigs { release {..}} entry for that and creating the .aab through command line via gradlew bundleRelease as instructed, then uploaded that. Same wrong key result.

I am absolutely, completely lost. I have no idea what to do next. Everything I have found and tried has failed, I cannot find any more things to try. Please help me.

Below are my gradle files:

android\app\build.gradle

apply plugin: "com.android.application"

import com.android.build.OutputFile

/**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
 * and bundleReleaseJsAndAssets).
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "../../node_modules/react-native/react.gradle"` line.
 *
 * project.ext.react = [
 *   // the name of the generated asset file containing your JS bundle
 *   bundleAssetName: "index.android.bundle",
 *
 *   // the entry file for bundle generation
 *   entryFile: "index.android.js",
 *
 *   // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format
 *   bundleCommand: "ram-bundle",
 *
 *   // whether to bundle JS and assets in debug mode
 *   bundleInDebug: false,
 *
 *   // whether to bundle JS and assets in release mode
 *   bundleInRelease: true,
 *
 *   // whether to bundle JS and assets in another build variant (if configured).
 *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
 *   // The configuration property can be in the following formats
 *   //         'bundleIn${productFlavor}${buildType}'
 *   //         'bundleIn${buildType}'
 *   // bundleInFreeDebug: true,
 *   // bundleInPaidRelease: true,
 *   // bundleInBeta: true,
 *
 *   // whether to disable dev mode in custom build variants (by default only disabled in release)
 *   // for example: to disable dev mode in the staging build type (if configured)
 *   devDisabledInStaging: true,
 *   // The configuration property can be in the following formats
 *   //         'devDisabledIn${productFlavor}${buildType}'
 *   //         'devDisabledIn${buildType}'
 *
 *   // the root of your project, i.e. where "package.json" lives
 *   root: "../../",
 *
 *   // where to put the JS bundle asset in debug mode
 *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
 *
 *   // where to put the JS bundle asset in release mode
 *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in release mode
 *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
 *
 *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
 *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
 *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
 *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
 *   // for example, you might want to remove it from here.
 *   inputExcludes: ["android/**", "ios/**"],
 *
 *   // override which node gets called and with what additional arguments
 *   nodeExecutableAndArgs: ["node"],
 *
 *   // supply additional arguments to the packager
 *   extraPackagerArgs: []
 * ]
 */

project.ext.react = [
    entryFile: "index.js",
    enableHermes: false,  // clean and rebuild if changing
]

apply from: "../../node_modules/react-native/react.gradle"

/**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
def enableSeparateBuildPerCPUArchitecture = false

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false

/**
 * The preferred build flavor of JavaScriptCore.
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US.  Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

/**
 * Whether to enable the Hermes VM.
 *
 * This should be set on project.ext.react and mirrored here.  If it is not set
 * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
 * and the benefits of using Hermes will therefore be sharply reduced.
 */
def enableHermes = project.ext.react.get("enableHermes", false);

android {
    compileSdkVersion rootProject.ext.compileSdkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    defaultConfig {
        applicationId "com.[..]"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        multiDexEnabled true
        missingDimensionStrategy 'react-native-camera', 'general'
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://facebook.github.io/react-native/docs/signed-apk-android.
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // https://developer.android.com/studio/build/configure-apk-splits.html
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }

        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.facebook.react:react-native:+"  // From node_modules
    implementation "com.google.android.gms:play-services-gcm:12.+"

    implementation 'androidx.appcompat:appcompat:1.0.0'
    implementation 'com.android.support:appcompat-v7:XX.X.+'

    implementation 'com.android.support:multidex:1.0.3'

    androidTestImplementation 'androidx.annotation:annotation:1.0.0'

    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

android\build.gradle:

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

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        googlePlayServicesVersion = "16.+"
        firebaseVersion = "17.3.4"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath('com.android.tools.build:gradle:3.5.2')
        classpath 'com.google.gms:google-services:3.0.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        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()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

project.configurations.all {
    resolutionStrategy.eachDependency { details ->
        if (details.requested.group == 'com.android.support'&& !details.requested.name.contains('multidex') ) {
            details.useVersion "26.+"
        }
        if (details.requested.group == 'com.google.android.gms'&& !details.requested.name.contains('multidex') && (
            !details.requested.name.contains('play-services-stats') ||
            !details.requested.name.contains('play-services-vision-image-label') ||
            !details.requested.name.contains('play-services-clearcut') ||
            !details.requested.name.contains('play-services-flags') ||
            !details.requested.name.contains('play-services-phenotype')
            )) {
            details.useVersion "12.+"
        }
        if (details.requested.group == 'com.google.android.gms'&& !details.requested.name.contains('multidex') && (
            details.requested.name.contains('play-services-stats') ||
            details.requested.name.contains('play-services-vision-image-label') ||
            details.requested.name.contains('play-services-clearcut') ||
            details.requested.name.contains('play-services-flags') ||
            details.requested.name.contains('play-services-phenotype')
            )) {
            details.useVersion "+"
        }
        if (details.requested.group == 'com.google.firebase'&& !details.requested.name.contains('multidex') && details.requested.name.contains('firebase-messaging')) {
            details.useVersion "12.+"
        }
    }
}

ext {
    googlePlayServicesVersion = "+" // default: "+"
    firebaseVersion = "+" // default: "+"
    // Other settings
    compileSdkVersion = 28 // default: 23
    buildToolsVersion = "28.0.3" // default: "23.0.1"
    targetSdkVersion = 28 // default: 23
    supportLibVersion = "28.0.0"
}

gradle.properties:

# Project-wide Gradle settings.

# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.

# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html

# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
# Default value: -Xmx10248m -XX:MaxPermSize=256m
# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true

org.gradle.jvmargs=-Xmx4608m
android.useAndroidX=true
android.enableJetifier=true

MYAPP_UPLOAD_STORE_FILE=[...].keystore
MYAPP_UPLOAD_KEY_ALIAS=[...]
MYAPP_UPLOAD_STORE_PASSWORD=[...]
MYAPP_UPLOAD_KEY_PASSWORD=[...]

React Native - How to make KeyboardAvoidingView inside a ScrollView work for all devices?

$
0
0

enter image description here

I am building a chat UI in react native and am having an issue with using KeyboardAvoidingView inside of a ScrollView. When selecting the TextInput the height between the input field and keyboard seems to vary based on the device I am using. How do I standardize this so that it works equally for all devices?

import React from 'react'
import { StyleSheet, View, Text, TextInput, ScrollView, KeyboardAvoidingView, Platform } from 'react-native'
import Message from './message'


export default class Messages extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    headerTitle: 'Messages',
    headerStyle: {
      backgroundColor: 'rgb(0,0,0)',
    },
    headerTitleStyle: {
      fontSize: 20,
      color: 'rgb(255,255,255)'
    },
    headerTintColor: 'rgb(0,122,255)',
  })

  state = {
    messages: [
      {
        message: 'yeah its not working',
        userId: 1,
        userName: 'Client'
      },
      {
        message: 'what isnt working...',
        userId: 2,
        userName: 'Sean'
      },
      {
        message: 'it, all of it',
        userId: 1,
        userName: 'Client'
      },
      {
        message: 'were on it',
        userId: 3,
        userName: 'Matt'
      },
      {
        message: 'fjdklsajfklsdjafkdjslkafjkdsjal;fdks;lajfdklsjldjskfja;sfjasdfjasdjlkfaj',
        userId: 3,
        userName: 'Matt'
      },
      {
        message: 'great!',
        userId: 1,
        userName: 'Client'
      },
      {
        message: 'blah',
        userId: 1,
        userName: 'Client'
      },
      {
        message: 'derp',
        userId: 2,
        userName: 'Sean'
      },
      {
        message: 'merh!',
        userId: 2,
        userName: 'Sean'
      },
       {
        message: 'help pls',
        userId: 2,
        userName: 'Sean'
      },
    ]
  }

  renderMessages = (messages) => {
    return messages.map((data, i) => <Message data={data} key={i}/>)
  } 

  render() {
    return (
      <ScrollView 
        style={styles.container}
        ref={ref => this.scrollView = ref}
        onContentSizeChange={(contentWidth, contentHeight)=> {this.scrollView.scrollToEnd({animated: true})}}
      >
        <KeyboardAvoidingView
          behavior={Platform.OS == 'ios' ? "position" : null}
        >
          <View>
              {this.renderMessages(this.state.messages)}
              <View style={styles.textBox}>
                <TextInput 
                  style={styles.textInput}
                  placeholder='Reply...'
                  placeholderTextColor={'rgb(216,216,216)'}
                  returnKeyType='done'
                  autoCapitalize='none'
                  selectionColor='#3490dc'
                  multiline={true}
                  blurOnSubmit={true}
                />
              </View>  
          </View>
        </KeyboardAvoidingView>
      </ScrollView>
      )
  }
}



const styles = StyleSheet.create({
    container: {
        //flex: 1,
        backgroundColor: 'rgb(0,0,0)'
    },
    textInput: {
        color: 'rgb(255,255,255)',
        fontSize: 18,
    },
    textBox: {
      borderColor: '#242F39',
      borderWidth: 2,
      borderRadius: 2, 
      padding: 10,
      paddingLeft: 16,
      marginTop: 10,
      backgroundColor: '#0A151F'
    }
})

USB Camera to conect in andoid phone

$
0
0

I need the development of an application mobile to take pictures. But the camera is external so that it will be connected by usb cable in the tablet android.

What the better technology to create this app?

I did not find the solution for this to react native and Cordova. Can somebody help with this?

My app has not stopped when i run react-native run-android

$
0
0

I got an error when i run react-native run-android that it's not working! I run adb logcat *:E, i recieved message error: Didn't find class "android.support.v4.app.CoreComponentFactory" on path: DexPathList[[],nativeLibraryDirectories=[/system/priv-app/GoogleSdkSetup/lib/x86, /system/lib, /system/lib]] Does anyone help me fix this bug! Thank very so much!

How do I access ReactContext from Java code in React Native?

$
0
0

I an trying to create an application thet will catch the incoming calls to the cellphone using a BroadcastReciver. From my BroadcastReciver i whould like to sent the number as an event to my JS file using this method.

I have checked that my Java code is working and is catching the calls and number but my application craches with the error that mentions that the react context is null. I am guessing that this is because the manifest (or something) is creating a new instance of the class when the event from the android system is catched and that the new instance does not have a ReactContext. Is there any way to access the ReactContext from the Java code or send a ReactContext to the BroadcastReciver through the manifest?

This is my BroadcastReciver:

package com.bridgetest;

import android.content.BroadcastReceiver;
import android.content.Context;
import android.content.Intent;
import android.telephony.PhoneStateListener;
import android.telephony.TelephonyManager;
import android.util.Log;

import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.facebook.react.bridge.JavaScriptModule;


import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.bridge.Arguments;

import javax.annotation.Nullable;

/**
 * Created by Erik on 2016-04-06. 
 */
public class BroadcastReceiverCustom extends BroadcastReceiver {

    ReactContext reactContext;

    public BroadcastReceiverCustom (){
    }

    @Override
    public void onReceive(Context context, Intent intent) {
        if             (intent.getStringExtra(TelephonyManager.EXTRA_STATE).equals(TelephonyManager.EXTRA_STATE_RINGING)) {
            // This code will execute when the phone has an incoming call

            // get the phone number
            String incomingNumber =     intent.getStringExtra(TelephonyManager.EXTRA_INCOMING_NUMBER);
            Toast.makeText(context, "Call from:" +incomingNumber, Toast.LENGTH_LONG).show();
            sendCallEvent(incomingNumber);

        } else if (intent.getStringExtra(TelephonyManager.EXTRA_STATE).equals(
                TelephonyManager.EXTRA_STATE_IDLE)
                || intent.getStringExtra(TelephonyManager.EXTRA_STATE).equals(
                    TelephonyManager.EXTRA_STATE_OFFHOOK)) {
            // This code will execute when the call is disconnected
            Toast.makeText(context, "Detected call hangup event", Toast.LENGTH_LONG).show();
        }
    }

    public void sendCallEvent(String incomingNumber){
            WritableMap params = Arguments.createMap();
            params.putString("Number", incomingNumber);
            sendEvent("CallRecevied", params);
    }


    private void sendEvent(String eventName,
                          @Nullable WritableMap params) {
        reactContext
            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
            .emit(eventName, params);
    }
}

How to render gender select view like this - React Native

$
0
0

I would like to know how to render gender selection view like this...enter image description here

Once I clicked on Male I want to render Yellow Image (Checked) and Once I clicked on Female I want to make Male Image to Default and Female Image in to Yellow Image (Checked).

Note - I have 4 separate images

eg - Male_Checked / Male_Unchecked / Female_Checked / Female_Unchecked (PNG)

React native app-release build not working for some android devices

$
0
0

I gave a build for android using gradlew assembleRelease. but app-release.apk file not working for some devices like honor 9i, Redmi note 5 pro.

react native Firetv menu key handling

$
0
0

I am writing a React native app for FireTV and I follow the instructions as given here: https://facebook.github.io/react-native/docs/building-for-apple-tv, to handle menu remote key press.

In Developer mode, Firetv remote menu opens React native developer menu. However in release APK, it doesn't trigger menu key event. I checked using console log, for all keys (pause, play, etc.) I get key event except for menu key.

Has anyone know why FireTV menu key event alone not reaching app?

Thanks

groovy.lang.MissingPropertyException: Could not get unknown property 'manifestOutputFile'

$
0
0

After upgrading my app from RN 0.42 to RN 0.59.10 this issue came up, unable to build my project.

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> groovy.lang.MissingPropertyException: Could not get unknown property 'manifestOutputFile' for task ':app:processDebugManifest' of type com.android.build.gradle.tasks.ProcessApplicationManifest.

Build.gradle

  apply plugin: 'com.bugsnag.android.gradle'
apply plugin: "com.android.application"

import com.android.build.OutputFile

/**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
 * and bundleReleaseJsAndAssets).
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "../../node_modules/react-native/react.gradle"` line.
 *
 * project.ext.react = [
 *   // the name of the generated asset file containing your JS bundle
 *   bundleAssetName: "index.android.bundle",
 *
 *   // the entry file for bundle generation
 *   entryFile: "index.android.js",
 *
 *   // whether to bundle JS and assets in debug mode
 *   bundleInDebug: false,
 *
 *   // whether to bundle JS and assets in release mode
 *   bundleInRelease: true,
 *
 *   // whether to bundle JS and assets in another build variant (if configured).
 *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
 *   // The configuration property can be in the following formats
 *   //         'bundleIn${productFlavor}${buildType}'
 *   //         'bundleIn${buildType}'
 *   // bundleInFreeDebug: true,
 *   // bundleInPaidRelease: true,
 *   // bundleInBeta: true,
 *
 *   // whether to disable dev mode in custom build variants (by default only disabled in release)
 *   // for example: to disable dev mode in the staging build type (if configured)
 *   devDisabledInStaging: true,
 *   // The configuration property can be in the following formats
 *   //         'devDisabledIn${productFlavor}${buildType}'
 *   //         'devDisabledIn${buildType}'
 *
 *   // the root of your project, i.e. where "package.json" lives
 *   root: "../../",
 *
 *   // where to put the JS bundle asset in debug mode
 *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
 *
 *   // where to put the JS bundle asset in release mode
 *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in release mode
 *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
 *
 *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
 *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
 *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
 *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
 *   // for example, you might want to remove it from here.
 *   inputExcludes: ["android/**", "ios/**"],
 *
 *   // override which node gets called and with what additional arguments
 *   nodeExecutableAndArgs: ["node"],
 *
 *   // supply additional arguments to the packager
 *   extraPackagerArgs: []
 * ]
 */

 project.ext.react = [
    entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"

/**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
def enableSeparateBuildPerCPUArchitecture = false

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false

def keystorePropertiesFile = rootProject.file("upload-keystore.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))


android {
    compileSdkVersion rootProject.ext.compileSdkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    defaultConfig {
        applicationId "com.XXX.XXX"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionName "1.1.2"
        versionCode 11
        multiDexEnabled true
        ndk.abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64'
    }
    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile file(keystoreProperties['storeFile'])
            storePassword keystoreProperties['storePassword']
        }
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            signingConfig signingConfigs.release
        }
    }
    // applicationVariants are e.g. debug, release
    // applicationVariants.all { variant ->
    //     variant.outputs.each { output ->
    //         // For each separate APK per architecture, set a unique version code as described here:
    //         // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
    //         include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"            
    //         def abi = output.getFilter(OutputFile.ABI)
    //         if (abi != null) {  // null for the universal-debug, universal-release variants
    //             output.versionCodeOverride =
    //                     versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
    //         }
    //     }
    // }
}

dependencies {
    implementation project(':react-native-payments')
    implementation project(':react-native-webview')
    implementation project(':react-native-video')
    implementation project(':@react-native-community_async-storage')
    implementation project(':@react-native-community_netinfo')
    implementation project(':react-native-snackbar')
    implementation project(':realm')
    implementation project(':react-native-gesture-handler')
    implementation project(':rn-fetch-blob')
    implementation project(':bugsnag-react-native')
    implementation project(':react-native-sound')
    implementation 'com.android.support:multidex:1.0.0'
    implementation project(':react-native-fs')
    implementation project(':react-native-autoheight-webview')
    implementation project(':react-native-firebase-analytics')
    implementation project(':react-native-aws-cognito')
    implementation project(':react-native-aws-s3')
    implementation project(':react-native-splash-screen')
    implementation project(':react-native-orientation')
    implementation project(':react-native-vector-icons')
    implementation project(':react-native-sketch-view')
    implementation project(':react-native-image-picker')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

apply plugin: 'com.google.gms.google-services'

app/build.gradle

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

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "28.0.0"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.4.0")
        classpath 'com.google.gms:google-services:3.1.0'
        classpath 'com.bugsnag:bugsnag-android-gradle-plugin:2.4.2'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

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

Any help is appreciated

Thanks in advance..


React Native TouchableWithoutFeedback onLongPress wont work some android devices

$
0
0

TouchableWithoutFeedback onLongPress props wont work some android devices, my Rn version: 59.1, ios is work but some android device wont work onLongPress prop my TouchableWithoutFeedback is

<TouchableWithoutFeedback
      disabled={this.props.disabled}
      onLongPress={this.props.onLongPress}
      delayLongPress={2000}
      onPress={this.props.onPress}
      onPressIn={this.pressIn.bind(this)}
      onPressOut={this.pressOut.bind(this)}>
        <Animated.View style={[styles.view, this.state.style, {backgroundColor: backgroundColor}]}>
            {this.props.leftImage != undefined ? this._getImage('leftImage') : null }
            <Text
              numberOfLines={1}
              style={[styles.text, this.props.styleText]}>
                {this.props.text}
            </Text>
            {this.props.rightImage != undefined ? this._getImage('rightImage') : null }
            {this.props.children}
        </Animated.View>
    </TouchableWithoutFeedback>

How to find custom button in custom UI layout in exoplayer?

$
0
0

I want to custom the UI of exoplayer using these codes

<com.google.android.exoplayer2.ui.PlayerView
    android:id="@+id/exoplayer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:controller_layout_id="@layout/control_view_normal"/>

This is control_view_normal,corresponding to the app:controller_layout_id

Then I try to find the exo_fullscreen_button in the code

 View controlView = videoView.findViewById(R.id.exo_controller);
 controlView.findViewById(R.id.exo_fullscreen_button)  
            .setOnClickListener(v -> {           //null pointer exception! why?
                    ((Activity)context).setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
                });

Moreover,the compiler gives me a controlView.findViewById(R.id.exo_fullscreen_button) is null pointer. Someone know how should I find the custom button in the custom layout?

React Native run-android interopRequireDefault error

$
0
0

I have a problem with running my (just created) React Native app. I read about

error Cannot find module '@babel/runtime/helpers/interopRequireDefault'

But changing every possible combination of package.json doesn't help.

"devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "7.0.0-beta.55",
    "@react-native-community/eslint-config": "^0.0.5",
    "@types/jest": "^24.0.18",
    "@types/react-native": "^0.60.21",
    "@types/react-test-renderer": "16.9.1",
    "babel-jest": "^24.9.0",
    "eslint": "^6.6.0",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.12.0",
    "typescript": "^3.6.3"
  },

I've already changed @babel/runtime version as I found it in solutions but after react-native start I still get:

error Cannot find module '@babel/runtime/helpers/interopRequireDefault'. Run CLI with --verbose flag for more details.
Error: Cannot find module '@babel/runtime/helpers/interopRequireDefault'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (C:\Users\User\AppData\Local\Yarn\Data\global\node_modules\@react-native-community\cli-debugger-ui\build\middleware\index.js:3:30)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

Funny thing is that after react-native run-android I see message that build is successful (in console) but I'm not able to run my app and get:

Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release.

on smartphone.

Android gradle exclude does not work as expected

$
0
0

I am developing a React Native project and am using a third party library react-native-geolocation-service. Inside the build.gradle file of that library, the version of play-services-location is defined as so: (refer to this link for the entire build.gradle file)

dependencies {
    def googlePlayServicesVersion = rootProject.hasProperty('googlePlayServicesVersion') ? rootProject.googlePlayServicesVersion : DEFAULT_GOOGLE_PLAY_SERVICES_VERSION

    implementation "com.google.android.gms:play-services-location:$googlePlayServicesVersion"
}

Inside the build.gradle file of my project, I have the following:

buildscript {
    ext {
        ...
        googlePlayServicesVersion = "16.1.0"
    }
}

Inside the app/build.gradle file of my project:

dependencies {
    implementation(project(':react-native-geolocation-service')) {
        exclude group: 'com.google.android.gms', module: 'play-services-location'
    }
    implementation ('com.google.android.gms:play-services-location:16.0.0') {
      force = true
    }
}

Even though I have specified in the gradle file to use version 16.0.0 for play-services-location, I still get the following error after I ran gradlew clean then gradlew build:

Execution failed for task ':react-native-geolocation-service:generateDebugRFile'.

Could not resolve all files for configuration ':react-native-geolocation-service:debugRuntimeClasspath'.

Could not find com.google.android.gms:play-services-location:16.1.0.

Why is gradle still looking for version 16.1.0 and not version 16.0.0?

Build error when react-native run-android on app with no change

$
0
0

I have a react native 0.61 app which was running fine but is not without any change i am aware. Here is the error when react-native run-android:

FAILURE: Build failed with an exception.

* Where:
Script 'C:\D\code\js\emps_fe7\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line: 182

* What went wrong:
A problem occurred evaluating script.
> Text must not be null or empty

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 4s

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* Where:
Script 'C:\D\code\js\emps_fe7\node_modules\@react-native-community\cli-platform-android\native_modules.gradle' line: 182

* What went wrong:
A problem occurred evaluating script.
> Text must not be null or empty

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 4s

    at checkExecSyncError (child_process.js:629:11)
    at execFileSync (child_process.js:647:13)
    at runOnAllDevices (C:\d\code\js\emps_fe7\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)
    at buildAndRun (C:\d\code\js\emps_fe7\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:158:41)
    at then.result (C:\d\code\js\emps_fe7\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:125:12)
    at process._tickCallback (internal/process/next_tick.js:68:7)

What I did is to rebuild the project from the beginning and add each of the module one by one. However the error is exactly the same. The project used to be fine and apk has been generated out of it. I am kind lost here about what could go wrong. Here is the dependence of package.json:

"dependencies": {
    "@react-native-community/async-storage": "^1.6.2",
    "moment": "^2.24.0",
    "react": "16.9.0",
    "react-native": "0.61.4",
    "react-native-cli": "^2.0.1",
    "react-native-confirmation-code-field": "^4.1.0",
    "react-native-device-info": "^5.2.1",
    "react-native-elements": "^1.2.7",
    "react-native-gesture-handler": "^1.5.0",
    "react-native-gifted-chat": "^0.11.3",
    "react-native-keychain": "^4.0.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-modal": "^11.5.1",
    "react-native-modal-datetime-picker": "^7.6.0",
    "react-native-reanimated": "^1.4.0",
    "react-native-segmented-control-tab": "^3.4.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-video": "^5.0.2",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.10.3",
    "react-navigation-tabs": "^2.5.6",
    "socket.io-client": "2.1.1"
  },
Viewing all 28476 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>