React Horizontal Scroll View Component using react-native-steve

Category: React React Animation | June 25, 2021
Author: tsdmrfth
Official Page: Go to website
Last Update: June 25, 2021
License: MIT

Description:

If you are looking to create a horizontal scroll view animation in your project then, this React horizontal scroll view component can be very useful for you.

How to use it?

First, install the component via NPM.

npm install react-native-steve

Or, you can install it using Yarn.

yarn add react-native-steve

Then, import the component.

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Steve from 'react-native-steve'

Implementation:

const topics = [
    {
        emoji: '🍻',
        text: 'Entertainment'
    },
    {
        emoji: '🐈',
        text: 'Cats'
    }
]
export default function App() {
    const {
        topicContainer,
        topicText,
        title,
        container,
        steveContainer
    } = styles

    const renderTopic = ({ item }) => {
        const { emoji, text } = item
        return (
            <View style={topicContainer}>
                <Text>
                    {emoji}
                </Text>
                <Text style={topicText}>
                    {text}
                </Text>
            </View>
        )
    }

    return (
        <View style={container}>
            <Text style={title}>
                {'TOPICS TO EXPLORE'}
            </Text>
            <Steve
                isRTL={false}
                data={topics}
                renderItem={renderTopic}
                itemStyle={{ margin: 5 }}
                containerStyle={steveContainer}
                keyExtractor={item => item.text}/>
        </View>
    )
}

App.displayName = 'App'

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFF',
        justifyContent: 'center'
    },
    topicContainer: {
        borderWidth: 1,
        borderColor: '#ecd9d9',
        borderBottomWidth: 2,
        borderRadius: 10,
        paddingHorizontal: 10,
        height: 38,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        backgroundColor: '#FFF'
    },
    topicText: {
        fontSize: 14,
        fontWeight: '500',
        marginLeft: 5
    },
    title: {
        fontSize: 13,
        color: 'rgb(134,130,119)',
        marginBottom: 5,
        marginLeft: 15,
        fontWeight: '600'
    },
    steveContainer: { marginHorizontal: 5 }
})