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

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

Cross Platform React Native UI Toolkit

Getting Started 🚀 - Documentation 📚 - Expo demo - Blog - Releases

Installation

npm install @rneui/themed @rneui/base

Follow these instructions to install React Native Elements!

Packages

Package	Version	Downloads
@rneui/base
@rneui/themed

Quick Start

Start using the components or try it on Snack.

import { Button } from '@rneui/base';

const App = () => <Button title="Hello World!" />;

React Native Web support

As a cross platform UI Toolkit, you can now use RNE on the web & share your codebase between your React Native + React web apps. RNE components are rendered perfectly on browser. You can achieve this to target iOS, Android and Web by collaborating RNE and React Native for Web.

Click here for a full walkthrough using React Native Elements + React Native Web.

Expo demo app

Checkout the official React Native Elements App on Expo which uses all of the React Native Elements components.

If you are looking to contribute to the React Native Elements App, here to view the implementation & Use this command to start example app locally

yarn example:start

VS Code Extension

Install the React Native Elements VS Code Extension to speed up development.

Documentation

View the full docs here

Contributing

Interested in contributing to this repo? Check out our Contributing Guide, Setup Guide and submit a PR for a new feature/bug fix.

A big shoutout to all our contributors! You could be here too!

First Contributors

We encourage everyone to contribute & submit PR's especially first-time contributors. Look for the label Good First Issue on the issues. Click here to see them.

If there is something you's like to see or request a new feature, please submit an issue or a pull request.

Community

• Discord - In case you have any other question or would like to come say Hi! to the RNE community, join our Discord Server. See you on the other side! 👋😃

• Twitter - Follow us on Twitter to get the latest updates.

Backers

Become a backer and show your support for React Native Elements.

Sponsors

Do you use React Native Elements in production? If so, consider supporting this project as it will allow the maintainers to dedicate more time to maintaining this project and also building new features for everyone. Also, your app or company's logo will show on GitHub and link to your website - who doesn't want a little extra exposure? Here's the info. Check our sponsors on website.

create-react-app-example's Issues

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.

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.
  ```

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

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