Skip to content

Instantly share code, notes, and snippets.

@catalinmiron
Created November 24, 2020 07:41
Show Gist options
  • Save catalinmiron/7cc16845338b1d925644a173470f7cd2 to your computer and use it in GitHub Desktop.
Save catalinmiron/7cc16845338b1d925644a173470f7cd2 to your computer and use it in GitHub Desktop.
Starter code React Native Parallax carousel
import * as React from 'react';
import {
Animated,
Dimensions,
Image,
FlatList,
Text,
View,
StyleSheet,
} from 'react-native';
import { StatusBar } from 'expo-status-bar';
const { width, height } = Dimensions.get('screen');
const ITEM_WIDTH = width * 0.76;
const ITEM_HEIGHT = ITEM_WIDTH * 1.47;
const images = [
'https://images.unsplash.com/photo-1551316679-9c6ae9dec224?w=800&q=80',
'https://images.unsplash.com/photo-1562569633-622303bafef5?w=800&q=80',
'https://images.unsplash.com/photo-1503656142023-618e7d1f435a?w=800&q=80',
'https://images.unsplash.com/photo-1555096462-c1c5eb4e4d64?w=800&q=80',
'https://images.unsplash.com/photo-1517957754642-2870518e16f8?w=800&q=80',
'https://images.unsplash.com/photo-1546484959-f9a381d1330d?w=800&q=80',
'https://images.unsplash.com/photo-1548761208-b7896a6ff225?w=800&q=80',
'https://images.unsplash.com/photo-1511208687438-2c5a5abb810c?w=800&q=80',
'https://images.unsplash.com/photo-1548614606-52b4451f994b?w=800&q=80',
'https://images.unsplash.com/photo-1548600916-dc8492f8e845?w=800&q=80',
];
const data = images.map((image, index) => ({
key: String(index),
photo: image,
avatar_url: `https://randomuser.me/api/portraits/women/${Math.floor(
Math.random() * 40
)}.jpg`,
}));
export default function App() {
return (
<View style={styles.container}>
<StatusBar hidden />
<Text style={{ fontSize: 114 }}>❤️</Text>
<Text
style={{
fontFamily: 'Menlo',
marginTop: 10,
fontWeight: '800',
fontSize: 32,
}}
>
Expo
</Text>
<Text style={{ fontFamily: 'Menlo', fontStyle: 'italic', fontSize: 18 }}>
(expo.io)
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
@itznur07
Copy link

Thanks catalin miron

@trinm114
Copy link

trinm114 commented Jul 6, 2023

Great!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment