6 Simple ways to speed up your react native app. – codeburst

6 Simple ways to speed up your #reactnative app.  #redux

  • shouldComponentUpdate life-cycle method is used in regular non pure React Component to cancel the re-render by returning false in certain scenarios.Following two code samples do the same thing.class MyComponent extends React.PureComponent { //}class MyComponent extends React.Component { // nextState) { if(this.props.firstProp === nextProps.
  • firstProp this.props.secondProp === nextProps.secondProp) { return false; } return true } //}Both of the above examples can help you save some wasted renders.
  • Having a unique key on every list item, saves react re-rendering it again.class MyComponent extends React.PureComponent { render() { return this.props.data.map((item, i) = { return Text key={item.id}{item.title}/Text }); }}3.
  • Bind early and don’t create functions inside render.Do thisclass MyComponent extends React.PureComponent { constructor(props) { super(props); this.doWork = this.doWork.bind(this); } doWork() { // doing some work here.
  • // this.props.dispatch…. } render() { return Text onPress={this.doWork}Do Some Work/Text } }Don’t do this inside render.Text onPress={ () = this.doWork() }Do Some Work/TextorText onPress={ this.doWork.bind(this) }Do Some Work/TextBecause render is called very often and every time you do any of the two things above, a new function is created.4.

In my previous article I have talked about hacking event loop for improving performance of your app. Your goal is to retain 60 FPS throughout. All of that applies to react or react native app as well…
Continue reading “6 Simple ways to speed up your react native app. – codeburst”

NativeBase v0.5.0 — More components added — NativeBase.io Blog

  • Also we have used NativeBase components in our products Native Starter Pro , React Native E-Commerce , React Native Flat App Theme .
  • We are actively working on NativeBase with huge list of components to add in coming days.
  • An open source framework that enables developers to build high quality mobile apps using React Native for iOS and Android apps with the fusion of ES6.
  • Platform separation from header- The header component in NativeBase for iOS and Android comes with the same code but looks different on iOS and Android.
  • Listview integrated with List Item- List Item component can now display both static as well as dynamic data.

Read the full article, click here.

@StrapUI: “Use @NativeBase #componenets for #timesaving #Android #iOS #development at #reactjs #reactnative #javascript #coding”

NativeBase launched just few months ago and has already received more than 1300+ stars on Github. Day-by-day it’s becoming the defacto for…

NativeBase v0.5.0 — More components added — NativeBase.io Blog