React Native horizontal scroll view component as seen on Clubhouse tags

Overview

react-native-steve

React Native horizontal scroll view component as seen on Clubhouse tags

BUM

Installation

npm install react-native-steve

or

yarn add react-native-steve

Dependencies

This library requires react-native-reanimated and react-native-gesture-handler

Important

This component uses react-native-reanimated v2 stable version so in order to use this component your app must be configured for reanimated v2

Usage

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

const topics = [
    {
        emoji: '🍻',
        text: 'Entertainment'
    },
    {
        emoji: '🐈',
        text: 'Cats'
    },
    {
        emoji: '🦾',
        text: 'Robots'
    },
    {
        emoji: '🎉',
        text: 'Party'
    },
    {
        emoji: '🌍',
        text: 'World'
    },
    {
        emoji: '📚',
        text: 'Books'
    },
    {
        emoji: '👘',
        text: 'Fashion'
    },
    {
        emoji: '📱',
        text: 'Applications'
    },
    {
        emoji: '📸',
        text: 'Photography'
    },
    {
        emoji: '🧠',
        text: 'Ideas'
    },
    {
        emoji: '⚔️',
        text: 'War'
    },
    {
        emoji: '💼',
        text: 'Business'
    },
    {
        emoji: '🎭',
        text: 'Theater'
    },
    {
        emoji: '📮',
        text: 'Job'
    }
]

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 }
})

Props

name required type default description
data yes Array An array of items to render
renderItem yes Function Function that returns a component with given item and index. It is similar to FlatList's renderItem prop
keyExtractor yes Function Function that returns an unique key for each item in the array. Notice that it is a must to provide a unique key since it's used to make calculations
containerStyle no Style Object Style object for root component
isRTL no boolean false Whether the component is RTL layout
itemStyle no Style Object Style object for parent component of each child

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Author

tsdmrfth

Issues
  • RTL code breaks layouts with fewer than two items

    RTL code breaks layouts with fewer than two items

    That's at least my guess. Here's the likely offending line:

                        const firstKey = keyExtractor(data[firstIndex], firstIndex)
                        const secondKey = keyExtractor(data[secondIndex], secondIndex)
    

    The assumption is that the 1 index (whether firstIndex or secondIndex depending on RTL) is valid, which isn't necessarily the case.

    opened by braincore 6
  • Decrease reanimated requirement to 2.x

    Decrease reanimated requirement to 2.x

    I've been using a fork where I modified the reanimated dependency specification to ^2 to satisfy another dependency that currently only works for reanimated 2.0. Seems to work without a hitch so I suggest making the peer dependency more liberal.

    opened by braincore 6
  • Error if containerStyle is unspecified

    Error if containerStyle is unspecified

    I'd expect there to be a sensible default that works in the case that it isn't specified.

    opened by braincore 5
  • Ignore vertical panning

    Ignore vertical panning

    I'm testing this with a ScrollView. It's not possible to scroll vertically when swiping on this component as the PanGestureHandler captures it. An improvement would be for this component to only capture horizontal panning, but not vertical.

    opened by braincore 4
  • Feature/refactor

    Feature/refactor

    opened by tsdmrfth 0
  • v4

    v4

    opened by tsdmrfth 0
  • v3.0.1

    v3.0.1

    opened by tsdmrfth 0
  • fix: update activeOffsetX

    fix: update activeOffsetX

    opened by tsdmrfth 0
  • fix: lower reanimated dependency to ^2

    fix: lower reanimated dependency to ^2

    Also updates semver notation to work for npm. "^" -> "^0".

    opened by braincore 0
  • Stop scroll on finger down

    Stop scroll on finger down

    If you begin an inertial scroll but place finger down to stop it, it will not stop. It only stops if you actually move your finger.

    opened by irfaan 1
  • Is there a way to set the max number of rows?

    Is there a way to set the max number of rows?

    Currently, the example shows 3 rows based on the number of items in topics. Is the number of rows configurable?

    opened by irfaan 3
  • Cannot scroll on android

    Cannot scroll on android

    Great library! I'm able to get it to work on iOS, But on android even after I followed all instructions from react-native-animated 2, I only able to render but not able to scroll

    opened by hengvenchang 1
  • How to make it work for RTL?

    How to make it work for RTL?

    Really very good component, I've used this component in one of my apps but don't know how to make it work for RTL? any reference and help would be highly appreciated. Thank you so much.

    opened by mehulgecg 15
Releases(v0.4.1)
Owner
Fatih Taşdemir
Cats, JavaScript!
Fatih Taşdemir
A Hyperlink component for react-native that makes urls, fuzzy links, emails etc clickable

A Hyperlink component for react-native that makes urls, fuzzy links, emails etc clickable

Pawan 611 Nov 29, 2021
react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.

react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui. While some cod

Mat Sz 55 Nov 21, 2021
react-health-card 🏥💳 An awesome react health card component.

react-health-card An awesome health card component. Installation yarn add react-health-card or npm install react-health-card --save Usage import Healt

medipass 26 Nov 8, 2021
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 73.4k Dec 2, 2021
Font Awesome 5 React component

react-fontawesome Font Awesome 5 React component using SVG with JS Documentation How to Help Contributors Releasing this project (only project owners

Fort Awesome 3.5k Nov 26, 2021
A React Component library implementing the Base design language

Base Web React Components Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base. Us

Uber Open Source 7.1k Nov 25, 2021
The Most Complete React UI Component Library

PrimeReact PrimeReact is a rich set of open source UI Components for React. See PrimeReact homepage for live showcase and documentation. Download Prim

PrimeFaces 2.3k Nov 25, 2021
React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

Ed Mortlock 242 Nov 28, 2021
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

lindelof 454 Nov 20, 2021
Rheostat is a www, mobile, and accessible slider component built with React

Rheostat A mobile, tablet, desktop, and accessible slider for the web. Install npm install rheostat Initialize As of v3.0.0, the rheostat project reli

Airbnb 1.6k Nov 23, 2021
A simple React component that is resizable with a handle.

React-Resizable View the Demo A simple widget that can be resized via one or more handles. You can either use the <Resizable> element directly, or use

RGL 1.7k Nov 30, 2021
📕React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.

?? React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.

Ankit Kumar Pandit 430 Nov 22, 2021
React Component for Swapping on the Serum DEX

@project-serum/swap-ui A reusable React component for swapping on the Serum DEX. The Solana program can be found here. Usage Install First install the

Project Serum 59 Nov 28, 2021
A React Component library for buliding modern applications easily & quickly.

A React Component library for building modern applications easily & quickly

Elementz 336 Nov 23, 2021
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

Kiwi.com 1.1k Nov 27, 2021
A React component generation for app prototyping

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

null 11 Aug 7, 2021
InvaUI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Inva UI Sponsored by English • Table of Contents Quick start Install Install The easiest way to use Inva UI is to install it from npm $ npm install @i

Shaun Mak 4 Nov 8, 2021
Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps.

Juno Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps. base on MATERIAL-UI. Explore Juno with the

RingCentral 24 Nov 23, 2021
A React component library for Tailwind projects

Elora - A React component library for Tailwind Elora is a component library built in TypeScript for React developers who use Tailwind in their project

Brett Thurston 15 Oct 9, 2021