Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Frederic Barthelemy
    @fbartho
    @erictraut -- have you been experimenting with React-Native 60 yet? -- I'm specifically curious about the new accessibility APIs, and if other changes affect ReactXP or otherwise necessitate upgrading to ReactXP 2.x
    Eric Traut
    @erictraut
    I personally haven't been experimenting with it, but others have.
    Rodrigo Oliveira
    @rodrigooliveira87

    Hi everybody, i'm trying to start a reactXP project with no success... 'create-rx-app AppName' fails in:

    ...

    [2/4] Fetching packages...
    info There appears to be trouble with your network connection. Retrying...
    info There appears to be trouble with your network connection. Retrying...
    info There appears to be trouble with your network connection. Retrying...
    info There appears to be trouble with your network connection. Retrying...
    error An unexpected error occurred: "https://registry.yarnpkg.com/react-native/-/react-native-0.59.10.tgz: ESOCKETTIMEDOUT".
    info If you think this is a bug, please open a bug report with the information provided in "E:\Dropbox\reactNative\dingomessenger\yarn-error.log".
    info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
    Dependencies were not installed, please try to create a project again.

    ...

    has anyone faced this problem?

    Frederic Barthelemy
    @fbartho
    @rodrigooliveira87 -- that sounds like an outage in Yarn or NPM
    Alexander T.
    @a-tarasyuk
    The problem with the installing packages via YARN, and YARN says about the problem with the network connection. You can create project without immediately installation, and try install packages later., just add --skip-install option.
    Rodrigo Oliveira
    @rodrigooliveira87

    @fbartho n' @a-tarasyuk, thanks for the quick help!

    Alexander's instruction works perfectly and the project's already running

    Rodrigo Oliveira
    @rodrigooliveira87

    Hi there!

    How can I dynamically import modules?

    I'm trying to use two notification lib's. (toastify for web and react-native-flash-message for ios/android) but I can't handle the imports, wich is causing error to compile.

    any suggestions?

    Eric Traut
    @erictraut
    For platform-specific modules (those whose implementation differs from one platform and another), I recommend using a technique similar to the one demonstrated in the TotoList sample app. See this documentation for details.
    Brent Erickson
    @berickson1

    The reason the above example works is that the Metro Bundler (React Native Bundler) will resolve platform specific implementations first (.{platform}.ext, then .native.ext, then .ext) where ext is (ts, tsx, js or jsx in most reactxp projects)

    You can put any platform specific implementations anywhere in your source tree, but the modules recommendation Eric suggested above will a much cleaner abstraction

    Rodrigo Oliveira
    @rodrigooliveira87

    Thanks @erictraut!

    Finally I managed to make it work by using the example that showed me with some variations. I will describe if it is useful for someone:

    First I created a 'modules' folder under 'src', and another for the module (./src/modules/notification/). In this folder I created the platform specific files. It was also necessary to create in this folder a package.json file with content:

    {
        "name": "modules/notification"
    }

    in tsconfig.json I made the modifications:

    {
      "compilerOptions": {
    
        ...
    
        "baseUrl": ".",
        "paths": {
          "modules/*": [
            "./src/modules/*/index.web",
            "./src/modules/*/index.native",
            "./src/modules/*/index.android",
            "./src/modules/*/index.ios",
            "./src/modules/*/index"
          ]
        }
        },
    
        ...

    Then I downloaded the babel-plugin-module-resolver package from:

    npm i --save-dev babel-plugin-module-resolver

    In the babel.config.js file I made the following modifications:

    const platform = process.env.PLATFORM;
    const getModuleAliases = require('./buildconfig.js');
    const modulesAliases = getModuleAliases(platform);
    
    ...
    
    const plugins = [
    ...
    [
          'module-resolver',
          {
            alias: modulesAliases,
          }
        ],
    
    ...

    and then I created buildconfig.js based on the example, below the full content:

    var _ = require('lodash');
    var fs = require('fs');
    
    function getCommonFallback(targetPlatform) {
        switch (targetPlatform) {
            case 'android':
            case 'ios':
            case 'windows':
            case 'macos':
                return 'native';
            case 'web':
            case 'electron':
            case 'tests':
            default:
                return 'web';
        }
    }
    
    function _getModuleAliases(targetPlatform) {
        var aliases = {};
        var fallbackSearchOrder = ['index.' + getCommonFallback(targetPlatform), 'index'];
    
        var dirToScan = (targetPlatform === 'web' ? './src/modules/' : '../../../src/modules/');
    
        var modules = fs.readdirSync(dirToScan);
    
        _.each(modules, function (moduleName) {
            var moduleVariant = 'index.' + targetPlatform;
    
            _.each(fallbackSearchOrder, function (fallback) {
                var variantPath = './src/modules/' + moduleName + '/' + moduleVariant;
                if (fs.existsSync(variantPath + '.ts') || fs.existsSync(variantPath + '.tsx')) {
                    return true;
                }
                moduleVariant = fallback;
            });
    
            var modulePath = (targetPlatform === 'web' || targetPlatform === 'tests' || targetPlatform === 'electron') ?
                './src/modules' : 'modules';
            aliases['modules/' + moduleName] = modulePath + '/' + moduleName + '/' + moduleVariant;
        });
    
        return aliases;
    }
    
    module.exports = function getModuleAliases(targetPlatform) {
        return _getModuleAliases(targetPlatform);
    }

    This way there were no modifications to the webpack and it is working as a charm.

    p.s .: important to run this command after modifications to these configuration files, especially babel.config.js to clear the cache:

    react-native start --reset-cache

    Thanks again for your help

    Matthew
    @thegalah
    Any ideas on how to implement an isComponentVisible method/functionality? As in is there a way to check if a View is currently in the viewport? Use case is I want to track impressions of a certain view for analytics.
    shebinkoshy
    @shebinkoshy
    Hi

    After adding 'react-linkedin-login-oauth2' module. I'm getting below error

    index.js:7 Uncaught Error: Module parse failed: Unexpected token (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

    .btn-linkedin {
    | color: #fff;
    | background-color: #337ab7;
    at Object../node_modules/react-linkedin-login-oauth2/assets/index.css (index.js:7)
    at webpack_require (bootstrap:726)
    at fn (bootstrap:100)
    at Module../node_modules/react-linkedin-login-oauth2/es/LinkedIn.js (LinkedIn.js:1)
    at webpack_require (bootstrap:726)
    at fn (bootstrap:100)
    at Module../node_modules/react-linkedin-login-oauth2/es/index.js (index.js:1)
    at webpack_require (bootstrap:726)
    at fn (bootstrap:100)
    at Object../src/app/views/linkedIn/LinkedInPage.tsx (LinkedInPage.tsx:34)
    ./node_modules/react-linkedin-login-oauth2/assets/index.css @ index.js:7
    webpack_require @ bootstrap:726
    fn @ bootstrap:100
    ./node_modules/react-linkedin-login-oauth2/es/LinkedIn.js @ LinkedIn.js:1
    webpack_require @ bootstrap:726
    fn @ bootstrap:100
    ./node_modules/react-linkedin-login-oauth2/es/index.js @ index.js:1
    webpack_require @ bootstrap:726
    fn @ bootstrap:100
    ./src/app/views/linkedIn/LinkedInPage.tsx @ LinkedInPage.tsx:34
    webpack_require @ bootstrap:726
    fn @ bootstrap:100
    ./src/app/views/dashboard/DashboardPage.tsx @ DashboardPage.tsx:40
    webpack_require @ bootstrap:726
    fn @ bootstrap:100
    ./src/app/views/components/drawerComponent/ContentPanel.tsx @ ContentPanel.tsx:28
    webpack_require @ bootstrap:726
    fn @ bootstrap:100
    ./src/app/views/splash/SplashPage.tsx @ SplashPage.tsx:25
    webpack_require @ bootstrap:726
    fn @ bootstrap:100
    ./src/app/views/RootView.tsx @ RootView.tsx:26
    webpack_require @ bootstrap:726
    fn @ bootstrap:100
    ./src/App.tsx @ App.tsx:27
    webpack_require @ bootstrap:726
    fn @ bootstrap:100
    ./src/index.tsx @ index.tsx:1
    webpack_require @ bootstrap:726
    fn @ bootstrap:100
    ./index.js @ index.js:1
    webpack_require @ bootstrap:726
    fn @ bootstrap:100
    ./web/index.hmr.js @ index.hmr.js:1
    webpack_require @ bootstrap:726
    fn @ bootstrap:100
    0 @ index.hmr.js:2
    webpack_require @ bootstrap:726
    (anonymous) @ bootstrap:793
    (anonymous) @ bootstrap:793
    Show 10 more frames
    client:150 [WDS] Errors while compiling. Reload prevented.
    errors @ client:150
    (anonymous) @ socket.js:47
    sock.onmessage @ SockJSClient.js:58
    EventTarget.dispatchEvent @ sockjs.js:170
    (anonymous) @ sockjs.js:887
    SockJS._transportMessage @ sockjs.js:885
    EventEmitter.emit @ sockjs.js:86
    WebSocketTransport.ws.onmessage @ sockjs.js:2961
    client:159 ./node_modules/react-linkedin-login-oauth2/assets/linkedin.png 1:0
    Module parse failed: Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)
    errors @ client:159
    (anonymous) @ socket.js:47
    sock.onmessage @ SockJSClient.js:58
    EventTarget.dispatchEvent @ sockjs.js:170
    (anonymous) @ sockjs.js:887
    SockJS._transportMessage @ sockjs.js:885
    EventEmitter.emit @ sockjs.js:86
    WebSocketTransport.ws.onmessage @ sockjs.js:2961
    client:159 ./node_modules/react-linkedin-login-oauth2/assets/index.css 1:0
    Module parse failed: Unexpected token (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    .btn-linkedin {
    | color: #fff;
    | background-color: #337ab7;
    errors @ client:159
    (anonymous) @ socket.js:47
    sock.onmessage @ SockJSClient.js:58
    EventTarget.dispatchEvent @ sockjs.js:170
    (anonymous) @ sockjs.js:887
    SockJS._transportMessage @ sockjs.js:885
    EventEmitter.emit @ sockjs.js:86
    WebSocketTransport.ws.onmessage @ sockjs.js:2961

    Madhukar Killamsetti
    @killamsetti_gitlab
    @All, I am planing to build a cross platform application using ReactXP. I am just curious, if it is possible to use direct React Native UI components in case any component is not implemented on ReactXP wrapper? Just checking if ReactXP is backward compatible to use React Native components without any issue.
    Brent Erickson
    @berickson1
    @shebinkoshy it looks like the package you're trying to import comes with CSS that you need to bundle via webpack. Take a look at something like css-loader or style-loader usage examples and that might help you. Reactxp uses inline css, so none of the examples we provide are setup to import external css (which will only work on web). You'd see this same issue in a react project using webpack with the same loader configuration setup
    @killamsetti_gitlab no, ReactNative UI components won't work when you target Web. The approach we suggest for cases like this is to build a reactxp module. There you could use RN components for "native" platforms and build your own implementation for web. You can see some discussion about modules a few messages up.
    Madhukar Killamsetti
    @killamsetti_gitlab
    @berickson1 Thank you, I will checkout more about the modules.
    shebinkoshy
    @shebinkoshy
    @berickson1 Thank you. I will checkout. Does React Xp support routing for web? Or it only support single page web app? The web.skype.com is not changing the URL even if i goto some another pages. If you can provide tutorial for web routing project that has support of mobile apps. It will be great.
    Sorry that smiley was sent by mistake
    Daniel Neveux
    @dagatsoin
    Append all the time xp
    Matthew
    @thegalah
    Any idea on how to get the keyboard height? I want to adjust the view whenever the keyboard is up to account for it covering forms/input items
    Brent Erickson
    @berickson1
    @shebinkoshy it looks like react router has react native support via another package. You could go down the modules approach and create a module that calls react-router-native on RN platforms and react-router on web. See https://reacttraining.com/react-router/native/guides/quick-start for details about react native router.
    Skype uses a custom built routing solution that effectively had a NavigationContext object passed to top level components. Those components decide what to render much like react router
    shebinkoshy
    @shebinkoshy
    @berickson1 Wow. Thats a great info. Thank you so much. Will check.
    Brent Erickson
    @berickson1
    @thegalah There's an open github issue about this same question. I provided a sample of the React Native implementation we used at the time. Microsoft/reactxp#905
    With the above you could build a module to detect keyboard height on RN platforms, not sure about Web since the viewport actually resizes. I believe that ReactNative now provides a component that does just that out of the box too
    Tony Ng
    @tonystaark
    Hello I am new to ReactXP. Any idea how to test it on ios or android? Is it the same as ReactNative which is testing with Expo?
    raviabeypaul
    @raviabeypaul
    Hi guys, i am new to react xp, and am working with virtual list view, could anyone help me with aligning cells in horizontal direction
    Satish Verma
    @satishverma143
    hello, I am a newbie in ReactXp
    Matthew
    @thegalah
    image.png
    Anyone know how to deal with the software buttons on android? It seems to be cutting off some of the UI:
    Matthew
    @thegalah
    I'm also not sure if this is a bug but I have a GestureView inside of a Scrollview which entirely fills the scrollview. I use it to detect pan gestures and it seems to work fine on web + ios, however on android it seems to block scrolling/have difficulty scrolling the scrollview
    Pablo Espinosa
    @espipj
    Hello, it might be a silly question, but my VirtualListView doesn't respect the dimesions set by the parents RX.Views via flexbox, it just takes over the whole screen :(
    Pablo Espinosa
    @espipj
    Okay, solved, it was a matter of playing a bit with the flexbox values
    Matthew
    @thegalah
    Anyone have any ideas on getting a gesture view to detect horizontal pans inside a scrollview?
    Daniel Neveux
    @dagatsoin
    I am updating my dependencies on @dagatsoin/sproutch but I struggle to user the current reactxp master build.
    Metro complains => Unable to resolve "../native-common/Network" from "node_modules/reactxp/dist/android/ReactXP.js"
    does it sound familiar ?
    Olivier MATROT
    @omatrot
    With the release of version 2.0.0, any guidelines for upgrading from 1.6.1 ?
    Tung Hoang
    @tunght91
    Hi, I have a question?
    Have ReactXP support reactjs 16.8?
    Olivier MATROT
    @omatrot
    Screenshot 2020-01-06 at 13.24.46.png
    Screenshot 2020-01-06 at 13.26.02.png
    I have a discrepancy between iOS (top image) and Android (bottom image) for a button.
    Here is the JSX
                <RX.Button
                  style={styles.button}
                  onPress={() => this.handleStartStopButton()}
                >
                  <RX.Text style={{ textAlign: "center" }}>
                    {this.state.processingData
                      ? translate("capture.stop")
                      : translate("capture.start")}
                  </RX.Text>
                </RX.Button>
    And the style:
    button: RX.Styles.createButtonStyle({
    backgroundColor: "#ddd",
    borderWidth: 1,
    margin: 40,
    padding: 12,
    borderRadius: 8,
    borderColor: "black"
    })
    Space is available, what could it be? Any guidance to troubleshoot this rather simple issue?
    Frederic Barthelemy
    @fbartho
    @omatrot Margin — I’ve found differences between iOS and Android regarding margin behavior (I believe a react-native issue)
    I’m curious: does anybody have CodeCov.io or other code coverage working? 2 years ago, I gave up and I’d like to fix that.