Chandankkrr / Google Play Swipe
React Native component that renders Google Play Movie layout
Stars: ✭ 17
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Google Play Swipe
react-native-template-ui-based
A React Native cross-platform app template for use with @blankapp/ui
Stars: ✭ 13 (-23.53%)
Mutual labels: react-native-web
rnw boilerplate nav
React Native Web boilerplate for universal web/native apps with a react-router/react-navigation combo navigation system.
Stars: ✭ 54 (+217.65%)
Mutual labels: react-native-web
React Native Web
React Native Components and APIs for the Web
Stars: ✭ 19,563 (+114976.47%)
Mutual labels: react-native-web
pass-culture-app-native
Mobile and web application for pass Culture
Stars: ✭ 18 (+5.88%)
Mutual labels: react-native-web
Gatsby Plugin React Native Web
react-native-web plugin for Gatsby
Stars: ✭ 260 (+1429.41%)
Mutual labels: react-native-web
cosmic
🌱🌌 Seed for a universal (native iOS, native Android, web, desktop) app based on react native web, redux and Typescript
Stars: ✭ 32 (+88.24%)
Mutual labels: react-native-web
React Native Web Monorepo
Code sharing between iOS, Android & Web using monorepo
Stars: ✭ 697 (+4000%)
Mutual labels: react-native-web
react-flappy-bird
A side-scroller where the player controls a bird, attempting to fly between columns of green pipes without hitting them.
Stars: ✭ 55 (+223.53%)
Mutual labels: react-native-web
Recyclerlistview
High performance listview for React Native and web!
Stars: ✭ 4,033 (+23623.53%)
Mutual labels: react-native-web
devhub
TweetDeck for GitHub - Filter Issues, Activities & Notifications - Web, Mobile & Desktop with 99% code sharing between them
Stars: ✭ 8,064 (+47335.29%)
Mutual labels: react-native-web
react-native-responsive-query
Responsive style hook for react native.
Stars: ✭ 43 (+152.94%)
Mutual labels: react-native-web
Create React Native Web App
React Native Web CLI
Stars: ✭ 284 (+1570.59%)
Mutual labels: react-native-web
React Native Hyperlink
A <Hyperlink /> component for react-native that makes urls, fuzzy links, emails etc clickable
Stars: ✭ 572 (+3264.71%)
Mutual labels: react-native-web
pro-chat
Full featured chat app built with 💙 Expo & Firebase 🔥
Stars: ✭ 24 (+41.18%)
Mutual labels: react-native-web
Instagram
A universal instagram clone built with Expo
Stars: ✭ 258 (+1417.65%)
Mutual labels: react-native-web
Examples
Example projects that demonstrate how to use Expo APIs and integrate Expo with other popular tools
Stars: ✭ 747 (+4294.12%)
Mutual labels: react-native-web
Expo Spotify
Spotify UI Clone with React Native & Expo || web support => https://expo-spotify.vercel.app
Stars: ✭ 287 (+1588.24%)
Mutual labels: react-native-web
🚀 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].