khadorkin

const widthPercentageToDP = widthPercent => {
    const screenWidth = Dimensions.get('window').width;
    const elemWidth = parseFloat(widthPercent);
    return PixelRatio.roundToNearestPixel(screenWidth * elemWidth / 100);
};
const heightPercentageToDP = heightPercent => {
    const screenHeight = Dimensions.get('window').height;
    const elemHeight = parseFloat(heightPercent);
    return PixelRatio.roundToNearestPixel(screenHeight * elemHeight / 100);
};

khadorkin

The flow

husky (setup git commit hooks) -> lint-stages (run specific commands by file type) -> imagemin (minify files)

git add -A
git commit # It will compress your images into git repo now

Since the images is now fully compressed, no extra steps is required by webpack/browserify……whatever.

khadorkin

import * as React from 'react';
import {
  EmitterSubscription,
  Keyboard,
  KeyboardEvent,
  LayoutAnimation,
  Platform,
  Dimensions,
  ScreenRect,
} from 'react-native';

khadorkin

+ import com.facebook.react.modules.network.OkHttpClientProvider;
+ import okhttp3.OkHttpClient;
+ import okhttp3.brotli.BrotliInterceptor;

...
  
public void onCreate() {
  super.onCreate();

+   OkHttpClientProvider.setOkHttpClientFactory(() -> {

khadorkin

- name: Restore yarn workspaces
  id: yarn-cache
  uses: actions/cache@master
  with:
    path: |
      node_modules
      */*/node_modules
    key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
- name: Install dependencies
  if: steps.yarn-cache.outputs.cache-hit != 'true'

khadorkin

const express = require('express');
const app = express();

// Application
app.get('/', function(req, res) {
  if (process.env.NODE_ENV === 'development') {
    for (var key in require.cache) {
      delete require.cache[key];
    }      
  }

khadorkin

httpClient.DefaultRequestHeaders.Authorization = 
    new AuthenticationHeaderValue(
        "Basic", 
        Convert.ToBase64String(
            System.Text.ASCIIEncoding.ASCII.GetBytes(
                string.Format("{0}:{1}", username, password))));

khadorkin

// Source: https://github.com/react-community/react-native-platform-touchable
import React, { PureComponent, ReactNode } from 'react'
import {
  BackgroundPropType,
  Platform,
  StyleProp,
  TouchableNativeFeedback,
  TouchableNativeFeedbackProperties,
  TouchableNativeFeedbackStatic,
  TouchableOpacity,

khadorkin

Profiler

React 16.4 will introduce a new Profiler component (initially exported as React.unstable_Profiler) for collecting render timing information in order to measure the "cost" of rendering for both sync and async modes.

Profiler timing metrics are significantly faster than those built around the User Timing API, and as such we plan to provide a production+profiling bundle in the future. (The initial release will only log timing information in DEV mode, although the component will still render its children- without timings- in production mode.)

How is it used?

Profiler can be declared anywhere within a React tree to measure the cost of rendering that portion of the tree. For example, a Navigation component and its descendants:

khadorkin

import React from 'react';

const ConditionalWrap = ({condition, wrap, children}) => condition ? wrap(children) : children;

const Header = ({shouldLinkToHome}) => (
  <div>
    <ConditionalWrap
      condition={shouldLinkToHome}
      wrap={children => <a href="/">{children}</a>}
    >