Introducing Sideswipe: a cross-platform carousel for React Native

  • Ideally we want to animate based on scroll position, not index changes, which would provide a much smoother effect.Old solution for handling transitions between itemsI knew I could add an Animated.event to the FlatList and pass the animated value to the child components but the value would be the raw…
  • This means the components using the animated value would have do some math to figure out if they were the active index.
  • It also updates any time either one of the underlying animated values updates.What this means is we can divide the scroll position by the width of a child item (which is a required prop) and that will give us an animated value starting at 0 and ending at the length…
  • Now child components can animate based on their index instead of scroll position but the animation will still be based on scroll position under the hood.
  • Here’s what that looks like in code:Using Animated.divide to get animated value for carousel itemsNow each carousel item gets an animated value they can use to create entrance and exit animations based on their index in the list, not the scroll position of the underlying FlatList, this provides a much…

Recently I found myself in need of a flexible carousel solution that could support some pretty tough requirements, mainly: My first attempt was to utilize open-source and use something someone else…
Continue reading “Introducing Sideswipe: a cross-platform carousel for React Native”

GraphQL Authentication with React Native & Apollo [Part 2/2]

GraphQL authentication with React Native & Apollo  #GraphQL #ReactNative #Apollo

  • We’ll use gql to write our graphql query and the graphql higher order component to tap into the Apollo client.We know that our mutation looks something like this (from working with it directly in Launchpad in part 1).
  • Now we need to to be able to pass variables from our user to the mutation.Finally, we want to make this mutation available to the Register component via this.props so that the component agnostic from the Apollo bindings.Now to use it we’ll go to the end of our handleSubmit function…
  • Click “Log Out”, refresh the app, and you’ll see it no longer brings you to profile.Login with Email and PasswordLogging in with email and password is just like sign up, we’re just calling a different mutation.
  • I’ll let the code do the talking.Now to call the login function available on this.props, save the JWT and change screens (on success) or show an error.Showing User InformationThe final thing we’ll do, to demonstrate that things are actually working and it’s not just a big facade, is show the…
  • The server is expecting the JWT to be coming in the authorization header and uses that to find the current user.To pass this token along with the request we’ll use setContext from the apollo-link-context which is another apollo link we’ll use.

This is the second and final part of a series where I cover how to setup authentication with React Native, GraphQL, and MongoDB. Below is part 1 where we setup the server. In this part we’ll be…
Continue reading “GraphQL Authentication with React Native & Apollo [Part 2/2]”

React Native Monthly #4

  • The React Native monthly meeting continues!
  • Here are the notes from each team: – – Trying to lower the entry barrier for the developers embracing React Native with the following things: – – The next session is scheduled for Wednesday 10, October 2017.
  • As this was only our fourth meeting, we’d like to know how do these notes benefit the React Native community.
  • Feel free to ping me on Twitter if you have any suggestion on how we should improve the output of the meeting.

The next session is scheduled for Wednesday 10, October 2017. As this was only our fourth meeting, we’d like to know how do these notes benefit the React Native community. Feel free to ping me on Twitter if you have any suggestion on how we should improve the output of the meeting.
Continue reading “React Native Monthly #4”