Implementing a feedback screen in React Native

Question

project output design

Installing Dependencies:-

we need one package called https://github.com/jeanregisser/react-native-slider

Coding :-

Finally, let’s get to what really matters. So… The logic is simple. We will use te Slider to get some value from the user. Since we have 5 possibilities, the values of the Slider will range from 0 to 4. To each value we will assign a label, color and emoji.

const colors = ['#F5CECE', '#FFE3D5', '#FFF5D1', '#F0FAEA', '#D4E9C6'];
const labels = ['Horrible', 'Not Good', 'OK!', 'Good', 'Excellent'];
const faces  = [crying, sad, straight, laughing, smiling];

I did it using arrays, that seemed the simpliest solution to me. So, when the user give us a value through the Slider, what we have to do is to get the value of the array in the correspondent position.

In order to these things work properly, we have to set up the slider. The component is really easy to use and understand.

So… I set the minimum and maximum value. The step is how much the slider should increase or decrease. Since we don’t want values like 4.5. I defined it to be 1. The rest of the props are used to style.

import { StyleSheet, Text, View, Image, TouchableOpacity, Dimensions, TextInput, ScrollView } from 'react-native'
import React, { useEffect, useState } from "react";
import Slider from 'react-native-slider'

const FeedbackScreen = ({feedbackModalProp, feedbackPayload}) => {


const [rating, setRating] = useState(3)
const [fedDesc, setFedDesc] = useState()

const colors = ['#F5CECE', '#FFE3D5', '#FFF5D1', '#F0FAEA', '#D4E9C6'];
const labels = ['Horrible', 'Not Good', 'OK!', 'Good', 'Excellent!'];
// const faces = [crying, sad, straight, laughing, smiling];

//import your emojis
const faces = [require('../../assets/images/feedbackEmojies/crying.png'), require('../../assets/images/feedbackEmojies/sad.png'), require('../../assets/images/feedbackEmojies/straight.png'), require('../../assets/images/feedbackEmojies/laughing.png'), require('../../assets/images/feedbackEmojies/smiling.png')];


return (
    <>
        <ScrollView showsVerticalScrollIndicator={false}>
            <View style={{
                ...styles.container,
                backgroundColor: colors[rating],
                borderTopLeftRadius: 15,
                borderTopRightRadius: 15,
                paddingBottom: 55,
            }}>
                <Text style={styles.title}>Rate Your Experience</Text>
                <Image
                    style={styles.smiley}
                    source={faces[rating]}
                // source={require('../../assets/images/feedbackEmojies/straight.png')}
                />
                <Text style={styles.ratLabel}>{labels[rating]}</Text>

                <Slider
                    style={styles.slider}
                    value={rating}
                    onValueChange={value => setRating(value)}
                    minimumValue={0}
                    maximumValue={4}
                    step={1}
                    thumbTintColor={colors[rating]}
                    thumbStyle={styles.sliderThumb}
                    minimumTrackTintColor="#666"
                    maximumTrackTintColor="#666" />

                <View style={{ marginVertical: 10 , marginTop: 14}}>
                    <Text style={styles.headerLabel}>Tell us what can be Improved?</Text>
                    <TextInput
                        multiple={true}
                        placeholder={'Tell us on how can we improve....'}
                        style={[styles.textinput, {
                            // color: "#000",
                            paddingLeft: 5,
                            marginTop: 5,
                            borderWidth: 1,
                            width: Dimensions.get('window').width / 1 - 20,
                            height: 150,
                            borderRadius: 5,
                            borderColor: '#ccc',
                            textAlignVertical: 'top',
                        }]}

                        onChangeText={(text) => setFedDesc(text)}
                        numberOfLines={4}
                    />
                </View>

            </View>
        </ScrollView>
        <TouchableOpacity  onPress={() => onFeedbackSubmit()} style={styles.buttonContainer}>
            <Text style={styles.buttonLabel}>Submit</Text>
        </TouchableOpacity>
    </>
)
}

export default FeedbackScreen

const styles = StyleSheet.create({

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
},
title: {
    // fontWeight: 'bold',
    marginVertical: 10,
    fontFamily: 'Roboto-BoldItalic',
    letterSpacing: 2.5,
    color: '#000',
    fontSize: 26
},
smiley: {
    width: 200,
    height: 200,
    margin: 40
},
ratLabel: {
    fontFamily: 'Roboto-MediumItalic',
    fontWeight: 'bold',
    fontSize: 22,
    color: '#fe786a',

},
slider: {
    width: '80%'
},
sliderThumb: {
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#666'
},
buttonContainer: {
    position: 'absolute',
    width: '100%',
    padding: 15,
    bottom: 0,
    backgroundColor: 'black',
    alignItems: 'center',
    justifyContent: 'center',
    
},
buttonLabel: {
    color: 'white',
    fontWeight: 'bold'
},




headerLabel: {
    fontSize: 16,
    fontWeight: 'bold',
    color: 'black'
},

})

Output SS