🚀 google-play-swipe

React Native component that mimics the UI present in Google Play Store, Movies & TV

• Fully customizable UI from opacity interpolation to animating featured image
• Content is displayed inside of a customizable ScrollView component

⚙️ Installation

☊ Using npm:

npm install google-playswipe

🧶 Using yarn:

yarn add google-playswipe

♨ Usage

import PlaySwipe from 'google-playswipe';

Add a <PlaySwipe /> tag within your component with required props.

📦 Data setup

const data = {
    items: [
      { title: 'Knight and Day', description: '$0.99', imageSource: 'https://tinyurl.com/play-swipe-1' },
      { title: 'The Vanishing',  description: '$1.99', imageSource: 'https://tinyurl.com/play-swipe-2' },
      { title: 'Ultimate Avengers 2', description: '$1.99', imageSource: 'https://tinyurl.com/play-swipe-3' },
      { title: 'The Humanity Bureau', description: '$4.99', imageSource: 'https://tinyurl.com/play-swipe-4' },
      { title: 'Trading Paint', description: '$1.99', imageSource: 'https://tinyurl.com/play-swipe-5' }
    ]
  };

const { items } = data;
const cardItems = items.map((item) => (
  {
      ...item,
      imageSource: { uri: item.imageSource } or require('path to local image'),
      key: item.title,
      onClick: () => Alert.alert(item.title), // onclick handler for each card data item
    }
  ),
);

📝 Minimal configuration

<PlaySwipe
  header={{
    content: {
      headerTitle: 'Rentals from $0.99',
      headerSubtitle: 'Discover a new favourite',
      headerButton: (
        <TouchableOpacity onPress={() => Alert.alert('Discover more!')}>
          <Ionicons name="md-arrow-forward" size={28} color="#58646e" />
        </TouchableOpacity>
      ),
    },
  }}
  featuredImage={{
    source: { uri: 'resource identifier for the image' } 
      or
    source: require('./path/to/image.png')
  }}
  cardItems={{
      content: cardItems,
  }}
/>

📝 Full customization

<PlaySwipe
  header={{
    content: {
      headerTitle: 'Rentals from $0.99',
      headerSubtitle: 'Discover a new favourite',
      headerButton: (
        <TouchableOpacity onPress={() => Alert.alert('Discover more!')}>
          <Ionicons name="md-arrow-forward" size={28} color="#58646e" />
        </TouchableOpacity>
      ),
    },
    styles: {
      sectionHeaderStyles:     // provide your custom styles
      headerViewStyles:       // provide your custom styles
      headerTitleStyles:     // provide your custom styles
      headerSubTitleStyles: // provide your custom styles
    },
  }}
  featuredImage={{
    source: { uri: 'resource identifier for the image' } 
      or
    source: require('./path/to/image.png')
    styles: {
        imageContainerStyles: // provide your custom styles
        imageStyles:         // provide your custom styles
      },
    }}
    cardItems={{
      content: cardItems,
      styles: {
        sectionContainerStyle:   // provide your custom styles
        sectionImageStyle:      // provide your custom styles
        sectionTitleStyle:     // provide your custom styles
        sectionSubTitleStyle: // provide your custom styles
      },
    }}
    scrollView={{
      styles: // provide your custom styles,
      showsHorizontalScrollIndicator: false,
      horizontal: true,
      scrollEventThrottle: 16,
      decelerationRate: 0,
      snapToInterval: 150,
      contentInset: // provide custom insets,
      contentContainerStyle: // provide your custom styles,
    }}
    interpolations={{
      backgroundTransitionInterpolationConfig: {
        inputRange: [50, 100],
        outputRange: ['#FBAB7E', '#F7CE68'],
        extrapolate: 'clamp',
      },
      imagePositionInterpolationConfig:{
        inputRange: [0, 100],
        outputRange: [0, -50],
        extrapolate: 'clamp',
      },
      imageOpacityInterpolationConfig: {
        inputRange: [0, 100],
        outputRange: [1, 0.1],
        extrapolate: 'clamp',
      }
    }}
/>

🕹️ Components

Card

Name	Description	Type	Required
title	Card tile	String	✓
descriptoin	Card description	String
imageSource	Image to be dispalyed in the card	ImageSourcePropType	✓
onClick	Handler function when a card is pressed	NativeTouchEvent
styles	Collection of styles for swipe item component	CardStyles

Header

Name	Description	Type	Required
title	Header tile	String	✓
description	Header description	String
button	Ideally a button or JSX element for the header component	JSX.Element	✓
styles	Collection of styles for header component	StyleProp

PlaySwipe

Name	Description	Type	Required
header	Object that is required to build the header component	Header	✓
featuredImage	Featured image that will be displayed to the left of card ui	FeaturedImage	✓
cardItems	Object that contains the card item data and styles	CardItems	✓
swipeContainerStyles	Collection of styles for the card items swipe container	StyleProp;
interpolations	Object that contains interpolation for animations effects	HorizontalScrollInterpolations

🖋 Contributing

Feel free to open a new pull request or GitHub issue for any changes.

✍️ Author

Chandan Rauniyar | https://chandankkrr.github.io