Technical blog

React Native - Help

https://reactnative.dev/docs/environment-setup

// ---------
npm i react-native-router-flux --save
npm install -g react-native-cli
npm install -g create-react-native-app
create-react-native-app myrnapp

cd C:\repo\react-native\myrnapp\
npx react-native run-android --no-jetifier
react-native run-android

cd C:\repo\react-native\myrnapp\
npm start
        scan QR code
      OR
ctrl+c
        npm run eject
          MyRnApp
            react-native run-android
            react-native run-web

          Create a file with named local.properties and add the following path in it.
          sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk

      - cd myrnapp
      - npm run android
      - npm run ios
          # you need to use macOS to build the iOS project
            - use the Expo app if you need to do iOS development without a Mac
npm run web
  npm uninstall -g expo-cli
  npm cache clean --force
  npm install -g expo-cli
      # expo start --tunnel

// -------------------

notepad C:\repo\react-native\myrnapp\android\local.properties
notepad C:\repo\react-native\myrnapp\android\gradle\wrapper\gradle-wrapper.properties
notepad .\myapp\android\gradle\wrapper\gradle-wrapper.properties
  distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip
  distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip

    %UserProfile%\.gradle\wrapper\dists\

notepad %WinDir%\System32\drivers\etc\hosts
  127.0.0.1       localhost

// -------------------
On Windows:

1. Add USER Environment variables:

NOTE: Path should be appended

    JAVA_HOME			%ProgramFiles%\Android\Android Studio\jre
  ANDROID_SDK_ROOT	%LocalAppData%\Android\Sdk
  Path				%LocalAppData%\Android\Sdk

2. Run below command to accept licenses:

NOTE: Accept all licenses (say `y`)

    %ANDROID_SDK_ROOT%/tools/bin/sdkmanager.bat --licenses

3. Now run you app (like below, or other):

    cd \myapp\
    react-native run-android

