zenyr / react-native-portal Goto Github PK

Expected Behavior

An image with base64 uri that is passed as a child to BlackPortal renders just like an image with url in it's uri

Current Behavior

Image with base64 uri doesn't render at all

Steps to Reproduce

https://snack.expo.io/HyrG0o7Kf

Current behaviour

• I unmount BlackPortal, but it's children are displayed in WhitePortal after this event.

Expected behaviour

• I unmount BlackPortal, it's children should be "removed" from WhitePortal

From code, I see BlackPortal does not emit on unmount. Would this solve the issue?

Just curious why the repo is deprecated. Are there any alternatives out there?

My React Native version is 0.33
and it seems this bug was fixed in 0.54, but i have not checked.
facebook/react-native#18403

Here is My Component

<Comp>
      <BlackPortal name="wow">
        <TextInput
          style={{ backgroundColor: 'gray', borderWidth: 2, borderColor: 'blue', height: 80, flex: 1 }}
          onChangeText={this.onChangeText}
          value={this.state.value}
        />
      </BlackPortal>
</Comp>

and AppRoot

<AppRoot>
   <Comp />
   <WhitePortal name="wow"></WhitePortal>
</AppRoot>

and there is a bug in not-english Keyboards, while mine is Chinese (Simplified) -Pinyin
look at

and i also try Korean

the same bug, only in English , it can be worked well

Actually, i found this bug, because i have written an Portal very likely with your's, here is an simply
code

import { View } from 'react-native';
import React, { Component } from 'react';
import mitt from 'mitt';

let uuid = 0;
const mitter = mitt();


const sendPortal = (uuidReactChildren) => {
  mitter.emit('portal_on_change', uuidReactChildren);
};

const rmPortal = (uuid) => {
  mitter.emit('portal_rm', uuid);
};



export default class Portal extends Component {
  constructor(props) {
    super(props);
    this.uuid = uuid++;
  }
  componentDidMount() {
    sendPortal({ children: this.props.children, uuid: this.uuid });
  }
  componentWillUpdate(nextProps) {
    sendPortal({ children: nextProps.children, uuid: this.uuid });
  }
  componentWillUnmount() {
    rmPortal(this.uuid);
  }
  render() {
    return null;
  }
}

const styleHelper = (isNull) => {
  if (isNull) {
    return {
      position: 'absolute',
      height: 0,
      width: 0,
    };
  }

  return {
    position: 'absolute',
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
  };
};

export class PortalOut extends Component { // eslint-disable-line
  constructor(props) {
    super(props);
    this.state = {
      portals: [
        // {
        //   uuid: 'string',
        //   children: 'ReactChildren',
        // },
      ],
    };

    mitter.on('portal_on_change', (uuidReactChildren) => {
      const portals = this.state.portals;
      const uuid = uuidReactChildren.uuid;
      const reactChildren = uuidReactChildren.children;

      if (portals.some(protal => protal.uuid === uuid)) {
        portals.forEach((protal) => {
          if (protal.uuid === uuid) {
            protal.children = reactChildren;
          }
        });
        this.setState({ portals });
      } else {
        portals.push(uuidReactChildren);
        this.setState({ portals });
      }
    });
    mitter.on('portal_rm', (uuid) => {
      const portals = this.state.portals;
      const foundIndex = portals.findIndex(portal => portal.uuid === uuid);
      portals.splice(foundIndex, 1);
      this.setState({ portals });
    });
  }

  render() {
    const isNull = this.state.portals.filter(portal => !!portal.children).length === 0;
    return (React.createElement(View,
      { style: styleHelper(isNull) },
      this.state.portals.map(item => item.children)
    ));
  }
}

I cannot found how to resolve it. Hope you can found something and tell me.
Really Hope.

Hi,

I'm considering using this library for my React Native project, because the implementation looks really simple and straightforward.

However, upon reviewing the code, I noticed that PortalProvider uses state to store the current implementation for each portal name. What worries me is that changing the state usually triggers re-renders of everything that's under it. Considering that PortalProvider would usually way up in the application component tree, this could mean triggering re-renders of the whole application, i.e. things that are not at all involved in with the relevant WhitePortal or BlackPortal.

Would it make sense to store the current implementation as a local variable bound to the PortalProvider object itself? In other words:

  portalSet = (name, value) => {
    const emitter = this._emitter;
    this.implementations[name] = value
    emitter && emitter.emit(name)
  };

  portalGet = name => this.implementations[name] || null

My understanding is that the necessary renders would still happen because we have explicit forceUpdates in WhitePortal. Shouldn't that be enough?

I upgraded from v1.0.2 to v1.1.1 and react-native v0.46.4 app failed with red screen and error message React is not defined. Downgraded to v1.0.2 and everything is working again. So I guess something is wrong with rollup build?

Would you accept and publish a pull request so we could get rid of

Warning: componentWillMount has been renamed

deprecation warning.

Hi, I've been trying to use this with react-native-video, to keep video playing while allowing it to be rendered anywhere. When using it this way, playback is restarted every time a different WhitePortal is used.

Is it possible to achieve a smooth playback transition between portals somehow?

Thanks!

These 3 specifically are deprecated as of React 17
componentWillMount
componentWillRecieveProps
componentWillUpdate

Current state

In package.json, react is defined as a dependency.

Expected

It should define react as peer dependency.

Workaround

yarn resolutions