Go from zero to hero:

Be cross-platform devs with React Native

ARISA FUKUZAKI

DevRel Engineer at Storyblok

3 takeaways from my talk

→

Cross-platform dev potential

Ecosystem in cross-platform dev technologies

→

→

React Native examples

Notes ⚠️

→

This talk content is for cross-platform & React Native beginners

The purpose: Aim to show more frontend technology possibilities

→

Mainly showing webs & mobile OS examples

→

Cross-platform development

A way to build apps that are compatible with multiple devices/operating systems.

You can reuse 50-80% of your code

Source: https://www.dotcominfoway.com/blog/infographics-on-native-app-vs-cross-platform-app-development/

A cross-platform app like Discord has

74 million downloads

Source: https://www.inverse.com/input/gaming/discords-download-numbers-are-climbing-fast-thanks-to-among-us

Comparison with native apps

4.9 billion downloads

5.2 billion downloads

281 million downloads

Source: https://www.dotcominfoway.com/blog/infographics-on-native-app-vs-cross-platform-app-development/

Now, we know

Cross-platform development has quite good numbers and facts.

But, there are many frameworks for cross-platform technologies

You can’t just learn all in one day.

But if you know JavaScript & React,

you already have more than fundamental💪

Learning cost comparison with native app technologies

Learn once

Learn twice

Let’s talk about some cross-platform ecosystem

JavaScript-base

Ships with some pre-built

Ships with some pre-built

Ships with loads of pre-built

Partially adaptive components

Mostly adaptive components

Fully adaptive components

JavaScript-base

Ships with some pre-built

Ships with some pre-built

Ships with loads of pre-built

Partially adaptive components

Mostly adaptive components

Fully adaptive components

JavaScript-base

Ships with some pre-built

Ships with some pre-built

Ships with loads of pre-built

Partially adaptive components

Mostly adaptive components

Fully adaptive components

Choose the best option depends on your cases.

Moving on to fun part: Code examples

2 examples to see

→

React Native stand-alone case

→

With CMS

React Native Stand-alone Example

Snack

Preview options

Physical devices (Expo Go)

Emulators (Android Studio, Xcode)

→

→

→

Use built-in Core Components

→

User Interface / Pressable

→

Android Components & APIs

→

iOS Components & APIs

→

Basic Components

→

Others (i.e. StatusBar, etc)

A container to support layout with flexbox, styles & touch handling

<View />

→

import { StatusBar } from 'expo-status-bar';

import { StyleSheet, View, Image } from 'react-native';

//...

​

export default function App() {

return (

<View style={styles.container}>

<View style={styles.imageContainer}>

<Image />

</View>

<StatusBar style="auto" />

</View>

)

}

//...

App.js

React image component including images from local disc (camera roll)

<Image />

→

import { StatusBar } from 'expo-status-bar';

import { StyleSheet, View, Image } from 'react-native';

//...

​

export default function App() {

return (

<View style={styles.container}>

<View style={styles.imageContainer}>

<Image

source={PlaceholderImage}

style={styles.image}

/>

</View>

<StatusBar style="auto" />

</View>

)

}

//...

App.js

Similar to CSS StyleSheets

StyleSheet

→

import { StatusBar } from 'expo-status-bar';

import { StyleSheet, View, Image } from 'react-native';

//...

​

export default function App() {

return (

<View style={styles.container}>

//...

</View>

)

}

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

},

});

App.js

Alternative of Button. It detects various touch events (single touch, long press, etc)

<Pressable />

→

import { View, Pressable } from 'react-native';

​

export default function Button({ onPress }) {

return (

<View>

<Pressable

onPress={() => alert('You pressed a

button')}

>

</Pressable>

</View>

);

}

Button.js

App.js

<View>

<Button label="Choose a photo" />

<Button label="Use this photo" />

</View>

3rd party lib API example

→

captureRef

→

MediaLibrary

Workflow

→

2. Save files at user’s media lib

→

1. Check/request permissions to access media lib

→

3. Screenshot the view & return an image

@arisa_dev

@storyblok

import * as MediaLibrary from 'expo-media-library';

​

const [permissionResponse, requestPermission] = MediaLibrary.usePermissions();

permissionResponse === null ? requestPermission() : null

Workflow

→

2. Save files at user’s media lib

→

1. Check/request permissions to access media lib

→

3. Screenshot the view & return an image

@arisa_dev

@storyblok

import * as MediaLibrary from 'expo-media-library';

​

await MediaLibrary.saveToLibraryAsync(localUri);

localUri ? alert("Saved!") : null

Workflow

→

2. Save files at user’s media lib

→

1. Check/request permissions to access media lib

→

3. Screenshot the view & return an image

@arisa_dev

@storyblok

import { captureRef } from 'react-native-view-shot';

import { useRef } from 'react';

​

const localUri = await captureRef(useRef(), {

height: 440,

quality: 1,

});

Now, remember what you saw.

Component-based approach

→

Advanced-app-ready APIs

→

Syntax is almost the same

React Native & CMS Example

So far, you need to help editing content 😱

You don’t need to do that if you serve content from CMS👍

CMS will serve content across different devices & OS

Logic behind

→

Get access token (CMS → code)

→

Render dynamic components

→

Wrap with editable components

→

Initialize API from CMS

Summary

• Know built-in APIs → Shortcut to master cross-platform technologies
• You can build scalable & easy-to-maintain apps

Sticker Smash app

→ https://github.com/schabibi1/StickerSmash

​

Expo Sticker Smash app tutorial

→ https://docs.expo.dev/tutorial/introduction/

​

React Native & headless CMS app

→ https://github.com/storyblok/storyblok-react-native-starter