// -------------------
%LocalAppData%\Android\Sdk\platform-tools
// -------------------
If using stock Android, go to
  Settings > About phone > Build number.
  On a Samsung Galaxy device, go to Settings > About device > Build number.
  On an HTC device, go to Settings > About > Software information > More > Build number.
  On an LG device, go to Settings > About phone > Software info > Build number.
    Tap Build number seven times.
    After the first few taps, you should see the steps counting down until you unlock the developer options.
    Once activated, you will see a message that reads, “You are now a developer!” Go back to Settings,
      where you’ll find a Developer options entry in the menu.
    (https://www.digitaltrends.com/mobile/how-to-get-developer-options-on-android/)
Then inside developer options, you should enable USB debugging.

// -------------------

`Windows` > `Run`

Copy paste below & press OK:

    "%ProgramFiles%\Android\Android Studio\bin\studio64.exe"

Wait for sometime:

- Android Studio is too slow to start
- Alt + Tab may show you it is running in background

Otherwise try below oen - same Copy paste below & press OK:

    "%ProgramFiles%\Android\Android Studio\bin\studio.exe"


// -----------
Steps to install NDK (Side by side)

- Open `Android Studio`
- Click `Configure/ Tools`
  - Click `SDK Manager`
    - Click `SDK Tools` tab
      - Select below:
        - `NDK (Side by side)`
        - `CMake`
        - `Android SDK Command-line Tools (latest)`
      - `Apply`
---

Source: https://developer.android.com/studio/projects/install-ndk
// -----------


cd C:\repo\react-native\myrnapp\
react-native run-android


if you ever add buildTypes or productFlavors in android/app/build.gradle like me.

do not run react-native run-android

use react-native run-android --variant [flavorBuildType] instead

  flavorBuildType
    debug
    release
    flavor1Debug
    flavor2Release


// -----------


adb shell input keyevent 82
192.168.1.2:8081

http://192.168.1.2:8081/debugger-ui/
http://192.168.1.2:8081/index.bundle?platform=android&dev=true&minify=false

// react-native run-android start --port=8088


adb devices
  List of devices attached
  52001c05f41794bd        device

adb -s 52001c05f41794bd reverse tcp:8081 tcp:8081


// -----------
cd C:\repo\react-native\myrnapp\
npx react-native run-android --no-jetifier

// -----------

// adb -s 52001c05f41794bd reverse tcp:8081 tcp:8081
ipconfig
adb devices
adb shell input keyevent 82
http://192.168.1.2:8081/
http://192.168.1.2:8081/debugger-ui/
http://localhost:8081/debugger-ui/

// -----------
react-devtools
adb reverse tcp:8097 tcp:8097

// -----------
// -----------
// -----------

cd C:\repo\react-native\myrnapp\
npm run web

    // http://localhost:19002/
    // http://localhost:19006/
// -----------

CSS - Help

what the viewport is?
    document.querySelector('html').clientWidth

Resolution switching

- Different sizes

// ----
    <img srcset="elva-fairy-480w.jpg 480w,
                  elva-fairy-800w.jpg 800w"
          sizes="(max-width: 600px) 480px,
                800px"
          src="elva-fairy-800w.jpg"
          alt="Elva dressed as a fairy">
    // ----
    a viewport width of 480px loads the page,
        the (max-width: 600px) media condition will be true
        so the browser chooses the 480px slot.
            The elva-fairy-480w.jpg will be loaded,
                as its inherent width (480w) is closest to the slot size.
    // ----

- Same size, different resolutions

if the device accessing the page has a standard/low resolution display, with
        one device pixel representing each CSS pixel,
            the elva-fairy-320w.jpg image will be loaded
        The 320px image is only 39KB.
    If the device has a high resolution of
        two device pixels per CSS pixel or more,
            the elva-fairy-640w.jpg image will be loaded.
        The 640px image is 93KB.

Art direction

// --------

Use modern image formats boldly

// --------

  cascade
      identical selector and therefore carry the same specificity
      the one that comes last in the CSS is the one that will be used

  Specificity
      element selector is less specific
      class selector is more specific
          specificity scoring

  Inheritance
      some CSS property values
          set on parent elements
              are inherited
                  by their child elements
              and some aren't.
      Some properties do not inherit
          Inherited    yes
              color
              font-family
      Some properties do not inherit
          Inherited    no
              widths
              margins
              padding
              borders
                  do not inherit
              width of 50% on an element
                  all of its descendants
                      do not
                      get a width of 50% of their parent's width

      To summarize
          Conflicting declarations will be applied in the following order, with later ones overriding earlier ones:

          Declarations in user agent style sheets (e.g. the browser's default styles, used when no other styling is set).
          Normal declarations in user style sheets (custom styles set by a user).
          Normal declarations in author style sheets (these are the styles set by us, the web developers).
          Important declarations in author style sheets
          Important declarations in user style sheets
          It makes sense for web developers' stylesheets to override user stylesheets, so the design can be kept as intended, but sometimes users have good reasons to override web developer styles, as mentioned above — this can be achieved by using !important in their rules.

              Specificity
                  The amount of specificity a selector has is measured using four different values (or components), which can be thought of as thousands, hundreds, tens, and ones — four single digits in four columns:
                      Thousands: Score one in this column if the declaration is inside a style attribute, aka inline styles. Such declarations don't have selectors, so their specificity is always simply 1000.
                      Hundreds: Score one in this column for each ID selector contained inside the overall selector.
                      Tens: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector.
                      Ones: Score one in this column for each element selector or pseudo-element contained inside the overall selector.
                          Note: The universal selector (*), combinators (+, >, ~, ' '), and negation pseudo-class (:not) have no effect on specificity.


  p::first-line

  h1,
  .special {
    color: blue;
  }

  // entire rule is deemed invalid.
  // invalid class selector
  h1, ..special {
    color: blue;
  }

  h1 { }
  .box { }
  #unique { }

  a[title] {     }

  a[href="https://example.com"] { }


  // Pseudo-classes
  a:hover { }

  // Pseudo-elements
  p::first-line { }


  // Combinators
  // children
  article > p { }

  ------------------------------------------------------------------------------------
  Selector                          Example                Learn CSS tutorial
  ------------------------------------------------------------------------------------
  Type selector                     h1 {  }                Type selectors              https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors
  Universal selector                * {  }                 The universal selector      https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors
  Class selector                    .box {  }              Class selectors             https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
  id selector                       #unique { }            ID selectors                https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors
  Attribute selector                a[title] {  }          Attribute selectors         https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
  Pseudo-class selectors            p:first-child { }      Pseudo-classes              https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
  Pseudo-element selectors          p::first-line { }      Pseudo-elements             https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

  Adjacent sibling combinator       h1 + p                 Adjacent sibling            https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
  General sibling combinator        h1 ~ p                 General sibling             https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

  Child combinator                  article > p            Child combinator            https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
  Descendant combinator             article p              Descendant combinator       https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator
  ------------------------------------------------------------------------------------


  // descendant selector along with the <article> element selector:
  article :first-child {
      font-weight: bold;
  }
  article *:first-child {
    font-weight: bold;
  }

  // select any <article> element that is the first child of another element.
  article:first-child {
      font-weight: bold;
  }

  span.highlight {
      background-color: yellow;
  }

  h1.highlight {
      background-color: pink;
  }

  // -----

  .notebox {
    border: 4px solid #666;
    padding: 1.5em;
  }

  .notebox.warning {
    border-color: orange;
    font-weight: bold;
  }

  <div class="notebox">
      This is an informational note.
  </div>

  <div class="notebox warning">
      This note shows a warning.
  </div>

  // -----

  #one {
      background-color: yellow;
  }

  h1#heading {
      color: rebeccapurple;
  }

  // -----


  Selector          Example                           Description
  [attr]            a[title]                          Matches elements with an attr attribute (whose name is the value in square brackets).
  [attr=value]      a[href="https://example.com"]     Matches elements with an attr attribute whose value is exactly value — the string inside the quotes.
  [attr~=value]     p[class~="special"]               Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.
  [attr|=value]     div[lang|="zh"]                   Matches elements with an attr attribute whose value is exact.

  Selector          Example                          Description
  [attr^=value]     li[class^="box-"]                Matches elements with an attr attribute (whose name is the value in square brackets), whose value begins with value.
  [attr$=value]     li[class$="-box"]                Matches elements with an attr attribute whose value ends with value.
  [attr*=value]     li[class*="box"]                 Matches elements with an attr attribute whose value contains value anywhere within the string.

  li[class^="a"] {
      background-color: yellow;
  }

  li[class^="a" i] {                                no case
      color: red;
  }

  // -----

  :pseudo-class-name

  article p:first-child {
      font-size: 200%;
      font-weight: bold;
  }

  :last-child
  :only-child
  :invalid

  // -----

  input:invalid {
    background-color: pink;
  }
  input:required {
    border-color: #800000;
    border-width: 3px;
  }
  input:required:invalid {
    border-color: #c00000;
  }
  form:invalid {
    border: 5px solid #ffdddd;
  }
  form:valid {
    border: 5px solid #ddffdd;
  }

  <input type="url" id="url_input">
  <input type="email" id="email_input" required>

  // -----

  a:link,
  a:visited {
      color: rebeccapurple;
      font-weight: bold;
  }

  a:hover {
      color:hotpink;
  }

  // -----
  // -----
  ::pseudo-element-name

  article p::first-line {
      font-size: 120%;
      font-weight: bold;
  }

  // -----

  // select the first line
  //    of the first <p> element
  //    which is inside an <article> element

  article p:first-child::first-line {
    font-size: 120%;
    font-weight: bold;
  }

  // -----

  .box::after,
  .box::before {
      content: "✓ ";
      font-weight: bold;
      color: red;
      background-color: yellow;
  }

  <p class="box">Content in the box in my HTML page.</ >

  .box::before {
      content: "AA";
      display: block;
      width: 100px;
      height: 100px;
      color: yellow;
      background-color: rebeccapurple;
      border: 1px solid black;
  }

  // -----


  // -----

  /* Make selected text gold on a red background */
  ::selection {
    color: gold;
    background-color: red;
  }

  /* Make selected text in a paragraph white on a blue background */
  p::selection {
    color: white;
    background-color: blue;
  }

  Conflicting declarations will be applied in the following order, with later ones overriding earlier ones:
      Declarations in user agent style sheets (e.g. the browser's default styles, used when no other styling is set).
      Normal declarations in user style sheets (custom styles set by a user).
      Normal declarations in author style sheets (these are the styles set by us, the web developers).
      Important declarations in author style sheets
      Important declarations in user style sheets


  -------------------------------------------------------------------------------------
  Pseudo-classes
  -------------------------------------------------------------------------------------
      Selector            Description
  -------------------------------------------------------------------------------------
      :active             Matches when the user activates (for example clicks on) an element.
      :any-link           Matches both the :link and :visited states of a link.
      :blank              Matches an <input> element whose input value is empty.
      :checked            Matches a radio button or checkbox in the selected state.
      :current            Matches the element, or an ancestor of the element, that is currently being displayed.
      :default            Matches the one or more UI elements that are the default among a set of similar elements.
      :dir                Select an element based on its directionality (value of the HTML dir attribute or CSS direction property).
      :disabled           Matches user interface elements that are in an disabled state.
      :empty              Matches an element that has no children except optionally white space.
      :enabled            Matches user interface elements that are in an enabled state.
      :first              In Paged Media, matches the first page.
      :first-child        Matches an element that is first among its siblings.
      :first-of-type      Matches an element which is first of a certain type among its siblings.
      :focus              Matches when an element has focus.
      :focus-visible      Matches when an element has focus and the focus should be visible to the user.
      :focus-within       Matches an element with focus plus an element with a descendent that has focus.
      :future             Matches the elements after the current element.
      :hover              Matches when the user hovers over an element.
      :indeterminate      Matches UI elements whose value is in an indeterminate state, usually checkboxes.
      :in-range           Matches an element with a range when its value is in-range.
      :invalid            Matches an element, such as an <input>, in an invalid state.
      :lang               Matches an element based on language (value of the HTML lang attribute).
      :last-child         Matches an element which is last among its siblings.
      :last-of-type       Matches an element of a certain type that is last among its siblings.
      :left               In Paged Media, matches left-hand pages.
      :link               Matches unvisited links.
      :local-link         Matches links pointing to pages that are in the same site as the current document.
      :is()               Matches any of the selectors in the selector list that is passed in.
      :not                Matches things not matched by selectors that are passed in as a value to this selector.
      :nth-child          Matches elements from a list of siblings — the siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.)
      :nth-of-type        Matches elements from a list of siblings that are of a certain type (e.g. <p> elements) — the siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.)
      :nth-last-child     Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)
      :nth-last-of-type   Matches elements from a list of siblings that are of a certain type (e.g. <p> elements), counting backwards from the end. The siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)
      :only-child         Matches an element that has no siblings.
      :only-of-type       Matches an element that is the only one of its type among its siblings.
      :optional           Matches form elements that are not required.
      :out-of-range       Matches an element with a range when its value is out of range.
      :past               Matches the elements before the current element.
      :placeholder-shown  Matches an input element that is showing placeholder text.
      :playing            Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”.
      :paused             Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”.
      :read-only          Matches an element if it is not user-alterable.
      :read-write         Matches an element if it is user-alterable.
      :required           Matches form elements that are required.
      :right              In Paged Media, matches right-hand pages.
      :root               Matches an element that is the root of the document.
      :scope              Matches any element that is a scope element.
      :valid              Matches an element such as an <input> element, in a valid state.
      :target             Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current URL fragment).
      :visited            Matches visited links.
  -------------------------------------------------------------------------------------
  Pseudo-elements
  -------------------------------------------------------------------------------------
      Selector            Description
  -------------------------------------------------------------------------------------
      ::after                Matches a stylable element appearing after the originating element's actual content.
      ::before            Matches a stylable element appearing before the originating element's actual content.
      ::first-letter        Matches the first letter of the element.
      ::first-line        Matches the first line of the containing element.
      ::grammar-error        Matches a portion of the document containing a grammar error as flagged by the browser.
      ::marker            Matches the marker box of a list item, which typically contains a bullet or number.
      ::selection            Matches the portion of the document that has been selected.
      ::spelling-error    Matches a portion of the document containing a spelling error as flagged by the browser.
  -------------------------------------------------------------------------------------

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events


  // CPBM

  .box {
    width: 350 px;
    height: 150 px;
    padding: 25 px;
            border: 5 px solid black;
              margin: 10 px; // not counted as box
  }
  // standard box model = w/h = w/h + 2*p + 2*b
  //    width    = 410px (350 + 25 + 25 + 5 + 5)
  //    height    = 210px (150 + 25 + 25 + 5 + 5)

  .box {
    box-sizing: border-box;
  }
  // alternative CSS box model
  //     width    = 350px
  //    height    = 150px

  // -----
  .container {
    width: 200px;
    height: 200px;
  }
  .box {
    width: 10px;
    height: 10px;
    margin-top: -20px;
    margin-left: -20px;
  }

  <div class="container">
    <div class="box"></div>
  </div>

  // -----
  .one {
  margin-bottom: 10px;
  }

  .two {
  margin-top: 10px;
  }

  div {
      background-color: red
  }

  <div class="container">
    <div class="one">I am paragraph one.</div>
    <div class="two">I am paragraph two.</div>
  </div>

  // -----
  .container {
    border: 1px solid black;
  }

  .box {
    border: 1px solid black;
    border-left-width: 111px;
  }
  <div class="container">
    <div class="box">Change my borders.</div>
  </div>


    border: 10px solid rebeccapurple;
    border-radius: 1em;
    border-top-right-radius: 10% 30%;
    border-radius: 10% 90% 10% 90%;


  h1 {
      // writing-mode: vertical-lr;
      // writing-mode: vertical-rl;
      // writing-mode: horizontal-tb;
      //         writing-mode: sideways-rl;
      //         writing-mode: sideways-lr;
  }
  <h1>Play with writing modes</h1>

  .horizontal {
    writing-mode: horizontal-tb;
  }

  .vertical {
    writing-mode: vertical-rl;
  }
  <div class="wrapper">
    <div class="box horizontal">
      <h2>Heading</h2>
      <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
    </div>
    <div class="box vertical">
      <h2>Heading</h2>
      <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
    </div>
  </div>



  .wrapper {
     font-size: 1em;
  }

  .px {
    width: 100px;
  }

  .vw {
    width: 10vw;
  }

  .em {
    width: 10em;
  }

  <div class="wrapper">
    <div class="box px">1em 100px</div>
    <div class="box vw">1em 10vw</div>
    <div class="box em">1em 10em</div>
  </div>

  // ------------
  html {
    font-size: 10px;
  }

  .ems li {
    font-size: 1.5em;
  }

  .rems li {
    font-size: 1.5rem;
  }

  <ul class="ems">
    <li>Two</li>
    <li>Three
      <ul>
        <li>Three B
          <ul>
            <li>Three B 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  <ul class="rems">
    <li>Two</li>
    <li>Three
      <ul>
        <li>Three B
          <ul>
            <li>Three B 2</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

  // ------------

  .pcnts li {
    font-size: 80%;
  }


  // ------------
  .box {
    opacity: 0.7;
  }

  // ------------
  .one {
    background-color: rgba(197, 93, 161, .3);
  }
  <div class="box one">rgba(2, 121, 139, .3)</div>


  .box {
    border: 5px solid darkblue;
    min-height: 250px;
    width: 200px;
  }



  .box {
    border: 1px solid darkblue;
    width: 20vw;
    height: 20vh;
    font-size: 20vh;
  }

  /* spacing */

  table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border: 3px solid purple;
  }

  thead th:nth-child(1) {
    width: 30%;
  }

  thead th:nth-child(2) {
    width: 20%;
  }

  thead th:nth-child(3) {
    width: 15%;
  }

  thead th:nth-child(4) {
    width: 35%;
  }

  th, td {
    padding: 20px;
  }


  <div class="wrapper">
    <div class="box"><img src="balloons.jpg" alt="balloons" class="cover"></div>
    <div class="box"><img src="balloons.jpg" alt="balloons" class="contain"></div>
  </div>


  input[type="text"],
  input[type="email"] {
    border: 2px solid #000;
    margin: 0 0 1em 0;
    padding: 10px;
    width: 100%;
  }

  input[type="submit"] {
    border: 3px solid #333;
    background-color: #999;
    border-radius: 5px;
    padding: 10px 2em;
    font-weight: bold;
    color: #fff;
  }

  input[type="submit"]:hover {
    background-color: #333;
  }

  <form>
    <div><label for="name">Name</label>
    <input type="text" id="name"></div>
    <div><label for="email">Email</label>
    <input type="email" id="email"></div>

    <div class="buttons"><input type="submit" value="Submit"></div>
  </form>


  $base-color: #c6538c;

  .alert {
    border: 1px solid $base-color;
  }

  // Once compiled to CSS, you would end up with the following CSS in the final stylesheet.

  .alert {
    border: 1px solid #c6538c;
  }


  body {
    width: 300px;
    margin: 0 auto;
    font-size: 1.2rem;
    font-family: sans-serif;
  }

  p {
    line-height: 1.4;
  }

  a {
    outline: none;
    text-decoration: none;
    padding: 2px 1px 0;
  }

  a:link {
    color: #265301;
  }

  a:visited {
    color: #437A16;
  }

  a:focus {
    border-bottom: 1px solid;
    background: #BAE498;
  }

  a:hover {
    border-bottom: 1px solid;
    background: #CDFEAA;
  }

  a:active {
    background: #265301;
    color: #CDFEAA;
  }

Notes

Previous

Tools

Elements

CSS properties

Svg

Design - Planning a simple website

Links:

Links/ Notes: