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”

Bundling React Native during Android release builds

Bundling #reactnative during Android release builds

  • Again, the sample project is the key, look at the sample app’s build.gradle file.Notice the config section:/** * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets * and bundleReleaseJsAndAssets).
  • By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the * bundle directly from the development server.
  • * * project.ext.react = [ * // the name of the generated asset file containing your JS bundle * bundleAssetName: “index.android.bundle”, * * // the entry file for bundle generation * entryFile: “index.android.js”, * * // whether to bundle JS and assets in debug mode * bundleInDebug: false,…*/These values allow…
  • gradle file, we were able to hook into the bundling command on all our release builds.Our config:// Configures the bundleJS commands for React-Nativeproject.
  • ext.react = [ // whether to bundle JS and assets in debug mode bundleInDebug: false, // whether to bundle JS and assets in release mode bundleInRelease: true, // the root of your RN project, i.e. where “package.json” lives root: from: “path to RN this, we can correctly build our signed,…

I would have expected this to be a straightforward, well documented workflow, but was unfortunately a bit disappointed. It took a bit of digging to finally automate bundling process within our release
Continue reading “Bundling React Native during Android release builds”