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

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

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

- 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

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

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

+   OkHttpClientProvider.setOkHttpClientFactory(() -> {

khadorkin

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

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

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

Settings up mutliple app targets in React-Native

1. yarn add react-native-config
2. react-native link react-native-config
3. Create .env files for each configuration. Ex: .env.dev, .env.prod, etc Ex:

API_ENDPOINT=https://api.myresource.com/dev
ENV=dev

4. Follow instructions for set up with react-native-config and extra steps

khadorkin

import AsyncStorage from '@react-native-community/async-storage';
import {
  InitialState,
  NavigationContainer,
  NavigationContainerProps,
  NavigationContainerRef,
} from '@react-navigation/core';
import * as React from 'react';
import { InteractionManager } from 'react-native';