Horizontal Scroll View Component – react-native-steve

Description:

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

How to use it:

1. Install and import the component.

# Yarn
$ yarn add react-native-steve
# NPM
$ npm i react-native-steve

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

2. Basic usage.

const topics = [
  {
    emoji: '🍻',
    text: 'Entertainment'
  },
  {
    emoji: '🐈',
    text: 'Cats'
  },
  // ...
]

export default function TopicsScreen() {
  const { topicContainer, topicText, title } = styles
  const renderTopic = ({ item }) => {
      const { emoji, text } = item
      return (
          <View style={topicContainer} >
              <Text >
                  {emoji}
              </Text >
              <Text style={topicText} >
                  {text}
              </Text >
          </View >
      )
  }
  return (
      <View style={styles.container} >
          <Text style={title} >
              {'TOPICS TO EXPLORE'}
          </Text >
          <Steve
              data={topics}
              renderItem={renderTopic}
              keyExtractor={item => item.text} />
      </View >
  )
}
App.displayName = 'App'

Preview: