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”