DEV Community: Nathan Rymarz

Creating A Swipeable Card In React Native (part 2/3)

Nathan Rymarz — Mon, 02 Aug 2021 17:03:21 +0000

Continuing from the previous part, I will show you how we can display the next profile picture behind the current profile, add functionality to complete a swipe so that the next profile changes place with the current profile, and also add a reset animation so after an uncompleted swipe the current profile card's position will be elegantly reset.

To start with, let's add state to keep track of the next profile.

export default function App() {
  const [profile,setProfile] = useState(profiles[0])
  const [nextProfile, setNextProfile] = useState(profiles[1])

Then, we can add a new View to our inside our return statement to render the new profile. So far, this is what our component returns:

return (
    <SafeAreaView style={styles.container}>
      <View style={styles.cardContainer}>
        <View style={styles.card}>
            <Image source={{uri: nextProfile.pic}} style={{height:"80%",width:"100%"}}></Image>
            <View style={{flex:1,alignContent:'center',justifyContent:'center'}}>
              <Text style={{fontSize:20,fontWeight:"700"}}>{nextProfile.name}</Text>
              <Text>Age: {nextProfile.age}</Text>
              <Text>Likes: {nextProfile.likes.join(', ')}</Text>
            </View>
        </View>
        <PanGestureHandler onGestureEvent={handlePan} onHandlerStateChange={handlePanStateChange}>
          <Animated.View style={[styles.card, {transform:[{translateX},{translateY},{rotate}]}]}>
            <Image source={{uri: profile.pic}} style={{height:"80%",width:"100%"}}></Image>
            <View style={{flex:1,alignContent:'center',justifyContent:'center'}}>
              <Text style={{fontSize:20,fontWeight:"700"}}>{profile.name}</Text>
              <Text>Age: {profile.age}</Text>
              <Text>Likes: {profile.likes.join(', ')}</Text>
            </View>
          </Animated.View>
        </PanGestureHandler>
      </View>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

Because we have the position style property set to 'absolute' for the cards the cards will overlap with the last one returned being rendered on top.

To make it so swiping will remove the current profile and set nextProfile to the front we will create a method to pass to the onHandlerStateChange prop for our PanGestureHandler. This method will take the nativeEvent as an argument and use it to determine if the current profile has been swiped far enough to qualify as a completed swipe, and if it has then execute the code for swiping.

  const handlePanStateChange = ({nativeEvent}) =>{
    const {state, translationX} = nativeEvent
    if(state === 5){ //When the user takes their finger off the screen
      if(translationX > 185 || translationX < -185){
        setProfile(nextProfile)
        setNextProfile(profiles[++index%3])
      }
    }
  }

The last thing to do is get the current profile card to reset position automatically after an uncompleted swipe. To do this, we will make an Animation with Animated.parallel to reset both the x and y position back to zero. Here is what I used:

const reset = Animated.parallel([
    Animated.timing(translateX,{
      toValue:0,
      duration:200,
      useNativeDriver:true
    }),
    Animated.timing(translateY,{
      toValue:0,
      duration:200,
      useNativeDriver:true
    })
  ])

And now we just need to call reset inside our handlePanStateChange method when the user doesn't swipe far enough.

const handlePanStateChange = ({nativeEvent}) =>{
    const {state, translationX} = nativeEvent
    if(state === 5){ //When the user takes their finger off the screen
      if(translationX > 185 || translationX < -185){
        setProfile(nextProfile)
        setNextProfile(profiles[++index%3])
      }
      else reset.start()
    }
  }

And that's it! Our cards are now swipeable and appear as though we are swiping off the top of a deck of cards. In the next tutorial, I will show you how we can animate the top card off the screen while still allowing the card behind it to be interactable.

Creating A Swipeable Card In React Native (part 1/3)

Nathan Rymarz — Tue, 27 Jul 2021 03:32:12 +0000

I have a previous post on my profile describing how I created a Tinder Style swiping component. Since then, I have learned more about React Native's Gesture Handler and Animated API's and in this post I will describe how we can create an even better Tinder-like swiping app. This will be a multi part series and this tutorial will assume you have basic familiarity with the Animated and Gesture Handler APIs.

To make our app look like Tinder, we want our cards to be able to move up and down as well as rotate. Also, when the user moves their card, we want to show the next card behind it. Lastly, when the user completes a swipe the next card should be interactable while the swiped card animates off screen. That way our app will feel fluid and users can rapid fire swipes to their hearts content.

In this tutorial I will show how we can achieve the first goal, getting our cards to move in all directions and rotate with the swipe.

To begin with, I've created a basic app with minimal styling. The app renders some example data inside a PanGestureHandler component.

import { StatusBar } from 'expo-status-bar';
import { SafeAreaView } from 'react-native-safe-area-context';
import React, {useState} from 'react';
import { StyleSheet, Text, View, Image, Animated } from 'react-native';
import {PanGestureHandler} from 'react-native-gesture-handler';

const profiles = [
  {
    name:"John Doe",
    age:27,
    likes:["Hockey","Hiking"],
    pic:"https://i.picsum.photos/id/875/400/700.jpg?hmac=lRCTTEqKWD92eBmpH4wlQzMAlimbfZlquoOe63Mnk0g"
  },
  {
    name:"Alexis Texas",
    age:22,
    likes:["Parties","Bananas"],
    pic:"https://i.picsum.photos/id/657/400/700.jpg?hmac=4lzNCpLyxL1P5xiJN4wFe9sqVK0DgL5OSuHIcESjIVs"
  },
  {
    name:"Jane Smith",
    age:35,
    likes:["Netflix","Wine"],
    pic:"https://i.picsum.photos/id/47/400/700.jpg?hmac=TQCJf6PQAtKGOEKHlgf3xN-JusmYrre3czFnX3AWf5M"
  }
]

let index = 0

export default function App() {
  const [profile,setProfile] = useState(profiles[0])

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.cardContainer}>
        <PanGestureHandler>
          <Animated.View style={[styles.card]}>
            <Image source={{uri: profile.pic}} style={{height:"80%",width:"100%"}}></Image>
            <View style={{flex:1,alignContent:'center',justifyContent:'center'}}>
              <Text style={{fontSize:20,fontWeight:"700"}}>{profile.name}</Text>
              <Text>Age: {profile.age}</Text>
              <Text>Likes: {profile.likes.join(', ')}</Text>
            </View>
          </Animated.View>
        </PanGestureHandler>
      </View>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    margin:10,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  cardContainer:{
    flex:1,
    width:"100%",
    alignItems: 'center',
    justifyContent: 'center'
  },
  card:{
    backgroundColor: "rgb(230,230,230)",
    width:"100%",
    height:"100%",
    borderRadius: 5,
    position:'absolute',
    borderWidth:1.5,
    borderColor:'black',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

With the code how it is now, the card is not moveable. To get our card to move around we'll create two Animated Values, TranslateX and TranslateY, and pass them to a transform style property in our Animated View inside our PanGestureHandler.

export default function App() {
  const [profile,setProfile] = useState(profiles[0])
  const translateX = new Animated.Value(0)
  const translateY = new Animated.Value(0)

<Animated.View style={[styles.card],{transform:[{translateX},{translateY}]>
    <Image source={{uri: profile.pic}} style={{height:"80%",width:"100%"}}></Image>
    <View style={{flex:1,alignContent:'center',justifyContent:'center'}}>
         <Text style={{fontSize:20,fontWeight:"700"}}>{profile.name}</Text>
         <Text>Age: {profile.age}</Text>
         <Text>Likes: {profile.likes.join(', ')}</Text>
    </View>
</Animated.View>

Now to get the values to track the movement of the user's finger we'll pass an Animated Event to the onGestureEvent prop for our PanGestureHandler. The Animated Event will update the values of translateX and translateY to the values of the nativeEvents translationX and translationY. In this case, since we are using the PanGestureHandler, the nativeEvent is panning, so translationX and translationY are the values of the movement of the user's finger in the X and Y axes.

const handlePan = Animated.event(
    [{nativeEvent:{translationX:translateX,translationY:translateY}}],{useNativeDriver:true}
)

<PanGestureHandler onGestureEvent={handlePan}>

Now our card moves around with the users finger.

Next, lets handle rotation. For the rotation, we want our card to rotate differently depending on if they are touching the top of the card or the bottom of the card. To track where they touch we will create another Animated Value named 'y' and pass it to our event handler.

  const y = new Animated.Value(0)

  const handlePan = Animated.event(
    [{nativeEvent:{translationX:translateX,translationY:translateY,y}}],{useNativeDriver:true}
)

Then, we can use the interpolate method to get a value that returns 1 or -1 depending on if the user is touching the top or bottom of the window. To get the window Height I imported 'Dimensions' from React Native.

Import {Dimensions} from 'react-native';
const y = new Animated.Value(0)
const windowHeight = Dimensions.get('window').height
const TopOrBottom = y.interpolate({inputRange:[0,windowHeight/2-1,windowHeight/2],outputRange:[1,1,-1],extrapolate:'clamp'})

Finally, we will make another Aniamted Value named 'rotate' that will use the values of TopOrBottom and translateX to determine the degrees that our view will rotate by.

const rotate = Animated.multiply(translateX,TopOrBottom).interpolate({
    inputRange:[-500,500],
    outputRange:[`-30deg`,`30deg`],
    extrapolate:'clamp'
})

And we'll pass this to the transform prop in our Animated View

<Animated.View style={[styles.card, {transform:[{translateX},{translateY},{rotate}]}]}>

And at last, our view rotates in the direction that our user swipes and changes direction based on whether they swipe from the bottom or top of the window.

In the next part, I will discuss how we can add animations, make it so that the next profile card shows up behind the current profile and add functionality so that when a user swipes far enough the next card is set to the front.

The Pros and Cons of React Native and Should You Learn It?

Nathan Rymarz — Mon, 19 Jul 2021 22:17:43 +0000

For the past few weeks I have been working on a mobile project that I am building with React Native. When I decided to start working on my app I didn't give much thought about the framework to use. React Native seemed like the obvious choice because I had just learned and created a few projects with React. Although I have not run into any problems, I can't help but wonder if it would have been worth it to learn Kotlin or Swift instead.

After doing some research here is what I have learned about the strengths and weaknesses of React Native.

React Native's biggest strength is it's convenience. There are a few reasons why it is much more convenient to use React Native than to create a native app.

Primarily, React Native saves time on coding because it allows you to maintain one codebase for Android and iOS. This is a huge benefit for people looking to publish an app for both the iOS and Android stores.

Moreover, because of it's similarity to React, it's very easy for programmers with experience in React to pick up and learn React Native. On top of that, if your building a mobile app with a web app counterpart, you can share a lot of the code. This is another way to cut down on development time with React Native.

However, many companies choose to build native apps over using React Native because they can get better performance from a native app than an app built using React Native. Yet, this performance gain is not so significant that it always outweighs the convenience gained from using React Native. This is evident by the fact that many popular apps like Instagram, Skype and Facebook use React Native.

Airbnb even testified in their blog post about why they stopped using React Native (https://medium.com/airbnb-engineering/react-native-at-airbnb-the-technology-dafd0b43838), that "One of the largest concerns around React Native was its performance. However, in practice, this was rarely a problem. Most of our React Native screens feel as fluid as our native ones."

Overall, I believe React Native is a framework that is definitely worth picking up and using. Although there are some benefits for building native apps with Kotlin or Swift, the development time saved by using React Native is just too good to ignore. From my experience, I've been really impressed by the ease of which I have been able to create my project with the knowledge I carried with me from using React.

Creating A Gmail Style FlatList In React Native With Swipe To Delete Functionality

Nathan Rymarz — Tue, 13 Jul 2021 02:22:00 +0000

In this post I will demonstrate how we can use React-Natives Animated API and the Swipeable component from react-native-gesture-handler to create a FlatList that enables users to easily delete items by swiping and provides appropriate and tasteful visual feedback similar to Google's G-Mail app.

To start with, I've created a basic app that renders some example data inside a FlatList.

import { StatusBar } from 'expo-status-bar';
import { SafeAreaView } from 'react-native-safe-area-context';
import React, {useState} from 'react';
import { StyleSheet, Text, View, Animated, FlatList } from 'react-native';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import data from './Exampledata'

function ListItem({email}){
  const {title, sender, subject} = email
  return(
    <Animated.View style={{flex:1,flexDirection:'row', height:70, alignItems:'center',borderBottomWidth:1,backgroundColor:'white'}}>
      <Text style={{width:150}}>{title}</Text>
      <View style={{overflow:'visible'}}>
        <Text>From: {sender}</Text>
        <Text>Subject: {subject}</Text>
      </View>
    </Animated.View>
  )
}

export default function App() {
  const [emails, setEmails] = useState(data)
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={emails}
        renderItem={({item}) =><ListItem email={item}/>}
      />
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:20,
    marginHorizontal:10,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Its notable that the main component uses state to keep track of the emails to render and the individual list items are their own component.

So far, the app renders a list but we are not able to swipe yet. To be able to swipe our list items, we'll wrap the view with the Swipeable component and make a new function to pass to the 'renderRightActions' prop. The function we create needs to return some JSX which will be rendered when we swipe to the left on our list item. Here is the updated code for our ListItem component:

function ListItem({email}){
  const {title, sender, subject} = email

  const swipeRight = (progress,dragX) =>{
    const scale = dragX.interpolate({
      inputRange:[-200,0],
      outputRange:[1,0.5],
      extrapolate:'clamp'
    })
    return(
      <Animated.View style={{backgroundColor:'red',width:"100%",justifyContent:'center'}}>
        <Animated.Text style={{marginLeft:'auto',marginRight:50, fontSize:15, fontWeight:'bold',transform:[{scale}]}}>Delete Item</Animated.Text>
      </Animated.View>
    )
  }
  return(
    <Swipeable renderRightActions={swipeRight} rightThreshold={-200}>
      <Animated.View style={{flex:1,flexDirection:'row', height:70, alignItems:'center',borderBottomWidth:1,backgroundColor:'white'}}>
        <Text style={{width:150}}>{title}</Text>
        <View style={{overflow:'visible'}}>
          <Text>From: {sender}</Text>
          <Text>Subject: {subject}</Text>
        </View>
      </Animated.View>
    </Swipeable>
  )
}

Now, when we swipe left on our list item we'll see a red background with the Text 'Delete' appear behind.

There are a couple things to mention before moving on. I gave the View rendered by the renderRightActions prop a width of 100% because, similar to G-Mail, we want our List Item to appear like it is being pushed off to the side before we delete it. Also, I use the dragX variable to animate the text inside the Action View so that users have visual feedback for the drag distance at which an item will be deleted.

The next thing to do is make it so when our Action View is opened, the item shrinks and then gets deleted from state.

To shrink the list item we'll declare a new Animated Value, height, inside our ListItem component and make an animation that sets the height to 0. We'll also add height to the styles properties of the View that contains our List Item and the Action View.

To make the animation play after the Action View is opened, we just have to pass a function which plays our animation to the 'onSwipeableOpen' prop.

const height = new Animated.Value(70)
const animatedDelete=() => {
    Animated.timing(height,{
        toValue: 0,
        duration: 350,
        useNativeDriver:false
    }).start()
}
<Swipeable renderRightActions={swipeRight} rightThreshold={-200} onSwipeableOpen={animatedDelete}>

One note about this animation is that you must have useNativeDriver set to false because the Native Driver does not support animating non-layout properties like height or width.

Finally, to delete the item from state after shrinking, we pass a callback to the start() method inside the function that plays the animation. To do that however, we have to pass the setState (in this case setEmails) function down to our ListItem component. Then we can call the setState function inside the ListItem component and delete the email. Here is the updated animation function.

 const animatedDelete=() => {
    Animated.timing(height,{
        toValue: 0,
        duration: 350,
        useNativeDriver:false
    }).start(() => setEmails(prevState => prevState.filter(e => e.id !== email.id)))
  }

And that's it. Now we have a list that we can quickly and easily delete items from by swiping left. More than that, our list gracefully animates each deletion by shrinking the item that's being deleted so it doesn't looking jarring when our list rerenders without that item.

The Benefits Of Linked Lists And How I Implemented A Queue In React

Nathan Rymarz — Tue, 06 Jul 2021 01:41:39 +0000

While developing my latest project, I came across a situation in which I wanted to use a Queue. Having recently learned about Linked Lists, I decided to implement the Queue using my own Linked List Class. In this post I will explain the pros and cons of using Linked Lists and how I implemented a Linked List in my project.

A Linked List is a data structure that is similar to an Array. The main difference is that Linked Lists have no random access, meaning that we can not immediately grab elements from the list using an index. Instead we have to traverse the list starting from the head to get to the element at the specified index. For this reason, it is not usually a good idea to use Linked Lists as a replacement for a standard Array.

However, the benefit we get from using Linked Lists is saving time when we add or remove items at the beginning or middle of the list. This is because Linked Lists don't use indexes like Arrays. When we shift an element onto an Array, the Array must update the index for every element after the shifted element. With a Linked List we don't have to worry about that. This makes using Linked Lists advantageous when we want to use them as a Queue.

To elaborate, a queue is an idea of a list that abides by the First in, First out principle. Therefore, if we are implementing a Queue for an application, we need to add or remove elements from the start of the list and do the opposite at the end of the list. For instance, if we are adding elements to the start of our Queue, when we want to remove elements, we remove them from the end of the Queue, and vice versa. Because we are always either adding or removing from the start of the list, an Array would not be the most efficient data structure to use for a Queue. (Provided we don't care about random access.)

To implement a Queue for my React Project, I made a basic Queue Class. The code is below:

class Node {
    constructor(val){
        this.val = val
        this.next = null
    }
}


export default class Queue{
    constructor(){
        this.first = null
        this.last = null
        this.length = 0
    }

    enqueue(val){
        node = new Node(val)
        this.length++
        if(this.length === 1){
            this.first = node
            this.last = node
        }
        else{
            this.last.next = node
            this.last = node
        }
        return this
    }

    dequeue(){
        if(this.length === 0) return undefined
        this.length--
        temp = this.first
        if(this.length === 0) this.last = null
        this.first = temp.next
        return temp.val
    }
}

My project is an app that scrapes the FoodNetwork Website to find random recipes. Users can swipe left or right to discard or save recipes as they appear. I use the queue to load extra recipes so after a user swipes another one will be loaded and ready to go.

To start with, I initialize the queue when the component mounts and enqueue 5 recipes.

const recipes = new Queue()

useEffect(()=>{
    findRecipe(setNext)
    findRecipe(setRecipe, setLoading)
    for(let i=0;i<5;i++){
      findRecipe((obj)=>recipes.enqueue(obj))
    }
  },[])

The findRecipe function is a call to my Scraper that takes a callback function and passes a new Recipe object to that callback.

I use another useEffect hook to set the the nextRecipe to the recipe that is returned from dequeuing and also enqueue a new recipe. This happens each time a user swipes to find a new recipe. Thus, the queue maintains 5 recipes at most.

useEffect(() =>{
    setNext(recipes.dequeue())
    findRecipe((obj)=>recipes.enqueue(obj))
  },[recipe])

I found that using a Linked List worked best for this because I don't need to access elements from the middle of the list and the small time I save with dequeueing from the Linked List rather than unshifting from an array helps make my app a little smoother. I hope you liked reading my post and have a good day. :)

Creating A Tinder Style Swiping Component With React Native (Part 2 / 2)

Nathan Rymarz — Sun, 27 Jun 2021 23:39:03 +0000

In my last blog post I described how we can build an app that handles swiping similar to the popular Tinder app. In this post I will show how we can add animations to provide visual feedback to swiping.

To start, we need to import 'Animated' from the react-native library.

import { StyleSheet, Text, View, Image, Animated } from 'react-native';

With Animated we can create custom animations using Animated.timing and events using Animated.event. However, before we do that we need to create a variable with Animated.Value that our events and animations will use to effect what our component renders.

In our case, when we swipe we want our View to move to the side in the direction that the user is swiping. So we'll make a variable named translateX that will keep track of the position of the view that we are swiping.

const translateX = new Animated.Value(0)

And for our Animated value to be able to affect our view, we need to change our view to be an Animated.View. Animated Views can make use of a transform property in their style prop. The transform property takes a list of single key objects and performs the transformation for each object.

  <Animated.View style={{backgroundColor:"yellow", width:"75%", height:"75%", transform:[{translateX}]}}>
       <Image source={profile.pic}></Image>
       <Text>{profile.name}</Text>
       <Text>Age: {profile.age}</Text>
       <Text>Likes: {profile.likes.join(', ')}</Text>
  </Animated.View>

Now we are ready to start creating events and animations.

For our purposes we only need a single Animation event. This event will be called anytime the users start to swipe and be responsible for updating the translateX variable as the user swipes their finger.

To do this, we'll provide an Animated.Event to the OnGestureEvent for our PanGestureHandler component. Here is the code for our PanGestureHandler component.

<PanGestureHandler
    onHandlerStateChange={handleSwipe}
    onGestureEvent={handlePan}
>
    <Animated.View style={{backgroundColor:"yellow", width:"75%", height:"75%", transform:[{translateX}]}}>
       <Image source={profile.pic}></Image>
       <Text>{profile.name}</Text>
       <Text>Age: {profile.age}</Text>
       <Text>Likes: {profile.likes.join(', ')}</Text>
    </Animated.View>
</PanGestureHandler>

And the code for the Animated Event.

const handlePan= Animated.event(
  [{nativeEvent:{translationX:translateX}}],{useNativeDriver:true}
)

Now our Animated View will move along with the users finger when they swipe.

Next, We'll make three animations, swipeLeftAnimation, swipeRightAnimation and reset with Animated.timing. Animated.timing takes two arguments, the value that will be adjusted and an object that describes the animation. The swiping animations will push the view off to the side after the user completes a swipe and reset will bring the view back to the middle. Here is the code for the animations.

const reset = Animated.timing(translateX,{
    toValue:0,
    duration:250,
    useNativeDriver:true
  })

  const swipeRightAnimation = Animated.timing(translateX,{
    toValue: 600,
    duration: 400,
    useNativeDriver:true
  })

  const swipeLeftAnimation = Animated.timing(translateX,{
    toValue: -600,
    duration: 400,
    useNativeDriver:true
  })

We'll use the animations in our handleSwipe method which is passed to our onHandlerStateChange prop. Here is the updated handleSwipe method.

const handleSwipe=({nativeEvent}) =>{
    const {state} = nativeEvent
    if(state === 5){
      //handle swipe right
      if(nativeEvent.translationX < -225){
        index++
        swipeRightAnimation.start(()=>{
          //add profile to match list
          setProfile(profiles[index%3])
        })
      }
      //handle swipe left
      else if(nativeEvent.translationX > 225){
        index++
        swipeLeftAnimation.start(()=>{
          setProfile(profiles[index%3])
        })
      }
      //handle uncompleted swipe
      else reset.start()
    }
  }

Now after a completed swipe the view will be pushed off the screen and appear back in the middle. After an uncompleted swipe the view will be gracefully repositioned back to the middle.

Creating A Tinder Style Swiping Component With React Native (Part 1 / 2)

Nathan Rymarz — Tue, 22 Jun 2021 02:50:44 +0000

In this tutorial I will explain how we can build a Basic React Native app that allows users to view other user's profiles and swipe left or right to save that profile and view another user's profile. This tutorial will be focused on providing a brief outline of how we can achieve the swiping functionality and part 2 will cover adding animations to our app to achieve a Tinder like look.

Lets start by using expo to create a new react native app.

expo init SwipingApp

Installing react-native-gesture-handler

expo install react-native-gesture-handler

And importing everything we'll need inside App.js.

import React, {useState} from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import {PanGestureHandler} from 'react-native-gesture-handler';

In our example we will use dummy data for the profiles.

  const profiles = [
    {
      name:"John Doe",
      age:27,
      likes:["Hockey","Hiking"],
      pic:"https://www.exampleimagelink.png"
    },
    {
      name:"Alexis Texas",
      age:22,
      likes:["Parties","Bananas"],
      pic:"https://www.exampleimagelink2.png"
    },
    {
      name:"Jane Smith",
      age:35,
      likes:["Netflix","Wine"],
      pic:"https://www.exampleimagelink3.png"
    }
  ]

Now let's give our app state with the useState hook inside App.js

const [profile,setProfile] = useState(profiles[0])

And make sure we are rendering the current profile.

  return (
    <View style={styles.container}>
      <View>
        <Image source={profile.pic}></Image>
        <Text>{profile.name}</Text>
        <Text>Age: {profile.age}</Text>
        <Text>Likes: {profile.likes.join(', ')}</Text>
      </View>
    </View>
  );
}

To add swiping functionality we need to wrap our View containing the profile info with the PanGestureHandler Component. We'll also give PanGestureHandler props for calling a handleSwipe method that we'll build later.

 return (
    <View style={styles.container}>
      <PanGestureHandler onHandlerStateChange={handleSwipe} >
        <View style={{backgroundColor:"yellow", width:"75%", height:"75%"}}>
          <Image source={profile.pic}></Image>
          <Text>{profile.name}</Text>
          <Text>Age: {profile.age}</Text>
          <Text>Likes: {profile.likes.join(', ')}</Text>
        </View>
      </PanGestureHandler>
      <StatusBar style="auto" />
    </View>
  );
}

We pass handleSwipe to the 'onHandlerStateChange' prop that will be called every time the PanGestureHandler state changes. This is useful because we will be able to make it so that we only execute the code to swipe once the user has taken his finger off of the screen.

Our handleSwipe method needs to a do a couple things. It should check if the user is swiping left or right and react accordingly. It should also trigger a new profile to be rendered to the screen.

const handleSwipe=({nativeEvent}) =>{
    //swiping right
    if(nativeEvent.translationX < -225){
      console.log("Swiped Right")
      //Here we would add the code to save the user profile into our match list. For simplicity, I won't be doing this in this example.
      index++
      setProfile(profiles[index%3])
    }
    //swiping left
    else if(nativeEvent.translationX > 225){
      console.log("Swiped Left")
      index++
      setProfile(profiles[index%3])
    }
  }

nativeEvent is the default event that is passed to the gesture handler function properties. We use the translationX property from nativeEvent to check if the user the direction the user is swiping.

Our function works well but we haven't yet made it so that swipes only happen when the user takes his finger off the screen. To do that we need to check the nativeEvent's state property.

const handleSwipe=({nativeEvent}) =>{
    const {state} = nativeEvent
    //state will equal 5 when the gesture is completed. I.E when a user takes his finger off the screen.
    if(state === 5){
      //handle swipe right
      if(nativeEvent.translationX < -225){
        console.log("Swiped Right")
        //save this user profile to our match list. For simplicity sake I won't be really doing this in this example.
        index++ //index is declared outside of App()
        setProfile(profiles[index%3])
      }
      //handle swipe left
      else if(nativeEvent.translationX > 225){
        console.log("Swiped Left")
        index++
        setProfile(profiles[index%3])
      }
    }
  }

Now our function is working as intended.

All in all, this is only one way of creating an App of this sort. When I originally wrote this post I had used the onGestureEvent prop from PanGestureHandler to handle swiping but afterwards I learned about onHandlerStateChange and so I rewrote this post since onHandlerStateChange works much better for what we want. I hope you learned something new. Thanks for reading. :)

The Importance Of Testing And How To Write Tests With React-Testing-Library

Nathan Rymarz — Tue, 15 Jun 2021 02:16:51 +0000

In my time at Flatiron, we used tests as guidelines for apps that we were building but we never learned to write our own. However, as part of a coding exercise for a company I had applied to, I was required to build a web application which included unit testing. This led to me learning about the react testing library, mocking functions like fetch and the overall importance of testing.

In larger applications, writing tests is vital to save time because manually testing every function of an app to ensure nothing is broken could take extremely long and is prone to human error. And more than that, tests also act as documentation. For someone who is new to a codebase, reading the tests can help them get caught up with which parts of a application are responsible for which features and how they are expected to work.

To start writing tests in a React app, we create a file with the .test.js extension. Inside our test file we need to import a couple things.

import { render, fireEvent } from '@testing-library/react'
import "@testing-library/jest-dom/extend-expect"

The render method allows us to test a certain component by rendering it in a virtual DOM. After rendering it we can write an expect statement. For instance...

const app = render(<App/>)
expect(app).not.toThrowError

The above 2 lines create a DOM with the component App rendered inside it and expects that the app should throw no errors. However, to be able to use these lines to really test your app, we need to wrap them inside a test method.

test("App renders without errors", () =>{
    const app = render(<App/>)
    expect(app).not.toThrowError
})

The test function takes 2 parameters. The First one being a string that describes the test, and the second being a callback function that runs the test.

Now, if you used create-react-app to build your React application, you will be able to run this test by typing 'npm run test' in the console.

We can also write tests that simulate user actions with the fireEvent method that we imported earlier. FireEvent is an object of functions. So to make use of fireEvent we use dot notation to call the event that we want to simulate and pass the element we want to act on as an argument. For example...

const app = render(<App/>)
const btn = app.getByTestId("btn")
fireEvent.click(btn)

In this case, we use fireEvent.click to simulate a user clicking on a button.

Lastly, a common scenario you might face is writing tests for a component which fetches external data. To do this we first need to do a few things.

We need to to write our own version of the fetch method. This is commonly called creating a "mock." Here is the code I wrote to mock fetch.

global.fetch = () =>{
    return Promise.resolve({
        json: () => Promise.resolve([
            {example:"data"},
            {example:"more data"}
        ])
    })
}

Our mock fetch will return some JSON that you can specify. The nice thing here is that we aren't actually making any http requests so we always know how our fetch will respond.

Furthermore, in addition to importing fireEvent and render, we also need to import 'act' and 'screen.'

import { render, fireEvent screen, act} from '@testing-library/react'

'act' will help us with writing async functions to use our mock fetch with and 'screen' will be what we use to access our virtual DOM.

Here is an example of a test that uses all of these and expects our JSON data to be rendered on our page and be defined.

test("App fetches some JSON", async () =>{
    await act( async () => render(<App/>))
    const renderedData = screen.getByTestId("rendered-data")
    expect(renderedData).toBeDefined()
})

For this test to work our App component needs to be rendering the JSON data and also give that rendered data a test-id of 'rendered-data.' Also notice that we use the async and await keywords because our function has to be asynchronous since we have to wait for our fetch to return our data before we assign renderedData. That is also why we have to wrap our call to render App inside the 'act' function.

In conclusion, there are many more things to know about writing tests but I hope that reading this gives you a headstart into writing your own tests for your personal projects. I believe having experience writing tests may help you stand out to an employer and get that foot in the door as a new professional programmer.

HackerRank's Common Child Problem Solution and Dynamic Programming

Nathan Rymarz — Mon, 31 May 2021 02:44:58 +0000

While going through HackerRank's Interview Preparation Kit I came across a problem that was exceptionally challenging. The problem was called Common Child. When I realized that I wasn't going to figure it out on my own, I decided to check the discussion section to look for tips. I noticed many of the comments were mentioning something about dynamic programming. After taking some time to learn about dynamic programming and how it can be implemented to coding, I came back to this challenge and managed to figure it out. In this post I will discuss the Common Child problem and how we can use dynamic programming to solve it.

Common Child is a variety of a more common problem, the Longest Common Subsequence(LCS) problem. In this problem we must compare two strings and find the longest child(or subsequence) between them. Subsequences do not need to be consecutive, so it's not exactly the same as finding the longest substring between two strings. For instance, if we have strings "ABCD" and "ABDC", the longest common substring would be "AB" but the longest subsequence would be "ABC" or "ABD."

The most effective way to solve this problem is by making use of dynamic programming. Dynamic programming is a method for solving problems by breaking a problem down into smaller problems and saving those problems' solutions for later use. We can use dynamic programming to save time for problems that have overlapping subproblems, or in other words, subproblems that must be solved more than once.

In Common Child, we can break down the problem of finding the longest common child of two strings by finding the longest common child of two smaller strings. For example, to find the LCS of "ABCD" and "ABDC" we can first look at the strings "AB" and "AB". We know that the LCS of those strings is "AB" because they are the same. Next, we could compare "ABC" to "ABD" and because "C" !== "D" our answer has not changed. The LCS is still "AB". One step further, we can compare "ABCD" to "ABD". Here we find that the last character in both strings is "D" so we can add that to our previous answer. The LCS is now "ABD". Finally, we compare the full strings "ABCD" and "ABDC" and because the final letter "C" does not equal "D" our answer is not changed. The final answer is "ABD". Alternatively, we could have compared "ABDC" to "ABC" and found "ABC" as our answer.

Now getting into the real solution, to employ dynamic programming we need to use either a table or a memo to save our subproblems' solutions. For my solution, I chose to use a table. In Common Child, we are given two strings, s1 and s2. The columns of our table represent the characters in s1 and the rows represent the characters in s2. Each cell will contain the length of the LCS between the substrings that end with that character in the row/column. To illustrate, for the strings "ABCD" and "ABDC" the cell in row 2 and column 2 would compare the strings "AB" and "AB" and contain the number 2.

To fill out our table, we will use a nested loop to iterate over every character in s2 for each character in s1. Then we check if the characters for that row and column are the same. If they are, the answer to our subproblem is 1 + the answer 1 column up and 1 row left in our table. If not, the answer to the problem is the answer in the cell one column up OR one row to the left, whichever number is higher. At the end, our final answer is the last cell of our table.

Here is my solution in JavaScript.

function commonChild(s1, s2) {

    //initializing the table
    //The first row and column of our table must contain all 0's for our solution to    work.
   const table = [new Array(s2.length+1).fill(0)]
   for(let i=0; i<s1.length;i++) table.push([0])

   //iterating over the strings and filling out each row of our table
   for(let i=1;i<s1.length+1;i++){
       for(let j=1;j<s2.length+1;j++){
           if(s1[i-1] === s2[j-1]) table[i][j] = table[i-1][j-1] + 1
           else table[i][j] = Math.max(table[i-1][j],table[i][j-1])
       }
   }

   //The last cell of our table contains our answer
   return table[s1.length][s2.length]

}

Getting PostgreSQL To Work On A Rails App Using Ubuntu And WSL

Nathan Rymarz — Sat, 27 Mar 2021 04:48:59 +0000

We all know that getting projects hosted is important but it may not seem worth it because many hosting services require Postgres and getting Postgres to work locally can be very troublesome. I understand this because I hosted on Heroku for the first time for my latest project and I spent way too long getting Postgres to work on my machine. Even though I realized later that getting Postgres to work locally isn't absolutely necessary to deploy your app I'm still happy I was able to get Postgres working. Here are the steps I took to get Postgres working for my rails app using Ubuntu and Windows Subsystem for Linux (WSL).

Step 1.

Start by opening your Ubuntu terminal and following the steps from
https://docs.microsoft.com/en-us/windows/wsl/tutorials/wsl-database
Update apt

sudo apt update

Download Postgres

sudo apt install postgresql postgresql-contrib

Create a password for the default user 'postgres'

sudo passwd postgres

Start the postgresql service

sudo service postgresql start

Now switch over to already created default role 'postgres'

sudo -i -u postgres

and type 'psql' and hit enter to enter the postgres shell.

You should now see...

postgres=#

before everything you type.

Step 2.

Create a new user

CREATE ROLE anyusername WITH LOGIN PASSWORD 'anypassword';

Note: syntax is important. Make sure your username is not in any quotations and the password is in SINGLE quotes. The semi-colon at the end is necessary. If you did it right you should see CREATE ROLE outputted to the terminal.

Give your user a database

CREATE DATABASE your_application_name OWNER anyusername;

Step 3.

Open your rails app and add the gem 'pg' to your gemfile. Make sure to 'bundle install' afterwards as well.

Next, go to config/database.yml and change it to match this:

default: &default
  adapter: postgresql
  host: localhost
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000

development:
  <<: *default
  database: your_application_name
  username: anyusername
  password: anypassword

Note that the test and production databases wont work with the way we are setting this up. Unfortunately, this was the only way I was able to do it.

Lastly, migrate your database by entering:

rake db:migrate

If you don't get any errors than you did it! It took me hours of googling and trying out different things in my terminal to get Postgres to work. Many of the guides that I read about using Postgres with rails were leaving me stuck with different errors so I figured it might be helpful to someone to see what I did. The second answer from the stackoverflow link below was what helped me the most. Lastly, I want to mention to anyone who was stuck like I was that you don't absolutely need to get Postgres to work locally to be able to host on a platform like Heroku. You just have to switch the 'sqlite3' gem to 'pg' and change the database.yml so that it works on Heroku's end. There's a good reason Rails uses sqlite3 for testing by default and it's because it so much more convenient. Still, although it may not be necessary, it's important to be able to test that the code for the database works locally before you push it to a live server and more than that, it just feels nice to say you managed to conquer a database management system like Postgres.(maybe I'm exaggerating a bit) At the very least, I hope you enjoyed reading this post.

sources:
https://stackoverflow.com/questions/9987171/rails-fatal-peer-authentication-failed-for-user-pgerror

https://docs.microsoft.com/en-us/windows/wsl/tutorials/wsl-database

Video Game Backlog Tracker App

Nathan Rymarz — Thu, 25 Mar 2021 02:22:53 +0000

For my last project at Flatiron School, I created an app that allows users to search and add video games to a backlog and categorize games inside their backlog as not-started, started or completed. This post will describe the process I underwent to build my app.

Before I began coding I had a good idea of the components I would need to build for my app. I made one container component for each route and a couple basic components that I thought I would need. Next, I created a reducer and an 'addGames' action that fetches games from the RAWG API. I also connected each container component to the Redux store. After that I made a form component and wrote out the code necessary to get a list of games to show up on my home page after a user submits the form. Users could now search for games by title and would receive the first page of results from the API. Getting all the that done was straightforward since those were all things we practiced building in lessons.

Next, I started to style my home page using react-bootstrap. I made it so each video game was represented as a card. Confusingly, the cards were appearing very skinny and super tall. I didn't find out why this was but I solved it by making the card-container a flex-container and wrapping each card in a column component and giving those columns a specific width. This way the cards took up the full width of the columns and I could easily control the columns width using props passed to the 'col' component.

Although controlling the width turned out to be easy, getting the cards to all be the same height and look nice was a more complicated issue. Each card was a different height mainly because of differently sized images inside the cards. If I made each card take the full height of the column, there would occasionally be cards with lots of empty space which I thought looked ugly. There were a couple solutions I tried but the one I thought was the best was to give a maxHeight property to card-images to even out the size differences between cards. I also tried setting a max-height to cards but that wasn't a good solution because I did not have a good way of showing overflowed content. Moreover, a smaller but equally as difficult problem was making it so that the cards would not resize after clicking on them and changing their content. To solve this I used a React ref to save the column height and when a user clicks on the card I set the minHeight of the card to be the height of the column. This way, cards never shrink when a user clicks on them to flip them over.

The last thing I did with my home page was add infinite scrolling. Fortunately this turned out to be easy due to a nice package 'react-infinite-scroll-component' that I found from google.

After getting my home page to look pretty I added in my other routes, backlog and login, and their pages. One challenge that I faced while making my backlog page was handling moving a game from one category into another. Inside my backlog container's state are three lists representing the games in each category: started, not-started and completed. The issue was knowing which lists to update when a user moves a game to a different category. The way I handled this was to use variables for the keys that get updated inside my setState function. When a user selects a category they want to move a game to, a string gets passed to the handleSelect method, which is the same as one of the names of the keys inside the state of the backlog container. I use that string and the current status(completed, started or not started) of the game to determine which list to update. Because the string of game.status and the string that gets passed to handleSelect are the same as the names of the keys I was able to avoid using any comparisons inside my handleSelect method. This made my code clear and concise.

    handleSelect = (newCat,game) =>{
        const gameCategory = game.category
        game.category = newCat
        this.setState(prevState =>{
            return{
                [gameCategory]: prevState[gameCategory].filter(g => g.id!== game.id),
                [newCat]: [...prevState[newCat], game]
            }
        })
    }

The final step was to create a backend that sends and receives JSON Web Tokens. For this I followed the lesson from Flatiron that outlined this process. I didn't have much trouble making the backend itself but handling logins and making use of data from my API in the frontend turned out to be more challenging than I initially thought. However, it was nothing that I couldn't figure out on my own.

Using React to make a dynamic full-stack application was enjoyable and straightforward. I learned a lot about styling, JSON Web Tokens and working with data coming from multiple sources, for example, user-data coming from my backend and game-data from the RAWG API. Combining data to make unique and interesting apps is a common yet challenging task and I'm happy to have had this experience for myself. I feel good about what I achieved with this project.

Check it out: https://guarded-temple-25512.herokuapp.com
github: https://github.com/nrymarz/vg-backlog-tracker

Making A JavaScript Role-Playing Game

Nathan Rymarz — Mon, 22 Feb 2021 06:18:36 +0000

In order to cement the concepts of Object Oriented Programming and get more familiar with JavaScript I decided to make my own turn-based role-playing game. This post will describe the steps I took and some of the challenges I faced while creating my game.

To start, I built out a very basic game with the help of tutorials that I watched on YouTube. It comprised a game-loop, an update function and a render function. I also made Player and Level Classes with their own update and draw methods. So far the game only had a moveable player character and a background. I used assets that I found from OpenGameArt.org. The asset that I chose for the my player included sprites for walking in all directions. So the next thing I did was animate my player character. To do this, I made an animate() method in my Player class. When I call player.animate(), the player starts his walk animation. I ran into a problem with requestAnimationFrame() changing the context of animate(). Fortunately, I knew how to fix it using bind. I used an instance variable to count frames and update the spriteIndex every 5 frames. The code for my animate() method is below.

  animate(){
        this.frame++
        if(this.frame % 5 === 0){
            this.spriteIndex[0] +=1
            if(this.spriteIndex[0] === 4)this.spriteIndex[0] = 0
        }
        requestAnimationFrame(this.animate.bind(this))
    }

After that, I added in enemies and a spawning method in my Level Class that makes sure enemies don't spawn on the player or on top of each other. The next thing to do was to get collision working. To check if the player is touching enemies, I made a method isTouchingEnemies() inside my player class. The method takes a list of enemies(the enemies that belong to the current level) and returns falsey if the player is not touching an enemy or it returns an enemy that the player is touching.

 isTouchingEnemies(enemies){
        return enemies.find(enemy =>{
            return(this.x+40>enemy.x && this.x<enemy.x+enemy.width)
            &&(this.y+50>enemy.y && this.y<enemy.y+enemy.height)
        })
    }

I also added an instance variable isTouchingEdge that gets set to true when the player is touching the edge of the screen. Now I could get onto creating battles and spawning new levels.

Inside of the update function for my main game loop, I added checks for player.isTouchingEnemies and player.isTouchingEdge. When the player is touching the edge, create a new level and put the the player on the opposite side that he touched. This way, the player looks like he is traversing across screens.

Subsequently, to handle battles, I created a global scope variable GAMESTATE and added checks to see if GAMESTATE = "MAP" or "BATTLE" inside the game loop. If GAMESTATE was "BATTLE," then render and update an instance of my BattleUI class. The BattleUI class handles drawing the battle UI (obviously) and selecting and using abilities during battle.

One issue that occurred with my BattleUI was super fast scrolling when the user held up or down to select their ability. This happened because for every frame that passed while the key was held down, the selected ability index would increase or decrease. To deal with this, I used a frame counter and an instance variable, abilityIndexLockout. When the user presses up or down, abilityIndexLockout sets to true, preventing them from scrolling until 15 frames have passed and abilityIndexLockout sets back to false. This might not be the most user-friendly way to deal with fast scrolling but it got the job done.

The next big piece of my game was the pause screen, which I had planned to also use as an inventory and player stats screen. Making the Inventory class was very similar to the BattleUI class, the difference was that instead of selecting and using abilites, the player is scrolling through items. I kept it simple by only having 2 items in my game, health and mana potions. For a user to get to their inventory, I added an EventListener that switches the GAMESTATE variable to "INVENTORY" or "MAP", depending on if they are in their inventory already, when the user presses the 'i' key.

Once that was done, the last step to completing my game was adding in new abilities and implementing player levelups. Implementing Level Ups was straightforward. To keep it simple, I used getter methods for player stats like attack, spellpower and hp that scale with the current player level. For example...

get attack(){
        return (this.level + (this.level-1))*2 + 8 
    }

This way, I just have to worry about saving the players current level and XP, instead of all their current stats.

After finishing everything with the game itself, I built a backend Rails app to use for saving and loading game data. I encountered a frustrating and odd bug with VSCode's LiveServer extension. Anytime I used a fetch request, the page would reload. I had to disable automatic refreshing from LiveServer to get my app to work. Other than that, getting the backend to work was simple.

Overall, I'm very pleased with how my game turned out. I have found a new appreciation for indie game developers since I've experienced how much work it takes to add basic features to a game. I enjoyed the time I spent building it and learned a lot about game development and JavaScript along the way.