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

Image not rendering after upgrading react native version

$
0
0

I created a new project in react-native 0.61.5. My old project was runnning on 0.49.5.

My images in my view are no longer rendering, this is what I'm getting:

image of android emulator with no picture rendered where there should be a picture

After porting all my code from my old project to my new project and installing the necessary dependencies everything worked as expected with the exception of the rendering of the image. The image I'm using comes from a URI (URI still working in browser), and I'm fetching a new image every time an event is executing (swiping right)

Here is the code in question:

  renderCard = (card, index) => {
    // https://source.unsplash.com/featured/?{dog}
    return (
      <View style={styles.card}>
        <Text style={styles.text}>card: {card} index: {index}</Text>
        <Image style={{width: 400, height: 400}} source={{uri: 'https://source.unsplash.com/400x400/?dog/' + index}}/>
      </View>
    )
  };

Here is my render method that makes the call to the renderCard method above:

  render () {
    return (

      <View style={styles.container}>
        <View style={[styles.swiper]}>
        <Swiper
          ref={swiper => {
            this.swiper = swiper
          }}
          onSwiped={() => this.onSwiped('general')}
          onSwipedLeft={() => this.onSwiped('left')}
          onSwipedRight={() => this.onSwiped('right')}
          onSwipedTop={() => this.onSwiped('top')}
          onSwipedBottom={() => this.onSwiped('bottom')}
          onTapCard={this.swipeLeft}
          cards={this.state.cards}
          cardIndex={this.state.cardIndex}
          cardVerticalMargin     = {100}
          renderCard={this.renderCard}
          onSwipedAll={this.onSwipedAllCards}
          useViewOverflow    = {false}
          stackSize={3}
          stackSeparation={15}

          overlayLabels={{
            bottom: {
              title: 'BLEAH',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center'
                }
              }
            },
            left: {
              title: 'NOPEE',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'flex-end',
                  justifyContent: 'flex-start',
                  marginTop: 30,
                  marginLeft: -30
                }
              }
            },
            right: {
              title: 'LIKE',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'flex-start',
                  justifyContent: 'flex-start',
                  marginTop: 30,
                  marginLeft: 30
                }
              }
            },
            top: {
              title: 'SUPER LIKE',
              style: {
                label: {
                  backgroundColor: 'black',
                  borderColor: 'black',
                  color: 'white',
                  borderWidth: 1
                },
                wrapper: {
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center'
                }
              }
            }
          }}
          animateOverlayLabelsOpacity
          animateCardOpacity
          swipeBackCard
        >


        </Swiper>
        </View>
        <View style={[styles.rateBoxes]}>
          <Slider
            style={{width: 200, height: 40}}
            minimumValue={5}
            maximumValue={10}
          />
        </View>
      </View>
    )
  }
}

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?

TypeError: null is not an object (evaluating 'n.default.configureProps') React Native Jitsi Meet

$
0
0

I am facing an issue in my live react native app with JitsiMeet integration. I am using this library for jitsi-meet integration in my app. Now whenever I click on button to start video call via jitsi-meet,my app always crash with below logcats:

E/ReactNativeJS: TypeError: null is not an object (evaluating 'n.default.configureProps')
2019-11-30 11:54:10.587 28571-29151/com.telehealthcare E/ReactNativeJS: Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
2019-11-30 11:54:10.598 28571-29152/com.telehealthcare E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
    Process: com.telehealthcare, PID: 28571
    com.facebook.react.common.JavascriptException: TypeError: null is not an object (evaluating 'n.default.configureProps'), stack:
    s@555:2197
    <unknown>@555:2245
    v@2:1474
    <unknown>@500:734
    v@2:1474
    <unknown>@499:206
    v@2:1474
    <unknown>@498:271
    v@2:1474
    <unknown>@494:268
    v@2:1474
    <unknown>@493:1546
    v@2:1474
    <unknown>@383:171
    v@2:1474
    <unknown>@6:58
    v@2:1474
    d@2:876
    global code@1124:4

        at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:71)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:371)
        at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:150)
        at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
        at android.os.Handler.handleCallback(Handler.java:789)
        at android.os.Handler.dispatchMessage(Handler.java:98)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:26)
        at android.os.Looper.loop(Looper.java:164)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225)
        at java.lang.Thread.run(Thread.java:764)
2019-11-30 11:54:10.601 28571-29152/com.telehealthcare E/JitsiMeetSDK: JitsiMeetUncaughtExceptionHandler FATAL ERROR

Here is my videocall screen:

import React from 'react';
import { View } from 'react-native';
import JitsiMeet, { JitsiMeetView } from 'react-native-jitsi-meet';

class VideoCallScreen extends React.Component {
  constructor(props) {
    super(props);
    this.onConferenceTerminated = this.onConferenceTerminated.bind(this);
    this.onConferenceJoined = this.onConferenceJoined.bind(this);
    this.onConferenceWillJoin = this.onConferenceWillJoin.bind(this);
  }

  componentDidMount() {
    setTimeout(() => {
      // this.setState({data:this.props.navigation.state.params.data});  
      const url = this.props.navigation.state.params.callUrl;
      var isAudio = this.props.navigation.state.params.isAudio;

      console.log("VideoCallScreen url: " + url+"& isAudio: " + isAudio);

      if(isAudio){
        JitsiMeet.audioCall(url);
      } else {
        JitsiMeet.call(url);
      }
      /* You can programmatically end the call with JitsiMeet.endCall() */
    }, 1000);
  }

  onConferenceTerminated(nativeEvent) {
    /* Conference terminated event */
    console.log('onConferenceTerminated');
  }

  onConferenceJoined(nativeEvent) {
    /* Conference joined event */
    console.log('onConferenceJoined');
  }

  onConferenceWillJoin(nativeEvent) {
    /* Conference will join event */
    console.log('onConferenceWillJoin');
  }

  render() {
    return (
      <View style={{ backgroundColor: 'black',flex: 1 }}>
        <JitsiMeetView onConferenceTerminated={this.onConferenceTerminated} onConferenceJoined={this.onConferenceJoined} onConferenceWillJoin={this.onConferenceWillJoin} style={{ flex: 1, height: '100%', width: '100%' }} />
      </View>
    );
  }
}
export default VideoCallScreen;

Here is the code of button click:

var url = "https://my.url.app/" + finalName;
var {navigate} = this.props.navigation;
navigate('VideoCallScreen', {callUrl:url, isAudio:this.state.isAudioEnable})

Please help me where I am going wrong. Any help will be appreciated.

EDIT

Now, according to react-native-jitsi-meet manual installation guidelines, I added below code to my app/build.gradle:

project.ext.react = [
    entryFile: "index.js",
    bundleAssetName: "app.bundle",// This line
]

Added this code to MainApplication.java:

@Override
          protected @Nullable String getBundleAssetName() {
              return "app.bundle";
          }

Now, app is always crashes on start with this logs:

java.lang.RuntimeException: Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'app.bundle' is packaged correctly for release.
        at com.facebook.react.bridge.CatalystInstanceImpl.jniLoadScriptFromAssets(Native Method)
        at com.facebook.react.bridge.CatalystInstanceImpl.loadScriptFromAssets(CatalystInstanceImpl.java:227)
        at com.facebook.react.bridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:28)
        at com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:261)
        at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1175)
        at com.facebook.react.ReactInstanceManager.access$1000(ReactInstanceManager.java:125)
        at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:951)
        at java.lang.Thread.run(Thread.java:764)

Any solution for this error?

React Native: Resize custom UI component

$
0
0

I've built a very simple native Android UI component and I want to update the size of its child view when a button from my react native project is clicked. To be more precise, when this button is clicked then I send a command to my SimpleViewManager which in turn calls the resizeLayout() of my custom view.

I can verify that the resizeLayout() is properly called but the layout is not resized until I rotate the phone. Obviously, changing the device's orientation triggers the draw() of my custom view but so does the invalidate() which I explicitly call.

Other layout changes like changing the background color instead of resizing it work fine.

My custom component looks like this:

public class CustomComponent extends RelativeLayout {
    public CustomComponent(Context context) {
        super(context);
        init();
    }

    public CustomComponent(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomComponent(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        inflate(getContext(), R.layout.simple_layout, this);
    }

    public void resizeLayout(){
        LinearLayout childLayout = (LinearLayout) findViewById(R.id.child_layout);
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) childLayout.getLayoutParams();
        layoutParams.height = 50;
        layoutParams.width= 50;
        childLayout.setLayoutParams(layoutParams);

        invalidate();
    }
}

and the simple_layout.xml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/child_layout"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="#ffee11"/>
</RelativeLayout>

Any help would be greatly appreciated.

change button of react native header if data exist

$
0
0

I want to check if data exist, If data exist then to show red button and if there is no data then it will show blue button. I tried to do that but its not working . For example Instagram go to DM's button if there are any DM , button change to different color with number of DM's unread and if there is no Dm's then it is simple button.

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    const { notifications } = this.props.notification;

      return {
        headerRight: (
          <View>
            {
              (notifications.length > 0) ? (
                <TouchableOpacity onPress={() => params.handleSave()}>
                  <Badge>
                    <Text>{notifications.length}</Text>
                  </Badge>
                </TouchableOpacity>
              ) : (
                  <TouchableOpacity onPress={() => params.handleSave()}>
                    <Ionicons
                      name="ios-notifications-outline"
                      style={{ paddingRight: 15 }}
                      size={24}
                      color="white"
                    />
                  </TouchableOpacity>
                )
            }
          </View>
        )
      };
    }

(React Native Expo) How to remove AMPLITUDE SDK from my apk file?

$
0
0

I have made a simple quiz game using Expo CLI where user guesses what’s on the picture and enters the answer. I wanted to upload my app to Amazon Apps since Google Play wasn’t free but when I uploaded, they told me that I have to remove AMPLITUDE SDK from my apk which I didn’t know even existed at all. Expo CLI apparently has installed additional libraries inside my apk which I don’t know. How can I remove it without too much work? Help please :)

Ubuntu, can not start react-native: Could not find tools.jar

$
0
0

I followed the getting started guide Android/Linux.

I try to start react native under ubuntu using react-native run-android, but it fails with the error:

FAILURE: Build failed with an exception.

    * What went wrong:
    Execution failed for task ':app:compileDebugJavaWithJavac'.
    > Could not find tools.jar  

How can I fix it?

Full output:

 $ react-native run-android
    Starting JS server...
    /bin/sh: 1: adb: not found
    Building and installing the app on the device (cd android && ./gradlew installDebug...
    :app:preBuild UP-TO-DATE
    :app:preDebugBuild UP-TO-DATE
    :app:checkDebugManifest
    :app:preReleaseBuild UP-TO-DATE
    :app:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
    :app:prepareComAndroidSupportRecyclerviewV72301Library UP-TO-DATE
    :app:prepareComAndroidSupportSupportV42321Library UP-TO-DATE
    :app:prepareComFacebookFrescoDrawee0110Library UP-TO-DATE
    :app:prepareComFacebookFrescoFbcore0110Library UP-TO-DATE
    :app:prepareComFacebookFrescoFresco0110Library UP-TO-DATE
    :app:prepareComFacebookFrescoImagepipeline0110Library UP-TO-DATE
    :app:prepareComFacebookFrescoImagepipelineBase0110Library UP-TO-DATE
    :app:prepareComFacebookFrescoImagepipelineOkhttp30110Library UP-TO-DATE
    :app:prepareComFacebookReactReactNative0361Library UP-TO-DATE
    :app:prepareComFacebookSoloaderSoloader010Library UP-TO-DATE
    :app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
    :app:prepareDebugDependencies
    :app:compileDebugAidl UP-TO-DATE
    :app:compileDebugRenderscript UP-TO-DATE
    :app:generateDebugBuildConfig UP-TO-DATE
    :app:generateDebugAssets UP-TO-DATE
    :app:mergeDebugAssets UP-TO-DATE
    :app:generateDebugResValues UP-TO-DATE
    :app:generateDebugResources UP-TO-DATE
    :app:mergeDebugResources UP-TO-DATE
    :app:bundleDebugJsAndAssets SKIPPED
    :app:processDebugManifest UP-TO-DATE
    :app:processDebugResources UP-TO-DATE
    :app:generateDebugSources UP-TO-DATE
    :app:processDebugJavaRes UP-TO-DATE
    :app:compileDebugJavaWithJavac FAILED

    FAILURE: Build failed with an exception.

    * What went wrong:
    Execution failed for task ':app:compileDebugJavaWithJavac'.
    > Could not find tools.jar

Running echo $JAVA_HOME gives /usr/lib/jvm/java-8-openjdk-amd64

How to build debug apk in react native

$
0
0

enter image description hereI want to build unsigned apk or debug apk. My application is successfully running on localhost. I have tried different methods. But it shows the error. I have got the answer from Here . when applying the command

 react-native bundle --dev false --platform android --entry-file index.android.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug

It showing the error is

Cannot find entry file index.android.js in any of the roots: ["D:\\workspace\\reactjs\\native\\myapp5"]

Then i have change index.android.js to App.js

Then it will showing the error is

ENOENT: no such file or directory, open 'D:\workspace\reactjs\native\myapp5\android\app\build\intermediates\assets\debug\index.android.bundle'

How to solve this problem? Please help me.

My react native versions are react-native-cli: 2.0.1 , react-native: 0.52.0 . Screenshot of my root folder i have posted.

when i run gradlew assembleDebug in android folder it showing the error.

enter image description here


Unable to scroll pdf file in android app used react-native-pdf

$
0
0

I have used react-native-pdf in my app and we want to scroll that pdf within the app however it is working fine in on ios but in android, it is not scrolling completely scroll up to 4 pages. there are 20 pages in the pdf. I have used the below code in my app:-

render () {
    const source = require('./../../../assets/assets/pdfs/pdfname.pdf');
    return (
      <View style={styles.container}>
          <Pdf
              source={source}
              onLoadComplete={(numberOfPages,filePath)=>{
                  console.log(`number of pages: ${numberOfPages}`);
              }}
              onPageChanged={(page,numberOfPages)=>{
                  console.log(`current page: ${page}`);
              }}
              onError={(error)=>{
                  console.log(error);
              }}
              style={styles.pdf}/>
      </View>
  )

  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginTop: 5,
  },
  pdf: {
      flex:1,
      width:Dimensions.get('window').width - 20,
  }
});

