first commit

.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+};

.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

.gitignore

@@ -0,0 +1,63 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# Visual Studio Code
+#
+.vscode/
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  bracketSpacing: false,
+  jsxBracketSameLine: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.tsx

@@ -0,0 +1,86 @@
+// Inspiration: https://dribbble.com/shots/14139308-Simple-Scroll-Animation
+// Illustrations by: SAMji https://dribbble.com/SAMji_illustrator
+
+import * as React from 'react';
+import {useRef} from 'react';
+import {
+  StatusBar,
+  Image,
+  Animated,
+  View,
+  Dimensions,
+  StyleSheet,
+} from 'react-native';
+const {width} = Dimensions.get('screen');
+
+const data = [
+  'https://cdn.dribbble.com/users/3281732/screenshots/7284562/media/d65a4ce1bc2754d4a94b4884ae4c90dc.jpg?compress=1&resize=1200x1200',
+  'https://cdn.dribbble.com/users/3281732/screenshots/7494265/media/59c910cbe462cb632449d5c464684555.jpg?compress=1&resize=1200x1200',
+  'https://cdn.dribbble.com/users/3281732/screenshots/7012328/media/bcd672685071ca4da27d5f3ea44ac5db.jpg?compress=1&resize=1200x1200',
+  'https://cdn.dribbble.com/users/3281732/screenshots/14012664/media/eff7aa5c75262a9cf85f897e8ef75113.jpeg?compress=1&resize=1200x1200',
+  'https://cdn.dribbble.com/users/3281732/screenshots/13130602/media/592ccac0a949b39f058a297fd1faa38e.jpg?compress=1&resize=1200x1200',
+  'https://cdn.dribbble.com/users/3281732/screenshots/6103806/b5vodvow.png?compress=1&resize=1200x1200',
+  'https://cdn.dribbble.com/users/3281732/screenshots/13661330/media/1d9d3cd01504fa3f5ae5016e5ec3a313.jpg?compress=1&resize=1200x1200',
+];
+
+const imageW = width * 0.7;
+const imageH = imageW * 1.54;
+
+export default () => {
+  const scrollX = useRef(new Animated.Value(0)).current;
+
+  return (
+    <View style={{flex: 1, backgroundColor: '#000'}}>
+      <StatusBar hidden />
+      <View style={[StyleSheet.absoluteFillObject]}>
+        {data.map((image, index) => {
+          const inputRange = [
+            (index - 1) * width,
+            index * width,
+            (index + 1) * width,
+          ];
+
+          const opacity = scrollX.interpolate({
+            inputRange,
+            outputRange: [0, 1, 0],
+          });
+
+          return (
+            <Animated.Image
+              key={image + index}
+              source={{uri: image}}
+              style={[StyleSheet.absoluteFillObject, {opacity}]}
+              blurRadius={50}
+            />
+          );
+        })}
+      </View>
+      <Animated.FlatList
+        data={data}
+        horizontal
+        pagingEnabled
+        onScroll={Animated.event(
+          [{nativeEvent: {contentOffset: {x: scrollX}}}],
+          {useNativeDriver: true},
+        )}
+        keyExtractor={(_, index) => index.toString()}
+        renderItem={({item}) => {
+          return (
+            <View
+              style={{width, justifyContent: 'center', alignItems: 'center'}}>
+              <Image
+                source={{uri: item}}
+                style={{
+                  width: imageW,
+                  height: imageH,
+                  resizeMode: 'cover',
+                  borderRadius: 16,
+                }}
+              />
+            </View>
+          );
+        }}
+      />
+    </View>
+  );
+};

__tests__/App-test.tsx

@@ -0,0 +1,14 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});

android/app/_BUCK

@@ -0,0 +1,55 @@
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
+
+lib_deps = []
+
+create_aar_targets(glob(["libs/*.aar"]))
+
+create_jar_targets(glob(["libs/*.jar"]))
+
+android_library(
+    name = "all-libs",
+    exported_deps = lib_deps,
+)
+
+android_library(
+    name = "app-code",
+    srcs = glob([
+        "src/main/java/**/*.java",
+    ]),
+    deps = [
+        ":all-libs",
+        ":build_config",
+        ":res",
+    ],
+)
+
+android_build_config(
+    name = "build_config",
+    package = "com.carouselanimation",
+)
+
+android_resource(
+    name = "res",
+    package = "com.carouselanimation",
+    res = "src/main/res",
+)
+
+android_binary(
+    name = "app",
+    keystore = "//android/keystores:debug",
+    manifest = "src/main/AndroidManifest.xml",
+    package_type = "debug",
+    deps = [
+        ":app-code",
+    ],
+)