Aravind Vemula vemarav

## tslint.json
{
  "extends": ["tslint-react-recommended"],
  "rules": {
    "ordered-imports": [true],
    "quotemark": [true, "single", "jsx-single", "avoid-escape"],
    "semicolon": [true, "never"],
    "member-access": [false],
    "member-ordering": [false],
    "trailing-comma": [
      true,

## webpack.config.ts
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const rootDir = path.join(__dirname, '..');
const webpackEnv = process.env.NODE_ENV || 'development';

module.exports = {
  mode: webpackEnv,
  entry: {
    app: path.join(rootDir, './index.web.ts'),

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>
      RNWP
    </title>
    <link href="main.css" rel="stylesheet" />

## App.tsx
import React from 'react';
import {Dimensions, StyleSheet, Text, View} from 'react-native';

const {height} = Dimensions.get('screen');

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.center}>
        <Text>Hello React Native Web!!!</Text>

## tsconfig.json
{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "lib": [
      "esnext",
      "dom"
    ] /* Specify library files to be included in the compilation. */,
    // "allowJs": true,                       /* Allow javascript files to be compiled. */

## scrollview_vs_flatlist_vs_recycler_list_view.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              6 stars
            
          
                vemarav
                / scrollview_vs_flatlist_vs_recycler_list_view.md
            
            
              Last active
              August 9, 2021 11:36
            
              
                Comparison of react native ScrollView vs FlatList vs RecyclerListView
              
          
    Memory consumed by FlatList and RecyclerListView is similar, RecyclerListView wins over UI glitches as for large data sets glitches may observed in FlatList


No
ScrollView
FlatList
RecyclerListView


1
No Memory Management
Automatic Memory Management
Automatic Memory Management (Similar to FlatList)


2
Loads All content at once
Loads content as window scrolled
Loads content as window scrolled


3
Scroll position is not preserved if data refreshed
Scroll position is not preserved if data refreshed
Scroll is preserved if data refreshed


4
Observable frame drops
Observable frame drops for large data sets (> 1500)
No frame drops, Highly Performant


5
Trouble refreshing data
Trouble refreshing data
Easy to refresh/update data


6
Available in react native  import {ScrollView} from 'react-native'
Available in react native  import {FlatList} from 'react-native'
Available via third-party module ` import { RecyclerListView, DataProvider, LayoutProvider } from "r


## background-timer.js
// file: ./BackgroundTimer.js
import { DeviceEventEmitter, NativeAppEventEmitter, Platform } from 'react-native';
import _BackgroundTimer from 'react-native-background-timer'; // v2.1.1

const EventEmitter = Platform.select({
    ios: () => NativeAppEventEmitter,
    android: () => DeviceEventEmitter,
})();

class BackgroundTimer {

## dir-structure
app-root
 |_ src
 |   |_ models
 |       |_ User.js
 |       |_ index.js
 |_ server.js
 |_ console.js
 |_ package.json
 |_ yarn.lock


## console.js
/**
 * add console.js at ther root of your app
 * Modify to make it more helpful for your project
 * > Note: `esm` adds ES6 support in Node
 * In package.json
 *  ...
 *  "scripts": {
 *    "start": "nodemon -r esm ./server.js"
 *    "console": "node -r esm --experimental-repl-await console",
 *  }

## .eslintrc.json
{
  "extends": ["airbnb-base", "prettier"],
  "plugins": ["prettier"],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 8,
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "impliedStrict": true
    }
	{
	"extends": ["tslint-react-recommended"],
	"rules": {
	"ordered-imports": [true],
	"quotemark": [true, "single", "jsx-single", "avoid-escape"],
	"semicolon": [true, "never"],
	"member-access": [false],
	"member-ordering": [false],
	"trailing-comma": [
	true,
	const path = require('path');
	const webpack = require('webpack');
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const rootDir = path.join(__dirname, '..');
	const webpackEnv = process.env.NODE_ENV \|\| 'development';

	module.exports = {
	mode: webpackEnv,
	entry: {
	app: path.join(rootDir, './index.web.ts'),
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>
	RNWP
	</title>
	<link href="main.css" rel="stylesheet" />
	import React from 'react';
	import {Dimensions, StyleSheet, Text, View} from 'react-native';

	const {height} = Dimensions.get('screen');

	const App = () => {
	return (
	<View style={styles.container}>
	<View style={styles.center}>
	<Text>Hello React Native Web!!!</Text>
	{
	"compilerOptions": {
	/* Basic Options */
	"target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
	"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
	"lib": [
	"esnext",
	"dom"
	] /* Specify library files to be included in the compilation. */,
	// "allowJs": true, /* Allow javascript files to be compiled. */
No	ScrollView	FlatList	RecyclerListView
1	No Memory Management	Automatic Memory Management	Automatic Memory Management (Similar to FlatList)
2	Loads All content at once	Loads content as window scrolled	Loads content as window scrolled
3	Scroll position is not preserved if data refreshed	Scroll position is not preserved if data refreshed	Scroll is preserved if data refreshed
4	Observable frame drops	Observable frame drops for large data sets (> 1500)	No frame drops, Highly Performant
5	Trouble refreshing data	Trouble refreshing data	Easy to refresh/update data
6	Available in react native `import {ScrollView} from 'react-native'`	Available in react native `import {FlatList} from 'react-native'`	Available via third-party module ` import { RecyclerListView, DataProvider, LayoutProvider } from "r
	// file: ./BackgroundTimer.js
	import { DeviceEventEmitter, NativeAppEventEmitter, Platform } from 'react-native';
	import _BackgroundTimer from 'react-native-background-timer'; // v2.1.1

	const EventEmitter = Platform.select({
	ios: () => NativeAppEventEmitter,
	android: () => DeviceEventEmitter,
	})();

	class BackgroundTimer {
	app-root
	\|_ src
	\| \|_ models
	\| \|_ User.js
	\| \|_ index.js
	\|_ server.js
	\|_ console.js
	\|_ package.json
	\|_ yarn.lock
	/**
	* add console.js at ther root of your app
	* Modify to make it more helpful for your project
	* > Note: `esm` adds ES6 support in Node
	* In package.json
	* ...
	* "scripts": {
	* "start": "nodemon -r esm ./server.js"
	* "console": "node -r esm --experimental-repl-await console",
	* }
	{
	"extends": ["airbnb-base", "prettier"],
	"plugins": ["prettier"],
	"parser": "babel-eslint",
	"parserOptions": {
	"ecmaVersion": 8,
	"ecmaFeatures": {
	"experimentalObjectRestSpread": true,
	"impliedStrict": true
	}