This is a new [React Native] (https://reactnative.dev) project, bootstrapped using [@react-native-community/cli], and configured to run on React Native Web.
Getting Started Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.
To install this package using Yarn, run:
yarn add react-native-time-calculatorFirst, you need to install all the dependencies required for your project.
# using npm
npm install
# OR using Yarn
yarn installTo run your React Native project in a web browser, you need to configure React Native Web. Follow these steps:
Install react-native-web and react-dom:
# using npm
npm install react-native-web react-dom
# OR using Yarn
yarn add react-native-web react-domconst path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.web.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
resolve: {
extensions: ['.web.js', '.js', '.jsx', '.json'],
alias: {
'react-native$': 'react-native-web'
}
},
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: [
'@babel/preset-env',
'@babel/preset-react',
'module:metro-react-native-babel-preset'
],
plugins: [
['babel-plugin-react-native-web', { commonjs: true }]
]
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpe?g|gif|svg|webp)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/images/',
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
],
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
compress: true,
port: 9000,
},
mode: 'development'
};{
"presets": [
"module:metro-react-native-babel-preset",
"@babel/preset-typescript"
],
"plugins": [
["babel-plugin-react-native-web", { "commonjs": true }],
"@babel/plugin-transform-flow-strip-types"
]
}import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { createRoot } from 'react-dom/client';
AppRegistry.registerComponent(appName, () => App);
const rootTag = document.getElementById('root') || document.getElementById('app');
const root = createRoot(rootTag);
root.render(<App />);"scripts": {
"start": "react-native start",
"web": "webpack serve --config webpack.config.js"
}
Ensure you have an HTML file with a root element:
Create index.html:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Native Web</title>
</head>
<body>
<div id="root"></div>
</body>
</html>You will need to start Metro, the JavaScript bundler that ships with React Native.
To start Metro, run the following command from the root of your React Native project:
# using npm
npm start
# OR using Yarn
yarn startNow that you have successfully run the app, let's modify it.
import React, { Suspense, lazy } from 'react';
import WorkHoursCalculator from 'react-native-time-calculator';
const App = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<WorkHoursCalculator />
</Suspense>
);
};
export default App;Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your app in a web browser:
# using npm
npm run web
# OR using Yarn
yarn run webIf everything is set up correctly, you should see your new app running in your default web browser.
In your browser, refresh the page to see your changes. Congratulations! 🎉 You've successfully run and modified your React Native Web App. 🥳
Now what? If you want to add this new React Native code to an existing application, check out the Integration guide. If you're curious to learn more about React Native, check out the Introduction to React Native. Troubleshooting If you can't get this to work, see the Troubleshooting page.
Learn More To learn more about React Native and React Native Web, take a look at the following resources:
React Native Website - learn more about React Native. Getting Started - an overview of React Native and how to set up your environment. Learn the Basics - a guided tour of the React Native basics. React Native Web Documentation - learn more about React Native Web. Blog - read the latest official React Native Blog posts. @facebook/react-native - the Open Source GitHub repository for React Native. This format provides a clear, structured guide for users to set up and run your React Native Web project.