Using AppCenter’s services in a React Native application.

Photo by Liam Charmer on Unsplash

AppCenter is a cloud service from Microsoft that provides services like monitoring, diagnostic, analytics, CI and many others.

In this post, we will be integrating AppCenter SDK into a React native app. I have been using AppCenter in my work for a long time and I can testify that it’s a real time saver when it comes to building, integrating and distributing your app for testers or to the app stores.

First, let’s generate a new React Native app using React native CLI and start integrating the AppCenter SDK.

Let’s get started and bootstrap a new project.

react-native init appcenterSdkIntegration


Explore the best ways to style a React Native application

If you are just started with React Native or even you are experienced with it, you may find the styling a little bit challenging for the first time. that happens when you come especially from the web background and when you try to write React Native style as you usually do when you write CSS on the web and you find out what you expected. the method that React Native use for styling use CSS properties and it’s actually not the same as normal CSS. …


Going From Static to dynamic Routes!

React Navigation is the closest navigation library to come in mind when we are talking about the navigation in React Native, I’m a big fan of this library and my first solution to handle the Navigation in React Native, it has an awesome and easy API, very customizable. version 5 just went from beta to stable. and it comes with some features changes and new API design that is a simple and different way to declare the Routes.

In this article, we are going through the new APIs and ways to use them in…


Replacing the Gesture Responder System with the Gesture Handler.

Credit https://undraw.co/

React Native Gesture handler makes it easy for us to deal with gestures in react-native by providing an easy declarative API. I personally use this library every day and enjoy saving time and not worrying about the details of how it actually works.

Tip: Use Bit to share and reuse React components across different projects. Collaborate over shared components as a team to build apps faster together. Let Bit do the heavy lifting so you can easily publish, install and update your individual components without any overhead. Click here to learn more.


My list of top 5 React Native animation libraries.

Animations have a great impact on mobile to create better the user experience, they are mostly used to interact with user’s actions and that keeps the user more engaged with your app.

In the technical side, React Native offers us a powerful declarative API to make animations usually called Animated API however, sometimes you may want to use some third party libraries to handle animations for you without dealing directly with Animated API and that’s what we are going to explore in this article and talk about 5 top animations libraries you can use in React Native.

Tip: Reuse React components

Use Bit to…


Learn how to use Flexbox with React Native

Photo by Hamed Daram on Unsplash

React native uses Flexbox to handle the layout. Flexbox makes it easy to distribute the UI elements in the container. The way that flexbox works in React Native is a bit different than the way it works on the web — that’s why we are going to demystify it here and give you a clear idea of how FlexBox in React Native deals with the Layout.

In React Native we have two options to define the layout, first, we can use the classic way using width and height properties, secondly React Native offer us Flexbox method which is great to…


WebView is the channel that connects React Native with Web platforms, giving us many great options to create a sort of connections to our app that is running on the Web!

Using WebView element has a many of advantages it can be used for embedding or running a web application inside our React Native app that’s good especially if you have a web app and you want to connect that app the with your React Native app or even get access to the other platforms (google maps ex).

for a better understanding of the use cases of WebView, we are going to build a WebView that can load a web page and control the navigation!

Tip: Leverage components to build more modular software. Use tools like Bit (GitHub) to develop, share…


The animations are an important part of the UX of an app, and interacting with the user using the animations create a better experience for the user, the most successful user experience are made with animations, that’s why we are goin to play around animations in React Native, technically React Native provide a great animations API that give us the ability to do different transitions and the animations .

New to React Native? check my article introduction to React Native check this out!

You may want how to style a React Native app and the options you can use to…

SaidHayani@

Manage your newsletter on subscribi.io, hit me up if you want to write documentation for your app -> info.said.dev@gmail.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