Photo by Fotis Fotopoulos on Unsplash

by Stefan Majiros

NOTE: Link to repo is in the bottom of this article. But instead of cloning it directly, try first to understand what’s going on please.

This is tutorial about how to integrate ZoomSDK into React Native app.We will cover how to initialize Zoom SDK, join meeting and start meeting from the mobile device.

Well, make yourself coffee(tea) and start reading.

Let’s start from the scratch and create RN app by using “npx react-native init ZoomExampleRN” command. Then, we just run the app to validate that there are not any issues with environment.


or what docs don’t tell you

After working quite a long time (in frontend world) with React Native, I decided to try Flutter (it is never good being tied to single framework for long-time). This post will be about installation and environment of RN and Flutter.

This won’t be about reasons why you SHOULD or SHOULD NOT use one, or another framework. We are all adults, and there are always multiple ways to achieve exactly the same goal. Same here.

I will also not talk much about technical details like props, local component state, or ‘global’ state management libraries here…


Photo by Denis Cherkashin on Unsplash

by Stefan Majiros

In this article written in December 2020 I will show you techniques for integrating Zoom SDK into iOS apps built with React Native. I decided to create this tutorial to help people save time and also because other Zoom wrappers for RN did not work as I would expect.

We will implement 3 methods: initZoom, joinMeeting and startMeeting.

NOTE: Link to repo with example app is in the end of this article.

If you want to see how to download and setup API keys for Zoom SDK, or setup Android part, just read about it here:

So…


Photo by Zan on Unsplash

Recently I was integrating native Android components into React Native. It quite surprised me, that there are still some undocumented tricks and tips especially for adding more complex views or fragments in the Android ecosystem. In this post, I will try to write them down together. See the detailed content below:

Content

  • Intro

React Native Package

  • Creating MyXXXPackage class

Native module integration example

Native components (views) and ViewManager

  • Creating native view component (and from XML files)
  • Rendering native view component in React Native

Native components (fragments)

  • Committing fragments to the views
  • Rendering fragment's placeholder
  • Finding the ID of the view in…


Photo by Caspar Camille Rubin on Unsplash

At first, I need to give credit and say "Thank you" : I wrote this article with the help of this post on the Stackoverflow by this user . I was looking for the solution of this problem for longer time, but did not find something usable.

Storybook has evolved to be the holy-grail for frontend development. Currently, it supports all big players of the frontend scene like Angular, Vue, React & React Native and many other frameworks with not so big developer base.

As many of you already know, Storybook setup differs platform by platform- see official instructions here.


Photo by Alexander Schimmeck on Unsplash

During my recent work with Storybook, I found small problems with SVG and react-native-svg package. So I thought I will share a few ideas that could save time for anybody else.

I needed to install

  • react-native-svg (12.0.3)
  • react-native-svg-transformer (0.14.3)

Then, I slightly modified metro.config.js:

Now, we can render SVGs directly in stories or React Components:

  • Search.svg contains only XML metadata (as they were exported from Sketch)
  • ES6-import support for SVG files
  • Rendering SVGs it was React Component


Photo by Thought Catalog on Unsplash

What do you need to master to be considered to be a React Native Expert? To gain precious knowledge, you should start with the following:

Start With React Native

The architecture of React-Native Apps. It should teach you about Core components of React Native (View, ListView, Image, ScrollView, Dimensions, Text, Touchable, Modal, WebView, Vibration, StatusBar) and their hierarchy. You should know RN Tools e.g. like what is metro/packager, RN bridge, watchman, npm.

With writing code, you may need to debug your app, using either default Chrome Developer Tools or by accessing system logs (either with Logcat or XCode console).

You will also need to…


Photo by Allef Vinicius on Unsplash

+ my personal opinions

Intro

It was autumn 2019 when I decided to dive deep into waters of the React-Native. I had some previous experience with React, but no experience with native code and neither with cross-platform languages. To adopt React Native I decided to build the application for students at STUBA (Slovak Technical University). “It would be just another simple and typical client-server mobile application, it just cannot be that hard”, I thought - but by reading this article you can assume I was wrong.

If I should start again or advise somebody, the following would be the words I needed:

1. Find your “WHY”

“Why”, Noun…

Now open to contract / freelance work ! https://stefan-majiros.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store