diff --git a/docs/web_usage.md b/docs/web_usage.md new file mode 100644 index 0000000000..b74e6debf3 --- /dev/null +++ b/docs/web_usage.md @@ -0,0 +1,74 @@ +--- +id: web_usage +title: Usage on the Web +--- + +React Native Elements just like on mobile can be used in your web projects. This is possible using [react-native-web](https://github.com/necolas/react-native-web). We'll highlight how to set this up using create-react-app. + +## Why do I have to set this up? + +On the web, you can usually use UI libraries directly from npm without any additional setup. However in react-native, it's a bit different. + +The major difference is that React Native can support JSX and advanced javascript out the box. This means that we don't need to transpile our code before we ship it to npm. **We ship JSX and advanced javascript directly to npm** in React Native Elements, so we need to account for this in our web projects. + +## Create React App + +[Create React App](https://create-react-app.dev/) is a very popular framework for building react applications. Unfortunately it doesn't allow much customization of the build setup. To accomplish this we'll be making use of [react-app-rewired](https://github.com/timarney/react-app-rewired) and [customize-cra](https://github.com/arackaf/customize-cra). + +After creating a new create-react-app project, run the following commands. + +```bash +yarn add react-native-elements react-native-web react-native-vector-icons +``` + +```bash +yarn add --dev @babel/plugin-proposal-class-properties customize-cra react-app-rewired +``` + +Secondly, create a `config-overrides.js` file in the root of your project. + +```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/react-native-elements'), + path.resolve(__dirname, 'node_modules/react-native-vector-icons'), + path.resolve(__dirname, 'node_modules/react-native-ratings'), + path.resolve(__dirname, 'src'), + ]) +); +``` + +Lastly, change your scripts in `package.json` to use react-app-rewired: + +```diff +"scripts": { +- "start": "react-scripts start", ++ "start": "react-app-rewired start", +- "build": "react-scripts build", ++ "build": "react-app-rewired build", +- "test": "react-scripts test", ++ "test": "react-app-rewired test" +} +``` + +At this point your app can start. However trying to use any components that use icons, will not show them. In your App.js, load these fonts as you would on the web with a style tag. + +```jsx + +``` + +The full setup of the guide can be found at https://github.com/react-native-elements/create-react-app-example. diff --git a/website/i18n/en.json b/website/i18n/en.json index fcc991ef7c..49acdc5640 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -93,161 +93,164 @@ "troubleshooting": { "title": "Troubleshooting" }, - "version-0.19.1-avatar": { + "web_usage": { + "title": "Usage on the Web" + }, + "version-0.19.1/version-0.19.1-avatar": { "title": "Avatar" }, - "version-0.19.1-badge": { + "version-0.19.1/version-0.19.1-badge": { "title": "Badge" }, - "version-0.19.1-button_group": { + "version-0.19.1/version-0.19.1-button_group": { "title": "ButtonGroup" }, - "version-0.19.1-button": { + "version-0.19.1/version-0.19.1-button": { "title": "Button" }, - "version-0.19.1-card": { + "version-0.19.1/version-0.19.1-card": { "title": "Card" }, - "version-0.19.1-checkbox": { + "version-0.19.1/version-0.19.1-checkbox": { "title": "CheckBox" }, - "version-0.19.1-contributing": { + "version-0.19.1/version-0.19.1-contributing": { "title": "Contributing" }, - "version-0.19.1-customization": { + "version-0.19.1/version-0.19.1-customization": { "title": "Customization" }, - "version-0.19.1-divider": { + "version-0.19.1/version-0.19.1-divider": { "title": "Divider" }, - "version-0.19.1-forms": { + "version-0.19.1/version-0.19.1-forms": { "title": "Forms" }, - "version-0.19.1-getting_started": { + "version-0.19.1/version-0.19.1-getting_started": { "title": "Getting Started", "sidebar_label": "Getting Started" }, - "version-0.19.1-header": { + "version-0.19.1/version-0.19.1-header": { "title": "Header" }, - "version-0.19.1-icon": { + "version-0.19.1/version-0.19.1-icon": { "title": "Icon" }, - "version-0.19.1-labels": { + "version-0.19.1/version-0.19.1-labels": { "title": "Label Guide" }, - "version-0.19.1-lists": { + "version-0.19.1/version-0.19.1-lists": { "title": "Lists" }, - "version-0.19.1-overview": { + "version-0.19.1/version-0.19.1-overview": { "title": "Overview" }, - "version-0.19.1-pricing": { + "version-0.19.1/version-0.19.1-pricing": { "title": "Pricing" }, - "version-0.19.1-rating": { + "version-0.19.1/version-0.19.1-rating": { "title": "Rating" }, - "version-0.19.1-searchbar": { + "version-0.19.1/version-0.19.1-searchbar": { "title": "SearchBar" }, - "version-0.19.1-slider": { + "version-0.19.1/version-0.19.1-slider": { "title": "Slider" }, - "version-0.19.1-social_icon": { + "version-0.19.1/version-0.19.1-social_icon": { "title": "SocialIcon" }, - "version-0.19.1-testing": { + "version-0.19.1/version-0.19.1-testing": { "title": "Testing" }, - "version-0.19.1-text": { + "version-0.19.1/version-0.19.1-text": { "title": "Text" }, - "version-0.19.1-tile": { + "version-0.19.1/version-0.19.1-tile": { "title": "Tile" }, - "version-0.19.1-troubleshooting": { + "version-0.19.1/version-0.19.1-troubleshooting": { "title": "Troubleshooting" }, - "version-1.0.0-avatar": { + "version-1.0.0/version-1.0.0-avatar": { "title": "Avatar" }, - "version-1.0.0-badge": { + "version-1.0.0/version-1.0.0-badge": { "title": "Badge" }, - "version-1.0.0-button_group": { + "version-1.0.0/version-1.0.0-button_group": { "title": "ButtonGroup" }, - "version-1.0.0-button": { + "version-1.0.0/version-1.0.0-button": { "title": "Button" }, - "version-1.0.0-card": { + "version-1.0.0/version-1.0.0-card": { "title": "Card" }, - "version-1.0.0-checkbox": { + "version-1.0.0/version-1.0.0-checkbox": { "title": "CheckBox" }, - "version-1.0.0-contributing": { + "version-1.0.0/version-1.0.0-contributing": { "title": "Contributing" }, - "version-1.0.0-customization": { + "version-1.0.0/version-1.0.0-customization": { "title": "Customization" }, - "version-1.0.0-divider": { + "version-1.0.0/version-1.0.0-divider": { "title": "Divider" }, - "version-1.0.0-header": { + "version-1.0.0/version-1.0.0-header": { "title": "Header" }, - "version-1.0.0-icon": { + "version-1.0.0/version-1.0.0-icon": { "title": "Icon" }, - "version-1.0.0-image": { + "version-1.0.0/version-1.0.0-image": { "title": "Image" }, - "version-1.0.0-input": { + "version-1.0.0/version-1.0.0-input": { "title": "Input" }, - "version-1.0.0-listitem": { + "version-1.0.0/version-1.0.0-listitem": { "title": "ListItem" }, - "version-1.0.0-overlay": { + "version-1.0.0/version-1.0.0-overlay": { "title": "Overlay" }, - "version-1.0.0-overview": { + "version-1.0.0/version-1.0.0-overview": { "title": "Overview" }, - "version-1.0.0-pricing": { + "version-1.0.0/version-1.0.0-pricing": { "title": "Pricing" }, - "version-1.0.0-rating": { + "version-1.0.0/version-1.0.0-rating": { "title": "Rating" }, - "version-1.0.0-searchbar": { + "version-1.0.0/version-1.0.0-searchbar": { "title": "SearchBar" }, - "version-1.0.0-slider": { + "version-1.0.0/version-1.0.0-slider": { "title": "Slider" }, - "version-1.0.0-social_icon": { + "version-1.0.0/version-1.0.0-social_icon": { "title": "SocialIcon" }, - "version-1.0.0-text": { + "version-1.0.0/version-1.0.0-text": { "title": "Text" }, - "version-1.0.0-tile": { + "version-1.0.0/version-1.0.0-tile": { "title": "Tile" }, - "version-1.0.0-tooltip": { + "version-1.0.0/version-1.0.0-tooltip": { "title": "Tooltip" }, - "version-1.1.0-checkbox": { + "version-1.1.0/version-1.1.0-checkbox": { "title": "CheckBox" }, - "version-1.1.0-input": { + "version-1.1.0/version-1.1.0-input": { "title": "Input" }, - "version-1.1.0-text": { + "version-1.1.0/version-1.1.0-text": { "title": "Text" } }, diff --git a/website/sidebars.json b/website/sidebars.json index bbb8506d90..a5ad2bfdf8 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -4,6 +4,7 @@ "getting_started", "overview", "customization", + "web_usage", "troubleshooting" ], "Components": [