react-native-elements / create-react-app-example

Example of using React Native Elements on the web with create-react-app

React Native Elements on Create React App

This repo is an example setup for using React Native Elements on the web with create-react-app. This follows the setup guide on https://react-native-training.github.io/react-native-elements/docs/web_usage.html.

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

create-react-app-example's Issues

something is missing or wrong OR i am a dolt

I just installed this on my mac using vscode and when trying to run i'm getting the dreaded :

' ... trying to import from [SOMETHING-IN-NODE_MODULES] which falls outside of the project/src directory. '

i don't understand this as NODE_MODULES is always at the root so i would expect that importing would be absolutely needed and supported.
what am i missing please - apparently others are able to use this template without issues.

tia
b stensrud

why `https://reactnativeelements.com/docs/web_usage.html` Page Not Found

Unable to use with webpack v5

Is there an existing issue for this?

• I have searched the existing issues

Explain what you did

I create react app and go step by step from the stretch

Expected behavior

can't start the project, getting 'loose' mode configuration must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled)

Describe the bug

'loose' mode configuration must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled)

Steps To Reproduce

npx create-react-app my-app --template typescript

npm install react-native-safe-area-context

npm i  @rneui/base @rneui/themed react-native-web react-native-vector-icons

npm i --dev @babel/plugin-proposal-class-properties customize-cra react-app-rewired

create config-overrides.js

const path = require('path');
const { override, addBabelPlugins, babelInclude } = require('customize-cra');

module.exports = override(
  ...addBabelPlugins('@babel/plugin-proposal-class-properties'),
  babelInclude([
    path.resolve(__dirname, 'node_modules/@rneui/base'),
    path.resolve(__dirname, 'node_modules/@rneui/themed'),
    path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
    path.resolve(__dirname, 'node_modules/react-native-ratings'),
    path.resolve(__dirname, 'src'),
  ])
);

and run start

Screenshots

No response

Your Environment

`npx @rneui/envinfo`

  ```
    Output from `npx @rneui/envinfo` goes here.
  ```

Usage with Expo

How does one use RNE with expo+typescript and icons on react-native-web? These config-overrides don't seem like the relevant bit for expo projects but it's unclear what is... I don't think the expo sample here deals with react-native-web.