react-native-time-calculator

v0.0.5

Published

3 months ago

This is a new [**React Native**](https://reactnative.dev) project, bootstrapped using [`@react-native-community/cli`](https://github.com/react-native-community/cli).

Downloads

0High
0Medium
0Low

hetalshukla

TimeCalculator ReactNativeWeb

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.

Installation

To install this package using Yarn, run:

yarn add react-native-time-calculator

Step 1: Install Dependencies

First, you need to install all the dependencies required for your project.

# using npm
npm install

# OR using Yarn
yarn install

Step 2: Set Up React Native Web

To 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-dom

Configure Webpack and Babel:

Create or update webpack.config.js:

const 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'
};

Create or update .babelrc:

{
  "presets": [
    "module:metro-react-native-babel-preset",
    "@babel/preset-typescript"
  ],
  "plugins": [
    ["babel-plugin-react-native-web", { "commonjs": true }],
    "@babel/plugin-transform-flow-strip-types"
  ]
}

Create an entry point for the web app:

Create index.web.js:

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 />);

Update your package.json scripts:

json

"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>

Step 3: Start the Metro Server

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 start

Step 4: Modifying your App

Now that you have successfully run the app, let's modify it.

Open App.web.js in your text editor of choice and edit some lines.

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;

Step 5: Start your Application

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 web

If 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! :tada: You've successfully run and modified your React Native Web App. :partying_face:

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.