# react-native-steve

> React Native horizontal scroll view component as seen on Clubhouse tags

Latest version **0.4.1** (published 2021-04-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-steve
pnpm add react-native-steve
yarn add react-native-steve
bun add react-native-steve
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2021-04-14 |
| First published | 2021-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 61.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 96 |
| Author | Fatih Tasdemir |
| Maintainers | tsdmrfth |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/react-native-steve
- Repository: https://github.com/tsdmrfth/react-native-steve
- Homepage: https://github.com/tsdmrfth/react-native-steve#readme
- Issues: https://github.com/tsdmrfth/react-native-steve/issues
- npm.io page: https://npm.io/package/react-native-steve

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.4.1 (latest) — 2021-04-14
- 0.4.0 — 2021-04-11
- 0.3.0 — 2021-04-03
- 0.2.1 — 2021-04-03
- 0.2.0 — 2021-03-30

## README

# react-native-steve

React Native horizontal scroll view component as seen on Clubhouse tags

![BUM](https://media.giphy.com/media/FFq4lKeqeAIFrh7CrI/giphy.gif)

## Installation

```sh
npm install react-native-steve
```

or

```sh
yarn add react-native-steve
```

## Dependencies
This library requires [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) and [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler)

### Important

> This component uses [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs) v2 stable version so in order to use this component your app must be configured for reanimated v2

## Usage

```javascript
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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

## Author

#### [tsdmrfth](https://twitter.com/tsdmrfth)

---
_Source: https://npm.io/package/react-native-steve · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._