render () {
    const source = require('./../../../assets/assets/pdfs/ebook_1.pdf');
    return (
      <View style={styles.container}>
          <Pdf
              source={source}
              onLoadComplete={(numberOfPages,filePath)=>{
                  console.log(`number of pages: ${numberOfPages}`);
              }}
              onPageChanged={(page,numberOfPages)=>{
                  console.log(`current page: ${page}`);
              }}
              onError={(error)=>{
                  console.log(error);
              }}
              style={styles.pdf}/>
      </View>
  )

  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginTop: 5,
  },
  pdf: {
      flex:1,
      width:Dimensions.get('window').width - 20,
  }
});

I expect that my pdf scroll completely within the app.

React Native Maps - OnRegionChange stutters the map

$
0
0

I'm having a weird issue with the React Native Maps library. At the moment when I follow all the documentation correctly, every time I move the map, it appears to stutter and move back to the original location. Or sporadically it will move to the location I want to (With stutter)

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import MapView from "react-native-maps";
import Geolocation from 'react-native-geolocation-service';
import {YellowBox} from 'react-native';

type Props = {};
export default class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            region: {
                latitude: 53.41058,
                longitude: -2.97794,
                latitudeDelta: 0.1,
                longitudeDelta: 0,
            }
        }
    }

    componentDidMount() {
        Geolocation.getCurrentPosition(
            (position) => {
                console.warn(position.coords.latitude);
                console.warn(position.coords.longitude);
                this.setState({
                    region: {
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude,
                        latitudeDelta: 0.02,
                        longitudeDelta: 0,
                    }
                });
            },
            (error) => {
                console.warn(error.code, error.message);
            },
            {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000},
        )
    }

    onRegionChange(region) {
        this.setState({
            region: region
        });
    }

    render() {
        return (
            <MapView
                style={styles.map}
                region={this.state.region}
                showsUserLocation={true}
                onRegionChange={region => {
                    this.setState({region});
                }}
            />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    map: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
});

However, if I change onRegionChange to onRegionChangeCompleted, I can move around the map just fine. But then I cannot tilt and when I turn the map using my fingers it will sometimes snap back to the original location.

Has anyone else had this weird issue or is there something I'm doing wrong?

regenerating Android & IOS folders inside react native project

$
0
0

I removed Android & IOS folder , to recreate them again

however I can't find a way in RN version 0.61.5 to return these folders again

