React Native Emoji Slider
Tags: reactnative, react, javascript
Published: 2021-09-02 22:27:31

---
title: React Native Emoji Slider
published: true
description: Create a cool slider with emojis in react native
tags: reactnative, react, javascript
canonical_url: https://www.jeffedmondson.dev/blog/emoji-slider/
cover_image: http://images.ctfassets.net/x950sgu03zi0/1c4JDplF2aZnB1W3YwmpP7/49a6d1d7ffad2cd72b89f918ec8fc072/Screen_Shot_2021-09-02_at_6.23.53_PM.png
---

## ✅ The Goal

![Emoji Slider Gif](//images.contentful.com/x950sgu03zi0/78ZG64vrkB4F7hhjbFrjUO/0c53cab816e48a0d93f08946a59a9996/FinalResultGif.gif)


## 🏗 The Process

Install the following NPM package as the slider component is no longer actively maintained by the react native team 😢

```bash
yarn add @react-native-community/slider
```

Let's add the Slider component!

```jsx
<View style={styles.container}>
		<Slider
    />    
</View>
```

With no props the component doesn't look right... It's just a dot on the screen.

![Emoji Slider No Styles](//images.contentful.com/x950sgu03zi0/66hphMpU4pl9B1vVTB3lvi/f80f6f18727a1e108835da15a4700e96/SliderBeforeStyle.png)
 Lets fix that by adding the style prop to give it some width and height

```jsx
<View style={styles.container}>
      <Slider
        style={{width: 200, height: 40}}
      />        
</View>
```
![Emoji Slider With Styles](//images.contentful.com/x950sgu03zi0/43MtBba2GdmztXMuAFzKWg/29fc4f8e9426b754e1ae801a093f1e1d/SliderWithStyle.png)

Now we are talking! So we want to the rating the user to be able slide the slider to various points and to change the emoji that is shown to them. For the sake of this mini tutorial lets choose 5 different emojis. So we will want set the `minimumValue` to 1 and the `maximumValue` to 5. We will also want to set the `step` prop to be `1` meaning that the each time we move the slider it will "step" up one point.

```jsx
<View style={styles.container}>
		<Slider
        style={{width: 200, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
    />  
</View>
```

Next we will want to set up the `onValueChange` prop that takes in a function that gets called each time the value of the slider changes. For this let's use the React `useState` hook that allows us to keep a state in our functional component. For more info on React Hooks check out [the documentation](https://reactjs.org/docs/hooks-overview.html). 

```jsx
export default function App() {

  const [rating, setRating] = React.useState(3);

  return (
    <View style={styles.container}>
      <Slider
        style={{width: 200, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
        onValueChange={setRating}
      />  
    </View>
  );
}
```

That should be it for the slider. We are able to slide it and save the value that is returned to our components state. This is how we are going to change the emoji that is shown to to the user. Lets set that up now. It will just be a simple `<Text>` component and change the font size to make it larger. 

```jsx
export default function App() {

  const [rating, setRating] = React.useState(3); // 3 is the default value

  return (
    <View style={styles.container}>
      <Slider
        style={{width: 200, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
        onValueChange={setRating}
      />  
      <Text style={{ fontSize: 50 }}>
        😐
      </Text>
    </View>
  );
}
```

So in order for this emoji to change we will want to have a function get called every time the component is rendered, which just so happens each time the slider component calls the `setRating` hook. 

```jsx
const getRatingEmoji = () => {
    if (rating === 1){ return '😡' }

    if (rating === 2) { return '😫' } 

    if (rating === 3) { return '😶' } 

    if (rating === 4)  { return '🙂' } 

    if (rating === 5) { return '😁' } 
  }
```

This function is very simple and simply just checks if  the rating is equal to a certain number and if it is return the appropriate emoji that corresponds with that number. The last thing that we need to do is to call this function with the `<Text>` component. 

```jsx
export default function App() {

  const [rating, setRating] = React.useState(3);

  const getRatingEmoji = () => {
    if (rating === 1){ return '😡' }

    if (rating === 2) { return '😫' } 

    if (rating === 3) { return '😶' } 

    if (rating === 4)  { return '🙂' } 

    if (rating === 5) { return '😁' } 
  }

  return (
    <View style={styles.container}>
      <Slider
        style={{width: 200, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
        onValueChange={setRating}
      />  
      <Text style={{ fontSize: 50 }}>
        {getRatingEmoji()}
      </Text>
    </View>
  );
}
```

## 💥 Final Result

Check of the full working code here: [Repo](https://github.com/edmondso006/react-native-emoji-slider)

Follow me on [Twitter](https://twitter.com/jeff_codes) for more!
![Emoji Slider Gif](//images.contentful.com/x950sgu03zi0/78ZG64vrkB4F7hhjbFrjUO/0c53cab816e48a0d93f08946a59a9996/FinalResultGif.gif)