question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for React Native for Web?

See original GitHub issue

I successfully installed and configured rne for rnw for the most part, but some things are not quite right. Overlay is just a big inline view with a red border; Tooltip seems to be always visible and it duplicates it’s children. Slider has a thumbHorizontal is not a function.

“React Native Elements just like on mobile can be used in your web projects. This is possible using react-native-web.” I’m just curious if it Reactive Native for Web is still supported?

To get it working with a basic webpack.config.js, I used the following. It does not work if you put the babel properties in .babelrc or package.json. They must be in webpack.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js?$/,
        use: {
          loader: 'babel-loader',
          options: {
            "presets": [
              "@babel/preset-env",
              "@babel/preset-react"
            ],
            "plugins": [
              "@babel/plugin-proposal-class-properties",
              ["@babel/plugin-transform-runtime", { "regenerator": true }]
            ]
          }
        },
        include: [
          /src/,
          /node_modules\/react-native-elements/,
          /node_modules\/react-native-vector-icons/,
          /node_modules\/react-native-status-bar-height/,
          /node_modules\/react-native-vector-icons/,
        ]
      },

Your Environment (please complete the following information):

software version
react-native-elements 1.2.1
react-native-web 0.11.7
npm or yarn 6.7.0

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
oxyiicommented, Oct 21, 2019

@mschipperheyn many RNE components have a Component among their props. But not all components and not for all their parts. We do not close this issue to think through and implement the optimal solution for Tooltip component. I’m not sure what the solution will be able to redefine Modal part of Tooltip. It is quite fine-tuned there https://github.com/react-native-elements/react-native-elements/blob/5d83ac0bd844ef78dac758f7baacd69a9a49853e/src/tooltip/Tooltip.js#L184-L191 but I’m sure we will find a solution

0reactions
oxyiicommented, Oct 23, 2019

@iRoachie on Overlay and on Tooltip. I’m not sure that one more platform-specific dep is a best way… Component prop will be better I think.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Introduction to React Native for Web
React Native for Web is a compatibility layer between React DOM and React Native. It can be used in new and existing apps,...
Read more >
The complete guide to React Native for Web - LogRocket Blog
Create React App is the standard way to bootstrap web-only React applications. Although it comes with built-in support for aliasing react-native ...
Read more >
React Native For Web Is What You Need For Your Multiplatform
Yes certainly, React Native, which is a cross-platform app development framework, can also be used to develop web applications. Is React Native ......
Read more >
How to Make Your React Native Apps Work on the Web - Retool
React Native for Web is a good option for those who are starting with a native app, and want to turn that native...
Read more >
React Native · Learn once, write anywhere
Written in JavaScript—rendered with native code. React primitives render to native platform UI, meaning your app uses the same native platform APIs other...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found