Dependency Errors When Building (Android)

[Jamie0]

I don't know if this bug also applies to trying to build on iOS, because I don't have an iOS device to test on.

I can't work out how to get Reparentable to install properly/build! I know the module is pre-release, but I'm guessing you're running it somewhere where it works :P When I run react-native run android, I receive errors such as:

* What went wrong:
A problem occurred evaluating project ':rn-reparentable'.
> Could not read script '/Users/jamie/Documents/Insanity/Code/com.insanityradio.player_v2/node_modules/rn-reparentable/node_modules/react-native/react.gradle' as it does not exist.

I'm installing rn-reparentable by npm install --save https://github.com/mfrachet/rn-reparentable (hack, I know). I'm not using yarn because of project requirements.

I can solve the initial issue by cd-ing to the project's root and running npm install to grab its dependencies. However, I am then unable to build for development:

:app:prepareComInsanityradioPlayer_v2ReactNativeVideoUnspecifiedLibrary UP-TO-DATE
:app:prepareComYqritcAndroidScalablevideoview104Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
Dependency com.insanityradio.player_v2:rn-reparentable:unspecified on project app resolves to an APK archive which is not supported as a compilation dependency. File: /Users/jamie/Documents/Insanity/Code/com.insanityradio.player_v2/node_modules/rn-reparentable/android/app/build/outputs/apk/rn-reparentable-release-unsigned.apk
Dependency com.insanityradio.player_v2:rn-reparentable:unspecified on project app resolves to an APK archive which is not supported as a compilation dependency. File: /Users/jamie/Documents/Insanity/Code/com.insanityradio.player_v2/node_modules/rn-reparentable/android/app/build/outputs/apk/rn-reparentable-release-unsigned.apk
:app:prepareDebugDependencies FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:prepareDebugDependencies'.
> Dependency Error. See console for details.

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

[mfrachet]

Hey!

Well... to be honest, the library isn't ready to use (and is not in pre-release at all 😅 ).

It doesn't even look like an android library but more of an android project.

In fact, only the code inside the library is working: it's the code taken from a project I've been working on. This repo is merely a copy / paste of the existing code that we've produced (and that worked) inside our application.

So if you want to use this lib (which is not one for now), you'd better copy the code or contribute and help me to make this work on android / ios as an external dependency.

Since I'm a web developer, I'm not used to the android / ios ecosystem. Language is the easy part of the job 😝

I hope this help you just a little 😅

[Jamie0]

Ah that's totally fair! I feel you on that one.

No worries at all. I'd love to see this project flourish and I'm sure that someone in the development community who has experience packaging React Native modules will contribute something.

Currently we're just hacking view position: absolutes to achieve the same effect. 😅

[mfrachet]

I m going to make some effort making it a real library 😄 . Leave me some time 😃

[mfrachet]

So here are the news: I've been working on it a little today and I've managed to create a branch https://github.com/mfrachet/rn-reparentable/tree/moving-to-lib where teleportation works on android only.

You can use the github url as a npm dependency for testing purpose if you'd like to.

Here's a really simple app that shows teleportation on the native side:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
import { PortalOrigin, PortalDestination } from "rn-native-portals";

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = { go: false };
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({ go: !this.state.go });
    }, 2000);
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.destination}>
          <PortalDestination name="go" style={{ height: 50 }} />
        </View>

        <View style={styles.source}>
          <PortalOrigin destination={this.state.go ? "go" : null}>
            <View style={styles.green}>
              <Text>Source</Text>
            </View>
          </PortalOrigin>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  green: {
    backgroundColor: "green",
    padding: 10
  },
  source: {
    backgroundColor: "blue",
    flex: 1,
    height: 70
  },
  destination: {
    backgroundColor: "red",
    flex: 1,
    height: 70
  },
  container: {
    flex: 1
  }
});

[mfrachet]

Let me know if I can close this issue 😊

[UtillYou]

Hi! Is this library ready to use?

[mfrachet]

Nop (in readme: This repository hasn't been published yet, I need some help to expose the native component to JS)

[UtillYou]

What kind help? Can you explain detaily? Maybe I can help.

[mfrachet]

Well, I've implemented the swift part but since react native doesn't support swift by default, I need some Obj-C wrappers and I don't know how to write them.

If you're interested to contribute 😊

[marabej]

Hi You did a good work, great component, but react-native-video (exoplayer) inside reloads the stream after it was "teleported" (HLS internet stream) react-native 0.57.3 rn-native-portals: git+https://github.com/mfrachet/rn-reparentable.git

best regards

[VincentCATILLON]

@marabej maybe try to have the seek value and set it after teleportation ?

[marabej]

Hi I'm using another way now, not with teleportation. I think with seek it'l be reloaded again, but interesting idea

[VincentCATILLON]

Can you share your other way ? I'm really interested :)

[marabej]

Hi I wanted to use react native navigation with ExoPlayer. One screen with small view and video inside and another screen with FullScreen video. In the beginning I teleported the video, but it reloaded. After that decided to not use another screen for FullScreen Video, but to remove the views around the small video. This is standard "react-way" solution. It works flawlessly. Video view resizes

[VincentCATILLON]

Oh ok, for my own, i used react-native-portal like this:

At root level (app.js):

const App = (props: Props) => (
  <Provider store={store}>
    <PortalProvider>
      [...MyApp...]
      {Platform.OS === 'android' && <VideoFullscreenListener />}
    </PortalProvider>
  </Provider>
);

The VideoFullscreenListener which listens a Redux state (video.isFullscreen):

// @flow

import * as React from 'react';
import {StyleSheet, StatusBar} from 'react-native';
import {connect} from 'react-redux';
import {WhitePortal} from 'react-native-portal';

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    zIndex: 9999
  }
});

type ConnectedStateProps = {|
  isFullscreen: boolean
|};

type Props = {|
  ...ConnectedStateProps
|};

const VideoFullscreenListener = ({isFullscreen}: Props) =>
  isFullscreen ? (
    <React.Fragment>
      <WhitePortal name="video" style={styles.container} />
      <StatusBar hidden />
    </React.Fragment>
  ) : null;

const mapStateToProps = ({video}: StoreState): ConnectedStateProps => ({
  isFullscreen: video.isFullscreen
});

export default connect(mapStateToProps)(VideoFullscreenListener);

And my Video component:

        <React.Fragment>
          <BlackPortal name="video">
            <VideoPlayer
              [...VideoProps and callbacks for fullscreen toggle to dispatch state changements...]
            />
          </BlackPortal>
          {(Platform.OS !== 'android' || !isFullScreen) && <WhitePortal name="video" />}
        </React.Fragment>