Hello React Native, Debugging

Lets create our first react native project,

Go to command line and CD to desired directory, In this case, I have a folder called MyReactProject directory in my user directory

execute

$ react-native init MyBaseProject

Once project is fully created, Open the directory “MyBaseProject” in Visual Studio Code.

Let’s start from App.js, remove all codes and type as below

import React, {Component} from 'react';
import {View,TextInput,Text, StyleSheet} from 'react-native';

const myStyle = StyleSheet.create({
  viewStyle:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  },
  textStyle:{
    fontSize:24,
    color:'green'
  }
});


export class MyComponent extends Component{
  constructor(props){
    super(props)
  }

  render(){
    return <View>
      <Text>{this.props.name}</Text>
    </View>
  }
}


export default class App extends Component{
  constructor(props){
    super(props);
    console.log("constructor called");
  }

  render(){
    return <View style={myStyle.viewStyle}>
      <Text style={myStyle.textStyle}>Hello World</Text>
      <MyComponent name="My Custom Component loaded" />
    </View>
  }
}

If we closely look React-native stylesheet follows almost all properties of CSS specifications, but with camel casing in the middle.

Following points to be noted

  • Within JSX syntax JavaScript code can be written within single curly brace, example {this.props.name} in MyComponent
  • style attribute of Components (in this example View and Text) expects a JavaScript Object. Not to be confused as double curly brace, eg style={{myStyle.viewStyle}} first curly brace is to allow JavaScript code block and {myStyle.viewStyle} is a JavaScript Object
  • We keep constructor with props argument with super(props), This is to make sure parent class Component props properly executed and ready for further changes in child class. In this case, classes App and MyComponent are the child classes since they are inheriting everything from Component parent class

StyleSheets

Style properties can be written inline as a javascript object. But in above example we have declared a const myStyle and we specify different properties for View, Text Components.

flex

A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

You will normally use a combination of flexDirectionalignItems, and justifyContent to achieve the right layout.

flexDirection

Adding flexDirection to a component’s style determines the primary axis of its layout. Should the children be organised horizontally (row) or vertically (column)? The default is column.

We will look in this section in detail in following sections…

Debugging and reloading

When code is updated, we can refresh the view in Emulator by double tapping R for android, ⌘R if iOS emulator

We can access developer menu by typing ⌘M in Mac or Ctrl+C in windows

Enabling Remote JS Debugging will open the Chrome browser (Right now chrome only supported), we can access inspector window to see console logs

Download source code

Leave a Reply

Your email address will not be published. Required fields are marked *