React native for ReactJS developers

How react-native works ?

We have JS land and native platform code(IOS, android)

We have a React-native bridge to communicate between JS and native platform (binding)

If we have a list of events is being sent to JS thread to handle some business-logic, it can cause a performance issues

The data will be JSON.serialize to talks to each other(Native and JS)

Not to mention: the thread for JS (think of it as safari for IOS) has to be initialized on start-up(app)

1)Tools

Node and Watchman

Node : Run JS that binds to C

Watchman is a utility that watches for file changes and updates code on Simulator

NPM: to download JS packages (react-native)

<Text> (React Native) is implemented by RCTText (iOS) and ReactTextView.java

Xcode: Apple's official development environment for building and running applications on Mac OS and iOS

ES6 with babel : babel enables syntactic improvements to the language through syntax transformer

{

"presets": ["react-native"];

} is a shorthand for the following Babel transpilations:

class-properties, es2015-arrow-functions, es2015-block-scoping,es2015-classes
,es2015-computed-properties • es2015-destructuring, es2015-for-of

2)Core component with react native

💡

Flexbox default is flexDirection:"column"

Community Components

Native components

Are written in native code

React native styles

import {StyleSheet} from 'react-native';

function HomeScreen(){
 return 
    <View style={styles.container}>
        <Text> Hello World </Text>
    </View>
}

const styles = StyleSheet.create({
    container: {
        color:"red",
        flexDirection:"column"
    }
})

Platform.select

  ...Platform.select({
      ios: { paddingTop: 20 },
      android: {
        paddingTop: StatusBar.currentHeight,
      },
    }),

💡

The preceding Platform.select() code is an example of a case where you need to implement a workaround for differences in the platform. For example, if StatusBar.currentHeight was available on iOS and Android, you wouldn't need to call Platform.select().

How to center everything

   export default StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "ghostwhite",
    ...Platform.select({
    ios: { paddingTop: 20 },
    android: { paddingTop: StatusBar.currentHeight }
    })
    },
    box: {
    width: 100,
    height: 100,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "lightgray"
    },
    boxText: {
    color: "darkslategray",
    fontWeight: "bold"
    }
});

Width 100% vs alignSelf

💡

AlignSelf:strech is default in flexbox on web

💡

We no-longer have to calculate the width of flex-items (computed on a fly now)

Portrait mode vs Landscape orientation

Flexible grid

Sometimes, you need a screen layout that flows like a grid. For example, what if you have several sections that are the same width and height, but you're not sure how many of these sections will be rendered?

import { Platform, StyleSheet, StatusBar } from 'react-native';
   export default StyleSheet.create({
     container: {
       flex: 1,
       flexDirection: 'row',
       flexWrap: 'wrap',
       backgroundColor: 'ghostwhite',
       alignItems: 'center',
       ...Platform.select({
         ios: { paddingTop: 20 },
          android: { paddingTop: StatusBar.currentHeight }
       })
},
     box: {
       height: 100,
       width: 100,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: 'lightgray',
       borderWidth: 1,
       borderStyle: 'dashed',
       borderColor: 'darkslategray',
       margin: 10
},
     boxText: {
       color: 'darkslategray',
       fontWeight: 'bold'
} });

Write our own Row and Column component

.....

Composing stylesheet

How do we reuse as many styles as possible and keep the application’s look and feel consistent?

1.Color

2.Typography choices

3.Global styles

import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');

// COLOR
export const colors = { PRIMARY: '#005D64', SECONDARY: '#CA3F27',
}

// TYPOGRAPHY
const scalingFactors = { small: 40,
normal: 30,
big: 20,
}
export const fontSizes = { 
H1: {.  fontSize: width / scalingFactors.big,
        lineHeight: (width / scalingFactors.big) * 1.3,
    },
P:  {
        fontSize: width / scalingFactors.normal,
        lineHeight: (width / scalingFactors.normal) * 1.3,
},

SMALL: {
        fontSize: width / scalingFactors.small,
}, }
    // GLOBAL STYLES
export const globalStyles = { textHeader: {...fontSizes.H1,
        color: colors.PRIMARY,
        paddingTop: 20,
        fontWeight: 'bold',
}, }

Base-component

import React from 'react'; import {
Text,
} from 'react-native';
import { globalStyles, colors } from '../styles';

export function TextHeading (props) {
return <Text style={globalStyles.textHeader} >{props.children}</Text>
}
export function SecondaryTextHeading(props) {
 return <Text style={[globalStyles.textHeader, { color: colors.SECONDARY } ]} >
          {props.children} </Text>
}

Function component vs Class component

💡

In web, we have everything (stack,draw,tab) navigation ^^

NavigationContainer - responsible for managing your app state and linking your top-level navigator to the app environment
Navigator- managing the presentation of, and transition between, multiple screens

Screen components- are used to configure various aspects of screens inside a navigator

  <NavigationContainer>
      <Stack.Navigator>
          <Stack.Screen
           name="Home"
           component={Screen1}
           options={{title:'Home'}}
           >
          <Stack.Screen
           name="AboutUs"
           component={Screen2}
           options={{title:'Aboutus'}}
           >            
          </Stack.Screen>
      </Stack.Navigator>
  </NavigationContainer>

Install navigation library

npm install @react-navigation/native

npx expo install react-native-screens react-native-safe-area-context

Install navigator

npm install @react-navigation/native-stack

npm install @react-navigation/bottom-tabs

npm install @react-navigation/drawer

npm install @react-native-gesture-handler react-native-reanimated

Moving between screens

Passing data to another screen

Expo router vs react-navigation/native

Expo Router is a new navigation and routing library. It serves the same core purpose as react navigation, but it approaches it in a different way. Instead of having to write a lot of code related to how your screens are linked together (known as a 'Stack'), you instead create files and folders. For example, if you create the file /auth/login.tsx and add code for your login screen, then your login screen will be accessible at /auth/login. It uses concepts that existed in the very early days of the web (like being able to just link to a different page, which would just be a different file).

Root layout

Between multiple routes, a Root layout file in Expo Router is used to share UI between multiple routes such as injecting global providers, themes, styles, delay splash screen rendering until assets and fonts are loaded, or defining your app's root navigation structure.

https://docs.expo.dev/develop/file-based-routing/