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

How to calculate react-native screen coordinates

$
0
0

I want to move and element right to place I click with onPress event.

Example if I click on the screen with position x: 200, y: 300, so my element should move there from position x: -100, y: -100, I tried it, but it is not moving to the exact position I press on the screen. my code:, although it moves, but moves not exactly to the place I want...

const styles = StyleSheet.create({    alertAutoCloseContainer: {        left: 0, top: 0,        margin: 10, marginHorizontal: 40, position: 'absolute',        padding: 10, maxWidth: 500, maxHeight: 400, zIndex: 1000,        backgroundColor: 'rgba(0, 50, 50, 0.8)', borderRadius: 5,    },    alertAutoCloseText: {        color: '#fff', fontFamily: 'IRANSansMobile'    }});const { Value } = Animated;const animatedValue = new Value(0);const MyAlert = memo(forwardRef(({ }, ref) => {    const [state, setState] = useReducer((s, v) => v, {        status: true, xAxis: 0, yAxis: 0, parentData: {            text: ""        }    });    useImperativeHandle(ref, () => {        return ({            startAnimation: ({ xAxis, yAxis, parentData }) => {                const { status } = state;                setState({                    ...state, xAxis, yAxis,                    parentData, status: !status                });                Animated.timing(animatedValue, {                    toValue: status === true ? 1 : 0, duration: 500                }).start();            },            stopAnimation: ({ }) => {                Animated.timing(animatedValue, {                    toValue: 0, duration: 500                }).start();            }        })    });    console.log(state.xAxis, state.yAxis);    return (<Animated.View style={{            ...styles.alertAutoCloseContainer, transform: [                {                    translateY: animatedValue.interpolate({                        inputRange: [0, 1],                        outputRange: [0, state.yAxis],                        extrapolate: 'clamp'                    })                },                {                    translateX: animatedValue.interpolate({                        inputRange: [0, 1],                        outputRange: [0, state.xAxis],                        extrapolate: 'clamp'                    })                },                {                    scale: animatedValue.interpolate({                        inputRange: [0, 1],                        outputRange: [0, 1]                    })                }            ]        }}><Text style={styles.alertAutoCloseText}>                {state.parentData.text}</Text></Animated.View>    );}), (p, n) => true);

ComponentWillReceiveProps calling multiple time using react native

$
0
0

In my scenario, I am trying to change the switch value on real time. Here, whenever the switch index value on/off changing componentWillReceiveProps calling twice at a time. How to solve this issue?

My Code Below

componentWillReceiveProps(nextProps) {    switch (this.state.selectedIndex) {      case 0:        if (nextProps.checkState.reported.on) {          this.setState({ switchValue: true });        } else {          this.setState({ switchValue: false });        }        break;      default:        this.setState({ switchValue: nextProps.checkState.on });    }  }

React Native Simple Widget

$
0
0

Can any one help with adding simple widget to react native app for android. I understand that React native does not have own implementation of widgets. I have tried solution from https://github.com/netbeast/react-native-android-widget-poc with no luck. I would be happy with example of simple widget that contains just one string (receives it from RN app). One way communication is enough.

Multiple lines text always full width on React-Native Android

$
0
0

I am facing this issue with RN,If there is only one line, the View auto fit the width with the Text inside.But if there's multiple lines text, the Text node always uses its maximum width, so it left a blank space.

How can I resolve this?

Here is my code

// StyleStyleSheet.create({    container: {        marginRight: 60,        marginLeft: 0,        paddingHorizontal: 10,        paddingVertical: 5,        backgroundColor: '#F3F3F3',        borderRadius: 13,    },text: {    color: '#000',    fontSize: 15,    lineHeight: 21,    includeFontPadding: false,    overflow: 'hidden',    flexShrink: 1,    flexGrow: 0,    alignSelf: 'flex-start'}})//Render<TouchableOpacity style={this.style.container}><Text style={this.style.text}>{content}</Text></TouchableOpacity>

This is the results, it's left the blank space on the right

react-native multiple line text issue

Command failed: gradlew.bat installDebug

$
0
0

While developing an app I came into following error. I tried downgrading the java version from 11 to 8, but that wasn't helpful.

FAILURE: Build failed with an exception.* What went wrong:Could not create service of type ScriptPluginFactory using BuildScopeServices.createScriptPluginFactory().> Could not create service of type PluginResolutionStrategyInternal using BuildScopeServices.createPluginResolutionStrategy().* 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.orgBUILD FAILED in 15sCould not install the app on the device, read the error above for details.Make sure you have an Android emulator running or a device connected and haveset up your Android development environment:https://facebook.github.io/react-native/docs/getting-started.htmlCommand failed: gradlew.bat installDebugError: Command failed: gradlew.bat installDebug    at checkExecSyncError (child_process.js:616:11)    at Object.execFileSync (child_process.js:634:13)    at runOnAllDevices (C:\Users\samie\Documents\React Native\auth\node_modules\react-native\local-cli\runAndroid\runAndroid.js:299:19)    at buildAndRun (C:\Users\samie\Documents\React Native\auth\node_modules\react-native\local-cli\runAndroid\runAndroid.js:135:12)    at isPackagerRunning.then.result (C:\Users\samie\Documents\React Native\auth\node_modules\react-native\local-cli\runAndroid\runAndroid.js:65:12)    at process._tickCallback (internal/process/next_tick.js:68:7)

Is React Native cross platform and shouldn't I prefer it to Android?

$
0
0

I am about to start mobile app development and have a little knowledge about Android. Besides that, I have knowledge Java and ReactJS. Normally I planned to learn Android and refuse all of the cross platforms e.g. Xamarin, but with React Native think to use it. So, in this scene, before proceeding to start mobile app development (primarily Android), I need to be clarified about the issue below by keeping the latest versions and features of React Native:

1) Is React Native cross-platform mobile development technology? If so, what makes it different that the other cross platforms?

2) As far as I see using native platforms have some advantages over React Native. However, instead of concentrate on just Android, I think that concentrating on React Native helps me develop several apps that can be used multiple platforms. Is that true?

3) Lastly, what is the most important pros and cons between Android and React Native for developing Android apps? For example the updates is a cons for React Native as afar as I see. Any other important points?

Should I prefer React Native to Android?

$
0
0

I am about to start mobile app development and have a little knowledge about Android. Besides that, I have knowledge Java and ReactJS. Normally I planned to learn Android and refuse all of the cross platforms e.g. Xamarin, but with React Native think to use it. So, in this scene, before proceeding to start mobile app development (primarily Android), I need to be clarified about the issue below by keeping the latest versions and features of React Native:

1) Is React Native cross-platform mobile development technology? If so, what makes it different that the other cross platforms?

2) As far as I see using native platforms have some advantages over React Native. However, instead of concentrate on just Android, I think that concentrating on React Native helps me develop several apps that can be used multiple platforms. Is that true?

3) What is the pitfalls for React Native and Android apps? Which points should be considered most when comparing them?

Task :react-native-keychain:compileReleaseJavaWithJavac FAILED

$
0
0

I am trying to get the .aab and the .apk files to publish the android side of a react-native app to the Google Play Store. I have followed all the directions on the React-Native Docs but when I run ./gradlew bundleRelease it fails.

After about 2 minutes of working Task :react-native-keychain:compileReleaseJavaWithJavac FAILED is printed.

It gives a little more information but I have been unable to find anything that fixes this error.

Execution failed for task ':react-native-keychain:compileReleaseJavaWithJavac'.> Compilation failed; see the compiler error output for details.

Logs:

/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/PrefsStorage.java:5: error: package android.support.annotation does not existimport android.support.annotation.NonNull;                                 ^/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorage.java:3: error: package android.support.annotation does not existimport android.support.annotation.NonNull;                                 ^/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/KeychainModule.java:4: error: package android.support.annotation does not existimport android.support.annotation.NonNull;                                 ^/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageKeystoreAESCBC.java:8: error: package android.support.annotation does not existimport android.support.annotation.NonNull;                                 ^/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageFacebookConceal.java:4: error: package android.support.annotation does not existimport android.support.annotation.NonNull;                                 ^/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/PrefsStorage.java:33: error: cannot find symbol    public ResultSet getEncryptedEntry(@NonNull String service) {                                        ^  symbol:   class NonNull  location: class PrefsStorage/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/PrefsStorage.java:47: error: cannot find symbol    public void removeEntry(@NonNull String service) {                             ^  symbol:   class NonNull  location: class PrefsStorage/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/PrefsStorage.java:58: error: cannot find symbol    public void storeEncryptedEntry(@NonNull String service, @NonNull EncryptionResult encryptionResult) {                                     ^  symbol:   class NonNull  location: class PrefsStorage/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/PrefsStorage.java:58: error: cannot find symbol    public void storeEncryptedEntry(@NonNull String service, @NonNull EncryptionResult encryptionResult) {                                                              ^  symbol:   class NonNull  location: class PrefsStorage/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorage.java:42: error: cannot find symbol    EncryptionResult encrypt(@NonNull String service, @NonNull String username, @NonNull String password, SecurityLevel level) throws CryptoFailedException;                              ^  symbol:   class NonNull  location: interface CipherStorage/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorage.java:42: error: cannot find symbol    EncryptionResult encrypt(@NonNull String service, @NonNull String username, @NonNull String password, SecurityLevel level) throws CryptoFailedException;                                                       ^  symbol:   class NonNull  location: interface CipherStorage/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorage.java:42: error: cannot find symbol    EncryptionResult encrypt(@NonNull String service, @NonNull String username, @NonNull String password, SecurityLevel level) throws CryptoFailedException;                                                                                 ^  symbol:   class NonNull  location: interface CipherStorage/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorage.java:44: error: cannot find symbol    DecryptionResult decrypt(@NonNull String service, @NonNull byte[] username, @NonNull byte[] password) throws CryptoFailedException;                              ^  symbol:   class NonNull  location: interface CipherStorage/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorage.java:44: error: cannot find symbol    DecryptionResult decrypt(@NonNull String service, @NonNull byte[] username, @NonNull byte[] password) throws CryptoFailedException;                                                       ^  symbol:   class NonNull  location: interface CipherStorage/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorage.java:44: error: cannot find symbol    DecryptionResult decrypt(@NonNull String service, @NonNull byte[] username, @NonNull byte[] password) throws CryptoFailedException;                                                                                 ^  symbol:   class NonNull  location: interface CipherStorage/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorage.java:46: error: cannot find symbol    void removeKey(@NonNull String service) throws KeyStoreAccessException;                    ^  symbol:   class NonNull  location: interface CipherStorage/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/KeychainModule.java:186: error: cannot find symbol    public void hasInternetCredentialsForServer(@NonNull String server, Promise promise) {                                                 ^  symbol:   class NonNull  location: class KeychainModule/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/KeychainModule.java:200: error: cannot find symbol    public void setInternetCredentialsForServer(@NonNull String server, String username, String password, String minimumSecurityLevel, ReadableMap unusedOptions, Promise promise) {                                                 ^  symbol:   class NonNull  location: class KeychainModule/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/KeychainModule.java:205: error: cannot find symbol    public void getInternetCredentialsForServer(@NonNull String server, ReadableMap unusedOptions, Promise promise) {                                                 ^  symbol:   class NonNull  location: class KeychainModule/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/KeychainModule.java:210: error: cannot find symbol    public void resetInternetCredentialsForServer(@NonNull String server, ReadableMap unusedOptions, Promise promise) {                                                   ^  symbol:   class NonNull  location: class KeychainModule/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/KeychainModule.java:299: error: cannot find symbol    @NonNull     ^  symbol:   class NonNull  location: class KeychainModule/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageKeystoreAESCBC.java:91: error: cannot find symbol    public EncryptionResult encrypt(@NonNull String service, @NonNull String username, @NonNull String password, SecurityLevel level) throws CryptoFailedException {                                     ^  symbol:   class NonNull  location: class CipherStorageKeystoreAESCBC/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageKeystoreAESCBC.java:91: error: cannot find symbol    public EncryptionResult encrypt(@NonNull String service, @NonNull String username, @NonNull String password, SecurityLevel level) throws CryptoFailedException {                                                              ^  symbol:   class NonNull  location: class CipherStorageKeystoreAESCBC/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageKeystoreAESCBC.java:91: error: cannot find symbol    public EncryptionResult encrypt(@NonNull String service, @NonNull String username, @NonNull String password, SecurityLevel level) throws CryptoFailedException {                                                                                        ^  symbol:   class NonNull  location: class CipherStorageKeystoreAESCBC/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageKeystoreAESCBC.java:148: error: cannot find symbol    private void generateKeyAndStoreUnderAlias(@NonNull String service, SecurityLevel requiredLevel) throws NoSuchAlgorithmException, NoSuchProviderException, InvalidAlgorithmParameterException, CryptoFailedException {                                                ^  symbol:   class NonNull  location: class CipherStorageKeystoreAESCBC/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageKeystoreAESCBC.java:164: error: cannot find symbol    public DecryptionResult decrypt(@NonNull String service, @NonNull byte[] username, @NonNull byte[] password) throws CryptoFailedException {                                     ^  symbol:   class NonNull  location: class CipherStorageKeystoreAESCBC/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageKeystoreAESCBC.java:164: error: cannot find symbol    public DecryptionResult decrypt(@NonNull String service, @NonNull byte[] username, @NonNull byte[] password) throws CryptoFailedException {                                                              ^  symbol:   class NonNull  location: class CipherStorageKeystoreAESCBC/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageKeystoreAESCBC.java:164: error: cannot find symbol    public DecryptionResult decrypt(@NonNull String service, @NonNull byte[] username, @NonNull byte[] password) throws CryptoFailedException {                                                                                        ^  symbol:   class NonNull  location: class CipherStorageKeystoreAESCBC/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageKeystoreAESCBC.java:189: error: cannot find symbol    public void removeKey(@NonNull String service) throws KeyStoreAccessException {                           ^  symbol:   class NonNull  location: class CipherStorageKeystoreAESCBC/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageKeystoreAESCBC.java:265: error: cannot find symbol    private String getDefaultServiceIfEmpty(@NonNull String service) {                                             ^  symbol:   class NonNull  location: class CipherStorageKeystoreAESCBC/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageKeystoreAESCBC.java:264: error: cannot find symbol    @NonNull     ^  symbol:   class NonNull  location: class CipherStorageKeystoreAESCBC/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageFacebookConceal.java:49: error: cannot find symbol    public EncryptionResult encrypt(@NonNull String service, @NonNull String username, @NonNull String password, SecurityLevel level) throws CryptoFailedException {                                     ^  symbol:   class NonNull  location: class CipherStorageFacebookConceal/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageFacebookConceal.java:49: error: cannot find symbol    public EncryptionResult encrypt(@NonNull String service, @NonNull String username, @NonNull String password, SecurityLevel level) throws CryptoFailedException {                                                              ^  symbol:   class NonNull  location: class CipherStorageFacebookConceal/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageFacebookConceal.java:49: error: cannot find symbol    public EncryptionResult encrypt(@NonNull String service, @NonNull String username, @NonNull String password, SecurityLevel level) throws CryptoFailedException {                                                                                        ^  symbol:   class NonNull  location: class CipherStorageFacebookConceal/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageFacebookConceal.java:72: error: cannot find symbol    public DecryptionResult decrypt(@NonNull String service, @NonNull byte[] username, @NonNull byte[] password) throws CryptoFailedException {                                     ^  symbol:   class NonNull  location: class CipherStorageFacebookConceal/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageFacebookConceal.java:72: error: cannot find symbol    public DecryptionResult decrypt(@NonNull String service, @NonNull byte[] username, @NonNull byte[] password) throws CryptoFailedException {                                                              ^  symbol:   class NonNull  location: class CipherStorageFacebookConceal/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageFacebookConceal.java:72: error: cannot find symbol    public DecryptionResult decrypt(@NonNull String service, @NonNull byte[] username, @NonNull byte[] password) throws CryptoFailedException {                                                                                        ^  symbol:   class NonNull  location: class CipherStorageFacebookConceal/Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageFacebookConceal.java:93: error: cannot find symbol    public void removeKey(@NonNull String service) {                           ^  symbol:   class NonNull  location: class CipherStorageFacebookConcealNote: /Users/thomasstansel/Documents/GitHub/monitoring-mobile-app/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/DeviceAvailability.java uses or overrides a deprecated API.Note: Recompile with -Xlint:deprecation for details.

I have also run the app in android studio and get the same error. I am especially confused because the app works when I run the nix react-native run-android command.

If any more information is needed please let me know and thank you in advance for any help!


React Native APK crash inmediately in my device

$
0
0

i have a React Native app, with the @react-native-firebase/app dependence.My app works fine when I run npx react-native run-android . But when generating the apk and testing it on my device, it closes instantly without sending any error.I generated the apk with the command ./gradlew assembleRelease -x bundleReleaseJsAndAssets . I connected the device to my pc and ran logcat and the only error that can be seen is this:

Exception occurred while getting SettingsStore instance.java.util.concurrent.ExecutionException: com.google.android.gms.auth.UserRecoverableAuthException: BadAuthentication

I don't know what it could be and how it could be solved. Any idea what is going on?

Keyboard changes all components placement in react native

$
0
0

I created an AuthForm component that I use for a sign up and sign in screen after styling the screen I noticed every time I click on the keyboard to type some input everything changes its original placement and some components overlay others and it turns into a mess, how can I fix this?

Here is the code i used

import React, { useState } from "react";import {  StyleSheet,  ImageBackground,  View,  TouchableOpacity,} from "react-native";import { Text, Button, Input } from "react-native-elements";import Icon from "react-native-vector-icons/MaterialIcons";import Spacer from "./Spacer";const AuthForm = ({  headerText,  errorMessage,  onSubmit,  submitButtonText,  subText,}) => {  const [email, setEmail] = useState("");  const [password, setPassword] = useState("");  return (<View style={styles.container}><Spacer><Text style={styles.Text1}>{headerText}</Text><Text style={styles.Text2}>{subText}</Text></Spacer><View style={styles.Input}><Input          style={styles.Input}          placeholder="Your email"          value={email}          onChangeText={setEmail}          autoCapitalize="none"          autoCorrect={false}          leftIcon={<Icon name="email" size={20} color="#B3C1B3" />}        /><Input          secureTextEntry          placeholder="Your password"          value={password}          onChangeText={setPassword}          autoCapitalize="none"          autoCorrect={false}          leftIcon={<Icon name="lock" size={20} color="#B3C1B3" />}        /></View>      {errorMessage ? (<Text style={styles.errorMessage}>{errorMessage}</Text>      ) : null}<Spacer><TouchableOpacity          style={styles.buttonStyle}          onPress={() => onSubmit({ email, password })}><Text style={styles.ButtonText}>{submitButtonText}</Text></TouchableOpacity></Spacer></View>  );};const styles = StyleSheet.create({  container: {    flex: 1,    //justifyContent: "center",  },  errorMessage: {    fontSize: 16,    color: "red",    marginLeft: 15,    marginTop: 15,    top: "35%",  },  buttonStyle: {    color: "#e8c0c8",    width: "45%",    height: "25%",    backgroundColor: "#fdc2e6",    justifyContent: "center",    alignItems: "center",    borderRadius: 15,    top: "150%",    left: "30%",  },  ButtonText: {    color: "#FFFF",  },  Text1: {    top: "420%",    left: "15%",    fontSize: 24,    color: "#ffffff",  },  Text2: {    top: "420%",    left: "15%",    fontSize: 14,    color: "#d9d9d9",  },  Input: {    top: "40%",    width: "70%",    left: "15%",  },});export default AuthForm;

How to access Activity from a React Native Android module?

$
0
0

I'm attempting to bridge over the Android functionality of keeping the screen on to React Native. I figured I could do this with a simple module, however I don't know how to get access to the current Android Activity from said module.

I need the Activity reference so I can call .getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); on it

I tried to get the activity via casting like so ((Activity)getReactApplicationContext().getBaseContext()), but this throws a "cannot be cast to Android.app.Activity" error

React Native - Make a view appear and follow screen after user scroll down enough, view apear and disappear too slow

$
0
0

I have a button that appear after user have scrolled down enough on a long screen that is contained in a ScrollView, I have some code for it and it works, however the view take a full second to appear and disappear and that's too slow! Is there anyway to make it appear and disappear faster?

const [showBottomButton, setShowBottomButton] = useState(false)

.

const  handleScroll = (event) => {        var curY = event.nativeEvent.contentOffset.y;            if (curY>=500 && !showBottomButton){                setShowBottomButton(true)            }else if (curY<500 && showBottomButton){                setShowBottomButton(false)            }    }

.

{showBottomButton ? <View style={{ position: 'absolute', left: 0, bottom: 0, right: 0, height: 70, alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', borderTopWidth: 1, borderColor: '#eeeeee' }}><TouchableOpacity onPress={BottomButtonOnpress}><View style={styles.BottomButton}<Text style={styles.MediumText}>Button Text</Text></View></TouchableOpacity></View> : null}

Android : react-naive-maps show only absolute one block area in detail

$
0
0

Android : react-naive-maps show only absolute one block area in detail.

Only one rectangular area is shown in detail.

I try code.but Does not get better

What's wrong with this?When I zoom in on the map, I can't see anything, does this mean it crashes?ios is working fine.

<meta-data android:name="com.google.android.geo.API_KEY" android:value="*********************"/><uses-library android:name="org.apache.http.legacy" android:required="false"/>

How do I handle backAndroidHandler in each scene using react-native-router-flux

$
0
0

As the title description, I'm using react-native-router-flux.

And there is a question, I used backAndroidHandler={true} in <Router/> work normally before.

But now, because some reason I have to set backAndroidHandler to control physical back button enable in different scene.

So I can't just put it in router something like this before:

Example:

<Router    backAndroidHandler={true}><Scene key="a" /><Scene key="b" /><Scene key="c" /></Router>

How could I setting backAndroidHandler in different scene or in the Tag to achieve this without setState (Because it will rerender again at route page)?

I have tried someone said in other question using like <Scene key="c" type={ActionConst.RESET}/> didn't work.

Any help or recommend will be appreciate. Thanks.

Run electrode-native getting following error : using command **sudo ern run-android** on ubuntu 14.04

$
0
0

Getting these error when execute the command: ern run-android

$ sudo ern run-android

enter image description here

I am using installation step from this link click here . Please help to run application.


Android java.lang.UnsatisfiedLinkError: couldn't find DSO to load

$
0
0

I just set up a brand new react-native project (0.62). Running a fresh debug build works just fine.

I set up signing following the documentation: https://reactnative.dev/docs/signed-apk-android, and ensured that I'm using the following ABIs: "armeabi-v7a", "x86", "arm64-v8a", "x86_64".

To test out a release build, I run the following: npx react-native run-android --variant release

Problem

After running the above command, the app attempts to start and crashes immediately with the following stack trace:

    --------- beginning of crash2020-05-01 09:34:26.707 19961-19976/? E/AndroidRuntime: FATAL EXCEPTION: create_react_context    Process: <BUNDLE_ID>, PID: 19961    java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libhermes.so        at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:789)        at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:639)        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:577)        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:525)

Sure enough, when I unpackage the APK there is no libhermes.so in /lib/x86_64 (I am testing at the moment on pixel 2 API 28).

I'm not sure why hermes wasn't enabled to start out with, but just to be sure I set the following in my build.grade:

project.ext.react = [    enableHermes: true,  // clean and rebuild if changing]

Now after cleaning and building I do see libhermes.so. Unfortunately, I am still seeing the same exact issue. But I can see that the file exists.

At this point, I'm pretty stuck. I've followed a number of threads reporting the same issue (for example, this). It sounds like an underlying issue with soloader has been fixed and is being used with the latest version of react native. Although I'm using the latest version of RN, I'm still seeing this issue.

Question

Not being terribly familiar with Android development, what steps might I take to investigate this issue further?

Flutter Device Preview equivalent in React Native App?

$
0
0

recently i've found this plugin can preview many device of Android or iOS device in one installed apps,

gif of the plugin is at https://github.com/aloisdeniel/flutter_device_preview

enter image description here

does react native has something like this?

I know there's some similar plugin like Expo and Appetize but i need something like this,

i mean i can preview of many device in my apps, not installing my app on many devices.

Is there a way to navigate to a default screen (Profile) if the path name does not match a route that I define explicitly?

$
0
0

I have tried writing the config object for my react native app according to the react-navigation configuring links docs.

I defined a series of path --> route mappings including Chat:'feed' and Explore:'news'

My goal is for the app to default to the Profile screen when resolving https://example.com/someusername and pass 'someusername' as the id param. Similar to how https://instagram.com/apple maps directly to the profile screen for @apple's account.

const linking = {  prefixes: ['https://example.com', 'example://'],  config: {    Home: {      path: '',      screens: {        Chat: 'feed',        Explore: 'news',        Profile: ':id',      },    },  },}

I will not allow users to make accounts @feed, @news, etc. to avoid conflict. I also display "user not found" message if 'someusername' does not exist yet

Is there a correct way to do this config object? Or if I need to write custom getStateFromPath / getPathFromState functions, does anyone have an example?

Using Alexa as Text-to-Voice service

$
0
0

I've build a React Native App which connects to different smart devices to control lights.I was wondering if there is way to connect my app with alexa echo and sending texts, which alexa speaks? Or even sending commands, which Alexa executes?

Is this possible? I don't find anythin similar on the internet.

Thanks

React native calculate network usage (Android & iOS)

$
0
0

I am currently developing a react native app integrating it with IPFS technology, I have an requirement to calculate network usage in my app, that is how much data is used while sending and receiving the information from IPFS.

I have searched for plugins, but was only able to get it for Android.

So, what I have thought is to get size of Bytes sent and received from my app and to calculate data usage based on it.. is this a correct approach to get the network usage stats of my app ?

If there is any another way available for both Android & iOS platforms (hopefully plugin as I am not an Native developer) then please suggest.

Thanks.

Viewing all 28469 articles
Browse latest View live