bergmannjg

Building a react native app in WSL2

Install, build and debug a react native app in WSL2 (Windows Subsystem for Linux) and Ubuntu.

• Install tools in Windows
• Install tools in WSL2
• Connect to android hardware device from WSL2
• Connect to android virtual device in Windows
  • Start android virtual device in Windows
• Start adb server in Windows

GalloDaSballo

<?php
  /**
  * Template Name: Landing Page
  *
  */
?>
<?php get_header(); ?>
  <div class="Hero">
    <h2>The Power of You</h2>
    <h3>Everything begins with you. Your data, your design and your delivery are second to none with Utilitec.</h3>

prof3ssorSt3v3

import React from 'react';
import { StyleSheet, Text, View, Button, ScrollView } from 'react-native';
import {Spinner} from 'native-base';

//yarn add native-base
//npm i --save native-base

export default class App extends React.Component {
    constructor(){
        super();

gaearon

function MyResponsiveComponent() {
  const width = useWindowWidth(); // Our custom Hook
  return (
    <p>Window width is {width}</p>
  );
}

prof3ssorSt3v3

import React, { Component } from 'react';
import './App.css';
// VERSION 2.x of React Animation Add-on

//import { Transition } from 'react-transition-group';     //the lifecycle events for appear, enter, leave
import { CSSTransition } from 'react-transition-group';  //the css animations extends Transition
import { TransitionGroup } from 'react-transition-group';   //manage a group of transitions

export default class App extends Component {
    

prof3ssorSt3v3

import React, {Component} from 'react';

export default class Person extends Component{
    
    constructor(props){
        super(props);
        this.state={
            hasChanged: false
        }
    }

prof3ssorSt3v3

import React, {Component} from 'react';

export default class LittleSister extends Component{
    
    
    styleObj = {
        padding: '1rem',
        fontSize: '2rem',
        border: '1px solid #999',
        backgroundColor: this.props.bgcolor

prof3ssorSt3v3

import React, {Component} from 'react';

export default class BigBrother extends Component{
    constructor(){
        super();
        this.state = {
            toys: ['Lego', 'Playdough'],
            currentToy: null
        }
    }

prof3ssorSt3v3

import React, {Component, Fragment} from 'react';
import BigBrother from './BigBrother';
import LittleSister from './LittleSister';
import LittleBrother from './LittleBrother';

export default class Parent extends Component{
    /****
    A component with a render prop takes a function
    that returns a React element and calls it 
    instead of implementing its own render logic.

prof3ssorSt3v3

import React, {Component, Fragment} from 'react';

export default class MyComponent extends Component{
    
    constructor(props){
        super(props);
        //initial state values
        this.state = {
            name: props.name,
            domain: props.domain