ptmt / react-native-macos

[deprecated in favor of https://microsoft.github.io/react-native-windows/] React Native for macOS is an experimental fork for writing desktop apps using Cocoa
MIT License
11.24k stars 429 forks source link

Fail to load images #183

Closed Pagebakers closed 6 years ago

Pagebakers commented 6 years ago

Description

Update

I thought it was related to including macos into an existing project, but i've started a clean project and getting the same results :(

=====

I've included react-native-macos in my existing project together with windows succesfully. Except for images which make react packager fail.

Reproduction Steps and Sample Code

Example code:

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

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native';

export default class RNImages extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          source={require('./logo.png')}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('RNImages', () => RNImages);

The error:

error: bundling: UnableToResolveError: Unable to resolve module `react-native/Libraries/Image/AssetRegistry` from `[..]/app/images/logo.png`: Module does not exist in the module map or in these directories:
  [..]/node_modules/react-native/Libraries/Image

It seems that it's still pointing to react-native instead of react-native-macos. I've updated the flow config and babelrc configs, but still no luck.

{
  "presets": ["react-native"],
  "plugins": [
    "transform-decorators-legacy",
    ["module-resolver", {
      "alias": {
        "react-native": "react-native-macos"
      }
    }]
  ]
}
[ignore]
; We fork some components by platform
.*/*[.]android.js
.*/*[.]ios.js

; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/

; Ignore unexpected extra "@providesModule"
.*/node_modules/.*/node_modules/fbjs/.*

; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in the root
.*/Libraries/react-native/React.js
.*/Libraries/react-native/ReactNative.js

[include]

[libs]
node_modules/react-native-macos/Libraries/react-native/react-native-interface.js
node_modules/react-native-macos/flow
flow/

[options]
emoji=true

module.system=haste

munge_underscores=true

module.name_mapper='react-native' -> 'react-native-macos'
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FixMe

suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError

unsafe.enable_getters_and_setters=true

[version]
^0.49.1

What am i missing here?

Pagebakers commented 6 years ago

Fixed in PR #184