Image for post
Image for post
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.

Link to iOS part:

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.


Image for post
Image for post
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, let’s assume that you downloaded Zoom SDK (or cloned my repo with my example and SDKs). …


Image for post
Image for post
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 React…


Image for post
Image for post
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.

In this article, I will focus on React Native and React (a bit) and explain how we can build a static web version of Storybook from React Native project. …


Image for post
Image for post
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


Image for post
Image for post
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 know how permissions e.g. for camera work in Android and iOS. …


Image for post
Image for post
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: For what cause or reason, the reason for which, for what reason.

About

Stefan Majiros

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