Initial commit

Author: phamfoo

.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+lib/

.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "tienphaw"
+}

.gitignore

@@ -0,0 +1,15 @@
+# macOS
+.DS_Store
+
+# Node
+node_modules/
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# Expo
+.expo/
+
+# Build
+dist/
+lib/

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname $0)/_/husky.sh"
+
+yarn lint

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "semi": false,
+  "quoteProps": "consistent"
+}

example/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

example/.gitignore

@@ -0,0 +1,13 @@
+node_modules/
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

example/App.tsx

@@ -0,0 +1,85 @@
+import { StatusBar } from 'expo-status-bar'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { LinearGradient } from 'expo-linear-gradient'
+import easeGradient from 'react-native-easing-gradient'
+import { Text } from 'react-native'
+
+const BACKGROUND_COLOR = '#18181B'
+
+const { colors, locations } = easeGradient({
+  colorStops: {
+    0: {
+      color: 'transparent',
+    },
+    1: {
+      color: BACKGROUND_COLOR,
+    },
+  },
+})
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <StatusBar style="auto" />
+      <View style={styles.header} />
+      <View style={styles.overlayContainer}>
+        <View style={styles.fill}>
+          <LinearGradient
+            colors={['transparent', BACKGROUND_COLOR]}
+            locations={[0, 1]}
+            style={styles.fill}
+          />
+          <View style={styles.description}>
+            <Text style={styles.descriptionText}>Before (linear)</Text>
+          </View>
+        </View>
+        <View style={styles.fill}>
+          <LinearGradient
+            colors={colors}
+            locations={locations}
+            style={styles.fill}
+          />
+          <View style={styles.description}>
+            <Text style={styles.descriptionText}>After (ease-in-out)</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const HEADER_HEIGHT = 300
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: BACKGROUND_COLOR,
+  },
+  header: {
+    height: HEADER_HEIGHT,
+    backgroundColor: '#6366F1',
+  },
+  overlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    height: HEADER_HEIGHT / 2,
+    marginTop: HEADER_HEIGHT / 2,
+  },
+  fill: {
+    flex: 1,
+  },
+  description: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+  },
+  descriptionText: {
+    color: '#E0E7FF',
+  },
+})

example/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "example",
+    "slug": "example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}