Horizontal scroll animations in React Native – codeburst

  • Horizontal scroll animations in React NativeLink Animated with ScrollView to create a nice navigation UI animation in React NativeWhat we will be buildingRN lets you build a nice and smooth UIWhat you will needReact NativeSimulatorNo third party libraries required :)Creating Screen component with AnimatedFirst, import Animated, Dimensions, ScrollView, StyleSheet, Text, View from “react-native” .
  • Next, create a component that will be treated as a screen or a view.We are using Animated.View here because we are going to animate that wrapper component.That width ofscrollPage style and are important because we are going to interpolate horizontal scrolling values to multiple animation values.
  • In other words, we are going to track where the screen is and animate the screen component based on that value.It’s one of the things that are tricky to explain in words, but it is the key concept to understand for this to work.Basically, we link animations based on the…
  • When the scroll position is at 150, first screen is half way done exiting, and the second screen is half way done entering.Adding animationsSince they are all set up, it is time to write the animations.
  • You would have to write a different inputRange since FlatList removes items that scroll way off screen.I think this is pretty neat UI animation that’s pretty simple to use.

That width ofscrollPage style and transitionAnimation(props.index) are important because we are going to interpolate horizontal scrolling values to multiple animation values. In other words, we are…
Continue reading “Horizontal scroll animations in React Native – codeburst”

Relay is just getting better : ) – Entria – Medium

Relay is just getting better : )  #react #graphql #graphcool #relaymodern #reactjs

  • In a recent commit to Relay 1.2, it was added a third argument to refetchConnection, the refetchConnection is an API provided by the createPaginationContainer.The trouble many where having was the need to paginate and refetch new data, for so it was necessary to compose a Refetch container with a Paginate container as a child, as you can imagine this was not easy to get done and didn’t work well.Using the Refetch container to do it all is also an option, but this also means that you will have to use graphql.experimental and as the name indicates this is something that is still experimental and might change.How can we set up a pagination container with also some refetch, well here is the fun part.First let’s create this Pagination container in a component which renders a list of links.Now in the Pagination Container there are 3 variables, count, after and filter.
  • Count and After are part of the pagination logic, we are interested in refetching the filter variable.Before we proceed on to how to refetch, first we need to set these variables in the parent Query Renderer.
  • For that let’s declare it on the Query Renderer.We have to declare the variables in two places, inside the query as its arguments and also inside the component QueryRenderer as a prop.
  • Now we have access to these variables in our child queries.Since the Pagination Container exposes loadMore API to this.props.relay, all you have to do to paginate or load more is call this API with the page number as you can see below.But this we all know.What about refetching ?
  • for refetching is equally simple.the refetchConnection API takes three totalCount: number, callback: (error: ?

In a recent commit to Relay 1.2, it was added a third argument to refetchConnection, the refetchConnection is an API provided by the createPaginationContainer. The trouble many where having was the…
Continue reading “Relay is just getting better : ) – Entria – Medium”

Announcing “Advanced React.js Online” – componentDidBlog

  • I can barely believe it, but over the last 27 months, Michael Jackson and I have taught React.js to over 3,500 developers at 91 workshops in eight different countries (Oh, and one prison cell in the UK, but I digress…)In that time we’ve learned a lot about React as library authors, product developers, and teachers.We’re the authors of React Router.
  • That kind of usage has exposed us to the needs of all sorts of applications, pushing us to find simpler ways to be composable as library authors.Meeting 3,500 people (and more at the meet ups we regularly attend in our travels) has put a lot of code in front of us, and even more conversations about code.
  • It’s been fun learning the unique needs of all these people and figuring out ways to make their code better as product developers.Teaching React to thousands has helped us identify parts that some folks initially struggle with.
  • This helps us refine our material one workshop at a time, making us much better teachers.We’re happy to announce that we’re bringing all of that experience to you in our very first online course: Advanced React.js.
  • We’ve taken the most popular parts of our workshops and put them into the course.

Ninety-one. I can barely believe it, but over the last 27 months, Michael Jackson and I have taught React.js to over 3,500 developers at 91 workshops in eight different countries (Oh, and one prison…
Continue reading “Announcing “Advanced React.js Online” – componentDidBlog”

Why React is winning and how you can win with it? – Shival Gupta

  • Angular is still the reigning champion of front end frameworks, but React is the most loved.
  • Angular maybe in King’s Landing for now, but React is king in the north.
  • And React has a steep learning curve.
  • With React Native spearheading the war on the mobile apps front (and performing awesomely), it is worth it to investigate React in your freetime and make the decision yourself.
  • I’ll write more on learning and working with React if this post crosses 5 comments.

React.js is the king in the north.  Angular is still the reigning champion of front end frameworks, but React is the most loved. And there are particular reasons to it. I made the jump from using Angular 1.x to Angular 2 earlier this year and then to React. The experience and developer productivity that I…
Continue reading “Why React is winning and how you can win with it? – Shival Gupta”