Crafting a 3D React Carousel

Crafting a 3D @reactjs Carousel by @bobiblazeski 

Demo:

  • My first rule was the animation wont reset when I add and remove elements, change the layout or rotate the carousel.
  • Drawing the carousel with the suggested layout wasn’t too hard, and I’ve managed to transform DeSandro CSS rules into JavaScript functions without much problems.
  • If you want to add additional layout say the one used in the Royal 3D carousel or the star topology of the Ultimate 3D carousel you have to implement two functions which calculate the distance from the viewer and the position of each figure.
  • This enables the carousel to be extensible with additional layout, but the user will have to find a way to express the layout as a function.
  • The carousel has intermediate state when it rotates and when it adds or removes sides, which are made worse by ability to change layout on the fly which completely changes the look of the carousel.

Learn how to create a 3D carousel using the React JavaScript Framework!
Continue reading “Crafting a 3D React Carousel”

Getting Started with Expo React Native and Styled Components using a Netflix Clone example

  • For me it opens it up in Sublime Text Editor, but since I prefer to use WebStorm, I just manually find where the project was created and open the project using WebStorm.Your initial project structure should look something like this:Lets create the basic outline of this project, I like to structure my project by putting everything in a ‘src’ folder and then splitting it up from there.Create a ‘src’ folder and create a ‘components’ directory with a ‘common’, ‘navigation’, and ‘screens’ subdirectories.
  • I also use this file to store any other common styling attributes such as font sizes, and padding/margin lengths.You will also need to grab some images and put them in your /assets directory or you can use the ones that I picked out in here: grab the Netflix logo icon and put it under assets/icons directory: project directory structure should look something like this:I like to make my imports look clean, so I would recommend that you install the babel plugin `babel-plugin-module-alias`.
  • babelrc file, (located in your root project directory) you will need to add the module-resolver field and since we’re having all our files in the /src directory, you need to set the root to src .
  • babelrc file should look like this:Now lets install react-navigation and styled-components by going into the terminal and navigating to the root project directory, and type in `npm install react-navigation — save“npm install Constants and Dummy DataIn our constants/styles.
  • js like so:In your we can now use our HomeScreen and ShowDetailsScreen in the StackNavigator config, like so:Now lets go back to our App.js file, and create a DrawerNavigator with the HomeStackNavigator as it’s initial route in the drawerRouterConfigNow hopefully if everything works, you should be able to load up the iOS simulator and you should see something like this:All the code is has been a really great tool to bootstrap my react native projects and I highly recommend it to anyone that wants to quickly get started with React Native.

In your /src/components/navigation/home-stack-navigator.js , we can now use our HomeScreen and ShowDetailsScreen in the StackNavigator config, like so: Now lets go back to our App.js file, and create…
Continue reading “Getting Started with Expo React Native and Styled Components using a Netflix Clone example”

A Hard Choice to Make: React Native vs Native

Let's decide what to choose: #ReactNative or #native?

  • Using your own SDK and other specific tools to create applications for native platforms provides more productiveness of the development team.
  • The main, and perhaps the only significant drawback of native development is its higher cost in comparison with cross-platform, which is especially felt while creating fairly simple applications in terms of functionality.
  • In order to create a cross-platform application with React Native, the developer does not need any specific knowledge of programming for Android or iOS.
  • The next updates of the application created by React Native in the App Store are bypassed by its main policy (meaning the standard waiting time is 2 weeks, which is necessary to approve the access rights to the application for this Internet platform visitors).
  • Cross-platform development with React Native will be most suitable for creating simple applications from the point of functionality, such as news portals, weather forecasting applications, etc.

How to make the right choice between native app development vs React Native cross-platform development. Is React Native native after all?
Continue reading “A Hard Choice to Make: React Native vs Native”

An augmented reality experiment in React Native – hello JS

#AugmentedReality w/ @reactnative & @googlecloud vision by @locropulenton

  • With that in mind, I’ve built a small app as an experiment that translates and subtitles in real time what you see from the camera your phone.With the help of advanced Google Cloud technology such as Cloud Vision, the information and the surrounding environment can become interactive.I am aware that there are others open source alternatives like Open Cloud Vision, but I am happy to choose Google Cloud API for doing this app demo since I found its implementation is encouraging.I am also aware it is not free at all, but I still have a trial time to play with it and make this experiment real.Google Cloud API dashboardBehind the scenesReactNative is a framework used to build native mobile apps using JavaScript and React.In React, virtual reality is considered as a new platform, as Android or the web, which is great in terms of consistency and scalability, but mobile integration is not out of the box as of today.In short, behind the scenes the app, using the camera captures and extracts the text with support for a broad range of languages for any given scenario.
  • It also features automatic language identification.The API provides a result to be sent to the Translate API in order to display the response text in a layer on top of the camera video as a subtitle.Animations: I am using the accelerometer to create an animated transition in order to create an experience when rotating the mobile on the z axis.For more information about that, look into the following snacks about how I made a z axis transformation and a simple toggle selector.Performance: Looking into the performance monitor I found that I am not achieving 60 frames per second but dropping some frames, basically because I am doing a lot of things in the UI threat at the same time.
  • The camera is capturing each n millisecond and the transformation applied cannot be used by the native driver.User experience is good enough for now, but I am aware it could be improved in the future.Possible improvementsThough this app has been developed as a prototype there are many improvements that could be also considered in the future.Compute hamming: Computes the Hamming distance between two sequences, that could be useful to identify and verify that the translated text has changed enough to be re calculated.An image diff algorithm could be also useful to avoid overkill when taking a photo.As well as the usage of the API library for Node.js for Google Cloud, to improve the error handler, code style and encoding.Launched just for beta testersYay!
  • after adding 40 seconds of timeout and some integrations for the Android platform such as code push and crash reporting, I released a simple version for beta testers in the Google Store so that users can play with it a little bit.More use casesThere are other use cases where it can be improved and enhanced.
  • Imagine you go to a restaurant in a foreign country for dinner and you can’t understand the menu.Or if you travel abroad to Barcelona or Buenos Aires, can it make you easier to understand where are you going in the metro or in a bus when looking at the signs?There are “infinite” use cases here for different places or situations as of where this sample could be improved to become a real application that adds value somewhere and someplace.In fact, a great augmented reality app has been just released, and helps blind people to recognize objects, that is amazing!

tldr; if you want to see how a simple augmented reality app is developed, see the following repository. Augmented reality is an overlay of content on the real world, its purpose it to enhance the…
Continue reading “An augmented reality experiment in React Native – hello JS”

5 Reasons Web Developers Love React Native

5 Reasons Web Developers Love #ReactNative @shoutem #webdev #reactjs

  • As you probably know, there are a few other multi-platform solutions, like Cordova and PhoneGap, but they come with a price: the price of relying only on the phone browser and its built-in JavaScript engine, which is often way slower than running native code, like React Native does.
  • Another thing that will make things, if not familiar, then definitely easier to work with is Nuclide, an integrated development environment (IDE) that Facebook is building to give developers a first-class developing environment for React Native.
  • Since this is all pretty new, uncharted territory, a lot of developers are doing their best to build something useful to others and unveil the true potential of React Native.
  • The biggest, most active groups is React Native Community, which offers daily posts about tool kits, components, new apps, and answers to questions about React Native, from basic questions to serious developer problems.
  • That’s where you come in: a new React Native developer, resolving problems and bringing new ideas to this fast-rising framework of the future.

React Native is the future of modern app development. The framework is not just for web developers, the entire development logic uses modern principles. React Native workflow is efficient, easy, and quick to learn and more platforms are using it.
Continue reading “5 Reasons Web Developers Love React Native”

A library for building cross-platform apps

ReactXP: A library for building cross-platform apps on #ReactJS or #ReactNative |

  • With React and React Native, your web app can share most its logic with your iOS and Android apps, but the view layer needs to be implemented separately for each platform.
  • We have taken this a step further and developed a thin cross-platform layer we call ReactXP.
  • If you write your app to this abstraction, you can share your view definitions, styles and animations across multiple target platforms.
  • In general, it exposes APIs, components, props, styles and animation parameters that are implemented in a consistent way across React JS (HTML) and React Native for iOS and Android.
  • A few platform-specific props and style attributes have been exposed, but we have tried to keep these to a minimum.


The authors of React use the phrase “learn once, write anywhere”. With React and React
Native, your web app can share most its logic with your iOS and Android apps, but the view
layer needs to be implemented separately for each platform. We have taken this a step further
and developed a thin cross-platform layer we call ReactXP. If you write your app to this
abstraction, you can share your view definitions, styles and animations across multiple target
platforms. Of course, you can still provide platform-specific UI variants, but this can be done
selectively where desired.

Continue reading “A library for building cross-platform apps”

Share Code between React and React Native Apps – Hacker Noon

  • Share Code between React and React Native AppsDevelopers are adopting Higher Order Components (HOC) Stateless Functional Components, and for good reason: they make it easier to achieve code reuse, a coveted aspiration of developers.There are many articles on HOC and Functional Stateless Components.
  • But here are a few benefits to consider:UX consistency, both within an application and across devicesMake cross-cutting upgrades: improve a component and update all its uses easilyreuse routing and authorization rulesSwitch libraries (for example, the apps below uses MobX for state management, but Redux could be swapped in)I’ll focus on using HOC and Functional Stateless Components to achieve reuse.
  • It will not use routes nor multiple scenes as the focus is on component reuse.We will add a second pair of applications (React and React Native), which will reuse the components we extract.This GitHub repo branch has the baseline applications (The final result is here.)
  • You have to “see” the duplication, which might require rearranging code blocks.Applying these ideas is like moving puzzle pieces around, to find where they meet and what patterns they reveal.Let’s start by looking for duplication.Seeing DuplicationThe web and mobile applications have two main components.In the web application, App.jsIn the mobile application, SearchView.jsThe following outlines their structure.Almost the same, but the platform differences between React and React Native are in the way.The two components have similar structures.
  • But they are in the README for the GitHub repo branch.Instead, I’ll focus on the refactoring to a common SearchBox, which our web (React) and mobile (React Native) applications will both use.Extracting a Shared Component for Web and MobileFor clarity, I’ve renamed SearchInput.js, SearchResults.js and SearchBox.js to WebSearchInput.js, WebSearchResults.js and WebSearchBox.js, respectively.Let’s look at (Web)SearchBox.jsLines 2–10, 19, 20, 26, 27 are specific to React.MuiThemeProvider, a container for Material UI components, is the only direct dependency on Material UI.

Developers are adopting Higher Order Components (HOC) Stateless Functional Components, and for good reason: they make it easier to achieve code reuse, a coveted aspiration of developers. There are…
Continue reading “Share Code between React and React Native Apps – Hacker Noon”