Using React Native, React Native Web and React Navigation in a single project

  • Using React Native, React Native Web and React Navigation in a single projectTL;DR combination of react-native and react-native-web can be used on one project to build native and web apps with a common rendering codebase.
  • Reusable React components could target native mobile using react-native and then build a web based React app for the mobile web target.
  • If you have xcode, or Android studio installed and want to check everything is working OK, you could just do the following at this point.react-native run-ios or react-native run-android CodeAll of the code for the test project is on github atI’m using a pattern for this application where all of…
  • So far, so good, I have a working iOS and Android build of my application:Adding React Native WebThis is where things start getting a little harder, we already have a react-native project, so the create-app setup script won’t work for us.I went with the Web packaging for existing React Native apps…
  • This is noted in the instructions, so you have to be prepared to understand the webpack process and put some effort in to go down this route!Basically any modules that make use of react-native are transpiled to instead alias this to the equivalent Component of the react-native-web module by way…

TL;DR combination of react-native and react-native-web can be used on one project to build native and web apps with a common rendering codebase. It doesn’t quite work “out of the box” but it is…
Continue reading “Using React Native, React Native Web and React Navigation in a single project”

Boost Your User Experience with Lottie for React Native

Check it out:   #reactsharing #UX #Lottie #reactnative #tuts

  • Boost Your User Experience with Lottie for React NativeThis is a technical post about Lottie for React Native — a mobile library for animating your user interface and telling the user stories from a whole new perspective.What is it all about Lottie?Lottie is a library for mobile devices that offers for the team a…
  • And we can always do GIF animations, right?But, as an experienced React Native and mobile developer, I can claim that none of these choices are able to offer you the same look feel that Lottie can.
  • The performance, all the available resources and the proud feeling your team‘s designers will reach with Lottie is the main reason I’m now writing this post.How to Get Started with Lottie for React Native?Either: npm i –save lottie-react-nativeOr: yarn add lottie-react-nativeAfter this, we need to link Lottie on our RN project:react-native…
  • It’s a simple check mark for use cases when the app has successfully completed a user’s action: like really that animation: it’s simple, self explanatory and it also gives a brief glimpse of what can be done with After Effects for Lottie.
  • Also, on Android devices some animations may freeze or be malformed from the original one.So, try to find a balance between using of Animated API and Lottie.

This is a technical post about Lottie for React Native — a mobile library for animating your user interface and telling the user stories from a whole new perspective. Lottie is a library for mobile…
Continue reading “Boost Your User Experience with Lottie for React Native”

Hot reload all the things! – Hacker Noon

Hot reload all the things!  #Webpack #ReactJS #JavaScript

  • js;import express from ‘express’const app = express()app.get(‘/api’, (req, res) = { res.send({ message: ‘I am a server route and can also be hot reloaded!’ })})
  • /title meta name=”description” content=”” meta name=”viewport” content=”width=device-width, initial-scale=1″ /head body div id=”root”${application}/div /body /html`res.send(html)})export default appNow runnpm run start:serverand go to http://localhost:3000/ and you will see our server rendered React component.
  • We now have server rendered React with Hot Module Replacement in addition to HMR on our regular server routes.Client side React — the final piece of the puzzleLet’s install a few more dependencies for our client;yarn add webpack-dev-server react-hot-loader@next npm-run-allFirst, let’s create our client side webpack configuration in webpack.config.client.js;const webpack = require(‘webpack’)const path = require(‘path’)module.exports = { devtool: ‘inline-source-map’, entry: [ ‘react-hot-loader/patch’, ‘webpack/hot/only-dev-server’, ‘.
  • build’), publicPath: ‘http://localhost:3001/’, filename: ‘client.js’ }}Then create a folder named “client” and an index.js file inside;import React from ‘react’import { render } from ‘react-dom’import { AppContainer } from ‘react-hot-loader’import App from App //AppContainer, (module.hot) { () = { render(AppContainer App / /AppContainer, })}Our final folder structure should look like this;client — index.jscommon — App.jsserver — index.js — let’s add our client side script to the server rendered html in /server/server.
  • /title meta name=”description” content=”” meta name=”viewport” content=”width=device-width, initial-scale=1″ /head body div id=”root”${application}/div script /body /html`Lastly, change the scripts in package.json to:”scripts”: { “start:server”: “rm -rf .

Now, create a folder called “server” with two files in it; index.js and server.js.
The index.js file will server as our mounting point and server.js will be our actual application. Our project…
Continue reading “Hot reload all the things! – Hacker Noon”

Getting Started with React Native and Flow – React Native Training – Medium

Getting Started with React Native and Flow 📱👌 #javascript #react #reactnative #flowtype

  • Using the Flow server For a large project, you probably only want Flow to recheck files incrementally when they change.
  • To get started, we first need to make sure we either have flow set up in our project at node_modules/bin/flow (as we have already done above) or installed globally.
  • To stop the server, we can run node_modules/.bin/flow stop to stop the server.
  • In our project, we start the server by running node_modules/.bin/flow , which we’ve saved as an npm script npm run flow .

Flow allows us to easily add static type checking to our JavaScript. Flow will help you prevent bugs and allow for better code documentation among other things. A lot of the React Native…
Continue reading “Getting Started with React Native and Flow – React Native Training – Medium”