react-native eject> is not working react-native upgrade --legacy true> error: unknown option `--legacy' react-native upgrade > Specified version "0.61.5" is already installed in node_modules and it satisfies "0.61.5" semver range. No need to upgrade

any modern solution ?

How to place floating action button in bottom right in React Native

$
0
0

I am trying to place a floating action button in the lower right corner of my app but it is placing it in the top left way off screen.

Returned view:

<View>
   <View style={{flexDirection: 'row'}}>
      <TouchableOpacity onPress={this.onPress} activeOpacity={.5} >
          <Image
              source={require('./assets/images/hamburger.png')}
              style={{ width: 30, height: 25,  marginLeft: 15}}
          />
      </TouchableOpacity>
   </View>
   <FloatingAction style={styles.bottom}/>
</View>

Styles:

const styles = StyleSheet.create({
  bottom: {
    flex: 1,
    position: 'absolute',
    bottom: 10,
    right:10
  },
});

My current view displays a header and a bottom tab view. I am able to place multiple FAB's in each tab screen but that produces an undesirable behavior. Thank you for any help.

Edit: What I have:

What I want:

Form in card body not visible with NativeBase

$
0
0

I try using below code (a Form inside a Card component)

<Card>
   <CardItem header style={{ backgroundColor: 'lightgray' }}>
   <Right>
      <Text>This is Right align text </Text>
   </Right>
   <Badge primary>
      <Text>step 1</Text>
   </Badge>
   </CardItem>
   <CardItem>
      <Body>
         <Text style={{color: 'red'}}>{this.state.error}</Text>
         <Form style={{alignSelf: 'stretch'}}>
         <Item>
            <Label>number:</Label>
            <Input keyboardType="numeric"/>
         </Item>
         <Item>
            <Label>date:</Label>
            <Input />
         </Item>
         <Item>
            <Label>number 2:</Label>
            <Input keyboardType="numeric"/>
         </Item>
         <Item>
            <Label>date 2:</Label>
            <Input />
         </Item>
         <Button success block
            >
            <Text>submit</Text>
            <Icon name='check' size={20} color="#FFFFFF"/>
         </Button>
         </Form>
      </Body>
   </CardItem>
</Card>

But in my device Nexus 7 Tab with android 5 footer not visible. Do you have any suggestion for find the issue and fix it? I'm using NativeBase 2.0.12 and React-Native 0.42.0.

screenshot_2017-03-22-12-00-35

I think it's maybe related to this issue: https://github.com/GeekyAnts/NativeBase/issues/668

Try 1: I change my code a little and add style={{backgroundColor: 'red'}} for CardItem that not appear and find it on the outer card component. This is my new code:

<Card>
   <CardItem header style={{ backgroundColor: 'lightgray' }}>
   <Right>
      <Text>This is Right align text </Text>
   </Right>
   <Badge primary>
      <Text>step 1</Text>
   </Badge>
   </CardItem>
   <CardItem style={{backgroundColor: 'red'}}>
   <Body>
      <Text style={{color: 'red'}}>{this.state.error}</Text>
      <Form style={{alignSelf: 'stretch'}}>
      <Item>
         <Label>number:</Label>
         <Input keyboardType="numeric"/>
      </Item>
      <Item>
         <Label>date:</Label>
         <Input />
      </Item>
      <Item>
         <Label>number 2:</Label>
         <Input keyboardType="numeric"/>
      </Item>
      <Item>
         <Label>date 2:</Label>
         <Input />
      </Item>
      <Button success block
         >
         <Text>submit</Text>
         <Icon name='check' size={20} color="#FFFFFF"/>
      </Button>
      </Form>
   </Body>
   </CardItem>
</Card>

And this is new screenshot: screenshot_2017-03-22-18-27-22

When I remove Form component from CardItem it's render successfully like below:

<Card>
   <CardItem header style={{ backgroundColor: 'lightgray' }}>
   <Right>
      <Text>This is Right align text </Text>
   </Right>
   <Badge primary>
      <Text>step 1</Text>
   </Badge>
   </CardItem>
   <CardItem style={{backgroundColor: 'red'}}>
   <Body>
      <Text style={{color: 'red'}}>{this.state.error}</Text>
   </Body>
   </CardItem>
</Card>

screenshot_2017-03-22-18-32-42

Why we can't use Form inside CardItem? Is it an undocumented limitation of Card component?

Why Android header does not change color in React Native?

$
0
0

I implemented a dark mode in my app by screenProps. On iOS it works fine, everything changes color on Android except the header navigator. I have a darkMode boolean screenProps so I set my Views and Text elements to change when this variable changes in the App.js and it's great but I can not make it work with the header. But also the header title should change color but it does not.

enter image description here

This is the defaultNavigationOptions which works on iOS but not on Android

  {
    defaultNavigationOptions: ({navigation, screenProps}) => ({
    headerStyle: {
      borderBottomColor: '#CED0CE',
      backgroundColor: screenProps.darkMode ? "#212121" : "#fff"
      ,elevation: 0,
      shadowOpacity: 0,
    },
  }),
  }

And I have this navigationOptions in my screen that also not working, so all my troubles are with the navigation header, but for example the Drawer navigator and bottom navigator changes color with o problem so that's why I don not understand.

  static navigationOptions = ({navigation, screenProps}) => {
    return {
      headerTitle: (
        <HeaderTitle text={'Népszerű'} darkMode={screenProps.darkMode} />
      ),
      headerLeft: <MenuIcon openDrawer={() => navigation.toggleDrawer()} />,
      headerRight: (
        <HeaderProfileImage
          image={{uri: URL + '/media/' + screenProps.profile_image}}
          navigate={() =>
            navigation.navigate('Profile', {
              current_profile: true,
            })
          }
        />
      ),
    };
  };

Also weird that the profile image as screenProps loads perfectly so it is not the problem.

error while generating apk file from react native

$
0
0
> Task :app:bundleReleaseJsAndAssets FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:bundleReleaseJsAndAssets'.
> Process 'command 'npx.cmd'' finished with non-zero exit value 1

* 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 1m 33s
1 actionable task: 1 executed

transformClassesWithDexBuilderForDebug error at build

$
0
0

My React Native app was working yesterday.

I was working on a new version and wanted to push it to the Google Play Store. I tried fixing the library version for facebook and for react-native-fetch-blob.

I have been having this error for 6 hours now at build.

/Users/nicoara/Documents/GitHub/Parkour/node_modules/react-native-firebase/android/build/intermediates/intermediate-jars/debug/classes.jar: D8: Interface `com.google.android.gms.ads.reward.RewardedVideoAdListener` not found. It's needed to make sure desugaring of `io.invertase.firebase.admob.RNFirebaseAdMobRewardedVideo` is correct. Desugaring will assume that this interface has no default method.

> Task :app:transformClassesWithDexBuilderForDebug
com.android.builder.dexing.DexArchiveBuilderException: com.android.builder.dexing.DexArchiveBuilderException: Failed to process /private/var/root/.gradle/caches/modules-2/files-2.1/org.robolectric/robolectric-utils/3.1.4/803d061ec7bd2ad78bcb74fb10caaeeb2dc4a74a/robolectric-utils-3.1.4.jar
        at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
        at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
        at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
        at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
        at java.util.concurrent.ForkJoinTask.getThrowableException(ForkJoinTask.java:593)
        at java.util.concurrent.ForkJoinTask.reportException(ForkJoinTask.java:677)
        at java.util.concurrent.ForkJoinTask.join(ForkJoinTask.java:720)
        at com.android.ide.common.internal.WaitableExecutor.waitForTasksWithQuickFail(WaitableExecutor.java:146)
        at com.android.build.gradle.internal.transforms.DexArchiveBuilderTransform.transform(DexArchiveBuilderTransform.java:420)
        at com.android.build.gradle.internal.pipeline.TransformTask$2.call(TransformTask.java:239)
        at com.android.build.gradle.internal.pipeline.TransformTask$2.call(TransformTask.java:235)
        at com.android.builder.profile.ThreadRecorder.record(ThreadRecorder.java:102)
        at com.android.build.gradle.internal.pipeline.TransformTask.transform(TransformTask.java:230)
        at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
        at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
        at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
        at java.lang.reflect.Method.invoke(Method.java:498)
        at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:73)
        at org.gradle.api.internal.project.taskfactory.IncrementalTaskAction.doExecute(IncrementalTaskAction.java:50)
        at org.gradle.api.internal.project.taskfactory.StandardTaskAction.execute(StandardTaskAction.java:39)
        at org.gradle.api.internal.project.taskfactory.StandardTaskAction.execute(StandardTaskAction.java:26)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter$1.run(ExecuteActionsTaskExecuter.java:131)
        at org.gradle.internal.operations.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:300)
        at org.gradle.internal.operations.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:292)
        at org.gradle.internal.operations.DefaultBuildOperationExecutor.execute(DefaultBuildOperationExecutor.java:174)
        at org.gradle.internal.operations.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:90)
        at org.gradle.internal.operations.DelegatingBuildOperationExecutor.run(DelegatingBuildOperationExecutor.java:31)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeAction(ExecuteActionsTaskExecuter.java:120)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeActions(ExecuteActionsTaskExecuter.java:99)
        at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.execute(ExecuteActionsTaskExecuter.java:77)
        at org.gradle.api.internal.tasks.execution.OutputDirectoryCreatingTaskExecuter.execute(OutputDirectoryCreatingTaskExecuter.java:51)
        at org.gradle.api.internal.tasks.execution.SkipUpToDateTaskExecuter.execute(SkipUpToDateTaskExecuter.java:59)
        at org.gradle.api.internal.tasks.execution.ResolveTaskOutputCachingStateExecuter.execute(ResolveTaskOutputCachingStateExecuter.java:54)
        at org.gradle.api.internal.tasks.execution.ValidatingTaskExecuter.execute(ValidatingTaskExecuter.java:59)
        at org.gradle.api.internal.tasks.execution.SkipEmptySourceFilesTaskExecuter.execute(SkipEmptySourceFilesTaskExecuter.java:101)
        at org.gradle.api.internal.tasks.execution.FinalizeInputFilePropertiesTaskExecuter.execute(FinalizeInputFilePropertiesTaskExecuter.java:44)
        at org.gradle.api.internal.tasks.execution.CleanupStaleOutputsExecuter.execute(CleanupStaleOutputsExecuter.java:91)
        at org.gradle.api.internal.tasks.execution.ResolveTaskArtifactStateTaskExecuter.execute(ResolveTaskArtifactStateTaskExecuter.java:62)
        at org.gradle.api.internal.tasks.execution.SkipTaskWithNoActionsExecuter.execute(SkipTaskWithNoActionsExecuter.java:59)
        at org.gradle.api.internal.tasks.execution.SkipOnlyIfTaskExecuter.execute(SkipOnlyIfTaskExecuter.java:54)
        at org.gradle.api.internal.tasks.execution.ExecuteAtMostOnceTaskExecuter.execute(ExecuteAtMostOnceTaskExecuter.java:43)
        at org.gradle.api.internal.tasks.execution.CatchExceptionTaskExecuter.execute(CatchExceptionTaskExecuter.java:34)
        at org.gradle.api.internal.tasks.execution.EventFiringTaskExecuter$1.run(EventFiringTaskExecuter.java:51)
        at org.gradle.internal.operations.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:300)
        at org.gradle.internal.operations.DefaultBuildOperationExecutor$RunnableBuildOperationWorker.execute(DefaultBuildOperationExecutor.java:292)
        at org.gradle.internal.operations.DefaultBuildOperationExecutor.execute(DefaultBuildOperationExecutor.java:174)
        at org.gradle.internal.operations.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:90)
        at org.gradle.internal.operations.DelegatingBuildOperationExecutor.run(DelegatingBuildOperationExecutor.java:31)
        at org.gradle.api.internal.tasks.execution.EventFiringTaskExecuter.execute(EventFiringTaskExecuter.java:46)
        at org.gradle.execution.taskgraph.LocalTaskInfoExecutor.execute(LocalTaskInfoExecutor.java:42)
        at org.gradle.execution.taskgraph.DefaultTaskExecutionGraph$BuildOperationAwareWorkItemExecutor.execute(DefaultTaskExecutionGraph.java:277)
        at org.gradle.execution.taskgraph.DefaultTaskExecutionGraph$BuildOperationAwareWorkItemExecutor.execute(DefaultTaskExecutionGraph.java:262)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$ExecutorWorker$1.execute(DefaultTaskPlanExecutor.java:135)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$ExecutorWorker$1.execute(DefaultTaskPlanExecutor.java:130)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$ExecutorWorker.execute(DefaultTaskPlanExecutor.java:200)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$ExecutorWorker.executeWithWork(DefaultTaskPlanExecutor.java:191)
        at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$ExecutorWorker.run(DefaultTaskPlanExecutor.java:130)
        at org.gradle.internal.concurrent.ExecutorPolicy$CatchAndRecordFailures.onExecute(ExecutorPolicy.java:63)
        at org.gradle.internal.concurrent.ManagedExecutorImpl$1.run(ManagedExecutorImpl.java:46)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
        at org.gradle.internal.concurrent.ThreadFactoryImpl$ManagedThreadRunnable.run(ThreadFactoryImpl.java:55)
        at java.lang.Thread.run(Thread.java:748)
Caused by: com.android.builder.dexing.DexArchiveBuilderException: Failed to process /private/var/root/.gradle/caches/modules-2/files-2.1/org.robolectric/robolectric-utils/3.1.4/803d061ec7bd2ad78bcb74fb10caaeeb2dc4a74a/robolectric-utils-3.1.4.jar
        at com.android.build.gradle.internal.transforms.DexArchiveBuilderTransform.launchProcessing(DexArchiveBuilderTransform.java:909)
        at com.android.build.gradle.internal.transforms.DexArchiveBuilderTransform.lambda$convertToDexArchive$6(DexArchiveBuilderTransform.java:834)
        at java.util.concurrent.ForkJoinTask$AdaptedCallable.exec(ForkJoinTask.java:1424)
        at java.util.concurrent.ForkJoinTask.doExec(ForkJoinTask.java:289)
        at java.util.concurrent.ForkJoinPool$WorkQueue.runTask(ForkJoinPool.java:1056)
        at java.util.concurrent.ForkJoinPool.runWorker(ForkJoinPool.java:1692)
        at java.util.concurrent.ForkJoinWorkerThread.run(ForkJoinWorkerThread.java:157)
Caused by: com.android.builder.dexing.DexArchiveBuilderException: Error while dexing.
        at com.android.builder.dexing.D8DexArchiveBuilder.getExceptionToRethrow(D8DexArchiveBuilder.java:124)
        at com.android.builder.dexing.D8DexArchiveBuilder.convert(D8DexArchiveBuilder.java:101)
        at com.android.build.gradle.internal.transforms.DexArchiveBuilderTransform.launchProcessing(DexArchiveBuilderTransform.java:904)
        ... 6 more
Caused by: com.android.tools.r8.CompilationFailedException: Compilation failed to complete
        at com.android.tools.r8.utils.ExceptionUtils.withCompilationHandler(ExceptionUtils.java:70)
        at com.android.tools.r8.utils.ExceptionUtils.withD8CompilationHandler(ExceptionUtils.java:43)
        at com.android.tools.r8.D8.run(D8.java:94)
        at com.android.builder.dexing.D8DexArchiveBuilder.convert(D8DexArchiveBuilder.java:99)
        ... 7 more
Caused by: com.android.tools.r8.utils.AbortException: Error: MethodHandle.invoke and MethodHandle.invokeExact are only supported starting with Android O (--min-api 26)
        at com.android.tools.r8.utils.Reporter.failIfPendingErrors(Reporter.java:89)
        at com.android.tools.r8.utils.Reporter.fatalError(Reporter.java:60)
        at com.android.tools.r8.utils.ExceptionUtils.withCompilationHandler(ExceptionUtils.java:64)
        ... 10 more


> Task :app:transformClassesWithDexBuilderForDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:transformClassesWithDexBuilderForDebug'.
> com.android.build.api.transform.TransformException: com.android.builder.dexing.DexArchiveBuilderException: com.android.builder.dexing.DexArchiveBuilderException: Failed to process /private/var/root/.gradle/caches/modules-2/files-2.1/org.robolectric/robolectric-utils/3.1.4/803d061ec7bd2ad78bcb74fb10caaeeb2dc4a74a/robolectric-utils-3.1.4.jar

Here is my environment:

Nicoaras-MBP:Parkour nicoara$ react-native info
info 
  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (8) x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
      Memory: 41.30 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.10.0 - /usr/local/bin/node
      Yarn: 1.5.1 - /usr/local/bin/yarn
      npm: 5.6.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        API Levels: 21, 23, 25, 26, 27, 28, 29
        Build Tools: 23.0.1, 25.0.1, 25.0.3, 26.0.2, 27.0.3, 28.0.3, 29.0.2
        System Images: android-25 | Google Play Intel x86 Atom, android-27 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.5977832
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.5 => 16.8.5 
      react-native: 0.59.0 => 0.59.0 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-create-library: 3.1.2

it might be because "react-native-fbsdk": "^0.7.0", so I attach the gradle:

apply plugin: 'com.android.library'

android {
    compileSdkVersion 28
    buildToolsVersion "26.0.2"

    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 28
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    api "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    api 'com.facebook.react:react-native:+' // support react-native-v0.22-rc+
    api 'com.facebook.android:facebook-android-sdk:4.25.0'
}

repositories {
    mavenCentral()
    jcenter()
    maven {
        url 'https://maven.google.com/'
        name 'Google'
    }
}

my package-json:

{
  "rnpm": {
    "assets": [
      "resources/fonts"
    ]
  },
  "name": "parkour",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "devtools": "react-devtools"
  },
  "dependencies": {
    "MyThumbnailLibrary": "file:./MyThumbnailLibrary",
    "firebase-functions": "^2.3.1",
    "moment": "^2.22.2",
    "node-pre-gyp": "^0.10.0",
    "react": "16.8.5",
    "react-native": "0.59.0",
    "react-native-app-intro-slider": "^0.2.4",
    "react-native-autolink": "^1.4.0",
    "react-native-contacts": "^3.1.2",
    "react-native-datepicker": "^1.7.2",
    "react-native-dialog": "^5.5.0",
    "react-native-emoji-selector": "^0.1.6",
    "react-native-fbsdk": "^0.7.0",
    "react-native-fetch-blob": "^0.10.8",
    "react-native-firebase": "5.3.0",
    "react-native-geocoding": "^0.3.0",
    "react-native-image-picker": "^0.26.10",
    "react-native-image-resizer": "^1.0.0",
    "react-native-image-zoom-viewer": "^2.2.12",
    "react-native-keyboard-aware-scroll-view": "^0.6.0",
    "react-native-localization": "^2.0.3",
    "react-native-maps": "^0.22.0",
    "react-native-navigation": "^1.1.440",
    "react-native-picker-select": "^4.4.0",
    "react-native-rate": "^1.1.6",
    "react-native-ux-cam": "^5.1.11",
    "react-native-vector-icons": "^4.6.0",
    "react-native-version-number": "^0.3.4",
    "react-native-video": "4.4.2",
    "react-native-video-processing": "^1.20.0",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "babel-jest": "22.2.0",
    "babel-preset-react-native": "5.0.2",
    "eslint-config-rallycoding": "^3.2.0",
    "jest": "24.1.0",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

'installDebug' not found in root project 'android' React Native

$
0
0

I am trying to run my project on the android simulator. When I run react-native run-android I am getting the following:

FAILURE: Build failed with an exception.

* What went wrong: Task 'installDebug' 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.

BUILD FAILED

If I run ./gradlew tasks I get:

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

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'.
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'.

Any idea why I don't have a installDebug task in my project? How do I get it back?

Execution failed for task ':app:transformDexArchiveWithDexMergerForDebug'. - React Native

$
0
0

I have App written with react-native and it's work very fine previously but when I install RN async-storage. I don't change anything in native android code

I got an error when running the app.

I'm trying to remove it and rebuild my app BUT the issue still I don't know why!

I'm tried to run these command

rm -rf node_modules 
npm install

then

cd android && gradlew clean

and it's building successfully without any error

but after run react-native run-android

I got

What went wrong: Execution failed for task ':app:transformDexArchiveWithDexMergerForDebug'. com.android.build.api.transform.TransformException: java.lang.RuntimeException: java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives: The number of method references in a .dex file cannot exceed 64K. Learn how to resolve this issue at https://developer.android.com/tools/building/multidex.html

So how can I solve it?

Why is android looking for RNCGeolocation when I use react-native-geolocation-service?

$
0
0

Trying to get an android version of a react-native 0.61.2 app running...

The app intends to use react-native-geolocation-service but can not get past this error:

"Error: @react-native-community/geolocation: NativeModule.RNCGeolocation is null."

enter image description here

I understand that react-native-geolocation-service uses @react-native-community/geolocation on iOS but this is android. I have searched the entire project for the string RNCGeolocation and it's not there. How can I get running with react-native-geolocation-service on android?

react native autocomplete dropdown like android AutoCompleteTextView

$
0
0

is there libs or components for reactnative that looks like android's AutoCompleteTextView i couldn't find any. there are some libs but they all have problems or they don't look like android AutoCompleteTextView. how can i build one for myself?

Viewing all 28476 articles
Browse latest View live


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