Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Native Web support? #58

Closed
jameschetwood opened this issue Sep 24, 2020 · 5 comments
Closed

React Native Web support? #58

jameschetwood opened this issue Sep 24, 2020 · 5 comments
Labels
enhancement New feature or request

Comments

@jameschetwood
Copy link

Does this library work with React Native Web? It doesn't work with this simple Expo Snack:
https://snack.expo.io/@jamesweblondon/intelligent-yogurt

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Tooltip from 'rn-tooltip';


export default function App() {
  return (
    <View style={styles.container}> 
      <Tooltip 
        width={200}
        containerStyle={{width: 200, height: 100, backgroundColor: 'gold'}}
        popover={<Text>Info here</Text>}>
        <Text>Press me</Text>
      </Tooltip>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Screenshot 2020-09-24 at 10 12 58

@AndreiCalazans
Copy link
Owner

No work was put into supporting Web. I'm been a bit busy lately. You are welcome to make PR for web support.

@AndreiCalazans AndreiCalazans added the enhancement New feature or request label Oct 11, 2020
@nandorojo
Copy link

nandorojo commented Jan 11, 2021

@jameschetwood did you end up finding a solution for web? CC SteffeyDev/react-native-popover-view#82

@neerajkh96
Copy link

neerajkh96 commented Feb 3, 2021

Added PR #65 to support hover events for tooltip in react-native-web.

@BossBele
Copy link

  • Opened Add web support #82 to support web.

  • Tested on Expo Go, Android Simulator and Expo Web

  • Installation (directly from repo), package.json:

"dependencies": {
    ...
    "rn-tooltip": "git+https://github.com/BossBele/rn-tooltip.git"
  },

  • Expo using babel babel.config.js:
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [['@babel/plugin-proposal-decorators', {legacy: true}]],
  };
};

  • Expo web using webpack webpack.config.js:
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: [
          // Ensure that all packages here are transpiled.
          'rn-tooltip',
        ],
      },
    },
    argv,
  );
  config.resolve.symlinks = true;
  // Customize the config before returning it.
  return config;
};

@AndreiCalazans
Copy link
Owner

It's not in my intention to extend this library to support web. Feel free to fork it and use your own version. Thank you for understanding.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants