chore: added basic example

gorhom · May 2, 2020 · e3e7169 · e3e7169
1 parent 8c248b5
commit e3e7169
Show file tree

Hide file tree

Showing 13 changed files with 256 additions and 20 deletions.
diff --git a/example/index.tsx b/example/index.tsx
@@ -1,5 +1,5 @@
-import { AppRegistry } from 'react-native';
 import 'react-native-gesture-handler';
+import { AppRegistry } from 'react-native';
 import App from './src/App';
 import { name as appName } from './app.json';
 

diff --git a/example/ios/StickyItemExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/example/ios/StickyItemExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import RootScreen from './screens/Root';
+import BasicScreen from './screens/Basic';
 import FacebookStoriesScreen from './screens/FacebookStories';
 import FacebookStoriesStyledScreen from './screens/FacebookStoriesStyled';
 
@@ -12,6 +13,13 @@ export default function App() {
     <NavigationContainer>
       <Stack.Navigator initialRouteName="Root" headerMode="none">
         <Stack.Screen name="Root" component={RootScreen} />
+        <Stack.Screen
+          name="Basic"
+          initialParams={{
+            title: 'Basic',
+          }}
+          component={BasicScreen}
+        />
         <Stack.Screen
           name="FacebookStories"
           initialParams={{

diff --git a/example/src/components/basic-sticky/BasicSticky.tsx b/example/src/components/basic-sticky/BasicSticky.tsx
@@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react';
+import Animated, { interpolate, Extrapolate } from 'react-native-reanimated';
+import { transformOrigin } from 'react-native-redash';
+import type { StickyItemContentProps } from '@gorhom/sticky-item';
+import { styles } from './styles';
+
+const BasicSticky = ({
+  x,
+  threshold,
+  itemWidth,
+  itemHeight,
+  stickyItemWidth,
+  stickyItemHeight,
+  separatorSize,
+  borderRadius,
+}: StickyItemContentProps) => {
+  const stickyScaleX = stickyItemWidth / itemWidth;
+  const stickyScaleY = stickyItemHeight / itemHeight;
+  const scaledSpaceX = (separatorSize * 2) / itemWidth;
+  const scaledSpaceY = (separatorSize * 2) / itemHeight;
+  const containerScaleX = stickyScaleX + scaledSpaceX;
+
+  //#region plus
+  const animatedPlusScale = interpolate(x, {
+    inputRange: [0, threshold * 0.6],
+    outputRange: [0, 1],
+    extrapolate: Extrapolate.CLAMP,
+  });
+  const plusStyle = [
+    styles.plus,
+    {
+      width: stickyItemWidth,
+      lineHeight: stickyItemHeight,
+      paddingHorizontal: separatorSize,
+      transform: transformOrigin(
+        { x: 0, y: 0 },
+        {
+          translateX: -separatorSize,
+          translateY: itemHeight / 2 - stickyItemHeight / 2,
+          scale: animatedPlusScale,
+        }
+      ) as Animated.AnimatedTransform,
+    },
+  ];
+  //#endregion
+
+  //#region text
+  const animatedTextOpacity = interpolate(x, {
+    inputRange: [0, threshold * 0.6],
+    outputRange: [1, 0],
+    extrapolate: Extrapolate.CLAMP,
+  });
+  const textStyle = [
+    styles.text,
+    {
+      opacity: animatedTextOpacity,
+      paddingHorizontal: separatorSize,
+      lineHeight: itemHeight,
+      transform: [
+        {
+          translateY: 0,
+        },
+      ] as Animated.AnimatedTransform,
+    },
+  ];
+  //#endregion
+
+  return (
+    <>
+      <Animated.Text style={plusStyle}>+</Animated.Text>
+      <Animated.Text style={textStyle}>Add</Animated.Text>
+    </>
+  );
+};
+
+export default BasicSticky;
diff --git a/example/src/components/basic-sticky/index.ts b/example/src/components/basic-sticky/index.ts
@@ -0,0 +1 @@
+export { default } from './BasicSticky';
diff --git a/example/src/components/basic-sticky/styles.ts b/example/src/components/basic-sticky/styles.ts
@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  plus: {
+    position: 'absolute',
+    textTransform: 'uppercase',
+    textAlign: 'center',
+    fontSize: 34,
+    fontWeight: '500',
+    color: 'white',
+  },
+  text: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    textTransform: 'uppercase',
+    textAlign: 'center',
+    fontSize: 24,
+    fontWeight: '900',
+    color: 'black',
+  },
+});
diff --git a/example/src/components/facebook-sticky-story-styled/FacebookStickyStoryStyled.tsx b/example/src/components/facebook-sticky-story-styled/FacebookStickyStoryStyled.tsx
@@ -82,7 +82,7 @@ const FacebookStickyStory = ({
           translateY: animatedIconTranslateY,
           scale: animatedIconScale,
         }
-      ),
+      ) as Animated.AnimatedTransform,
     },
   ];
   //#endregion
@@ -107,7 +107,7 @@ const FacebookStickyStory = ({
         {
           translateY: animatedTextTranslateY,
         },
-      ],
+      ] as Animated.AnimatedTransform,
     },
   ];
   //#endregion

diff --git a/example/src/components/facebook-sticky-story/FacebookStickyStory.tsx b/example/src/components/facebook-sticky-story/FacebookStickyStory.tsx
@@ -82,7 +82,7 @@ const FacebookStickyStory = ({
           translateY: animatedIconTranslateY,
           scale: animatedIconScale,
         }
-      ),
+      ) as Animated.AnimatedTransform,
     },
   ];
   //#endregion
@@ -107,7 +107,7 @@ const FacebookStickyStory = ({
         {
           translateY: animatedTextTranslateY,
         },
-      ],
+      ] as Animated.AnimatedTransform,
     },
   ];
   //#endregion

diff --git a/example/src/screens/Basic.tsx b/example/src/screens/Basic.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  SafeAreaView,
+  StatusBar,
+  Text,
+  Alert,
+} from 'react-native';
+import StickyItemFlatList from '@gorhom/sticky-item';
+import DummyItem from '../components/dummy-item';
+import BasicSticky from '../components/basic-sticky';
+import { useRoute } from '@react-navigation/native';
+
+const data = [...Array(20)]
+  .fill(0)
+  .map((_, index) => ({ id: `item-${index}` }));
+
+export const STORY_WIDTH = 200;
+export const STORY_HEIGHT = 100;
+const SEPARATOR_SIZE = 10;
+const BORDER_RADIUS = 0;
+
+const Basic = () => {
+  const { params } = useRoute();
+  // @ts-ignore
+  const { title } = params;
+
+  // styles
+  const containerStyle = {
+    paddingVertical: SEPARATOR_SIZE * 2,
+    backgroundColor: 'white',
+  };
+
+  // methods
+  const handleStickyItemPress = () => Alert.alert('Sticky Item Pressed');
+
+  // render
+  const renderItem = () => (
+    <DummyItem
+      borderRadius={BORDER_RADIUS}
+      width={STORY_WIDTH}
+      height={STORY_HEIGHT}
+      backgroundColor={'#dfdfdf'}
+    />
+  );
+  return (
+    <SafeAreaView style={styles.root}>
+      <StatusBar barStyle="dark-content" />
+      <Text style={styles.text}>{title}</Text>
+      <View style={containerStyle}>
+        <StickyItemFlatList
+          itemWidth={STORY_WIDTH}
+          itemHeight={STORY_HEIGHT}
+          separatorSize={SEPARATOR_SIZE}
+          borderRadius={BORDER_RADIUS}
+          stickyItemWidth={36}
+          stickyItemHeight={36}
+          stickyItemBackgroundColors={['#F8F8FA', '#2d88ff']}
+          stickyItemContent={BasicSticky}
+          onStickyItemPress={handleStickyItemPress}
+          data={data}
+          renderItem={renderItem}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    backgroundColor: '#CACACD',
+  },
+  text: {
+    marginHorizontal: SEPARATOR_SIZE * 2,
+    marginBottom: SEPARATOR_SIZE,
+    fontSize: 43,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+    color: '#2d88ff',
+  },
+});
+
+export default Basic;
diff --git a/example/src/screens/FacebookStories.tsx b/example/src/screens/FacebookStories.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import { StyleSheet, View, SafeAreaView, StatusBar, Text } from 'react-native';
+import {
+  StyleSheet,
+  View,
+  SafeAreaView,
+  StatusBar,
+  Text,
+  Alert,
+} from 'react-native';
 import StickyItemFlatList from '@gorhom/sticky-item';
 import DummyItem from '../components/dummy-item';
 import FacebookStickyStory from '../components/facebook-sticky-story';
@@ -19,6 +26,16 @@ const FacebookStories = () => {
   // @ts-ignore
   const { title } = params;
 
+  // styles
+  const containerStyle = {
+    paddingVertical: SEPARATOR_SIZE * 2,
+    backgroundColor: 'white',
+  };
+
+  // methods
+  const handleStickyItemPress = () => Alert.alert('Sticky Item Pressed');
+
+  // render
   const renderItem = () => (
     <DummyItem
       borderRadius={BORDER_RADIUS}
@@ -27,12 +44,6 @@ const FacebookStories = () => {
       backgroundColor={'#dfdfdf'}
     />
   );
-
-  const containerStyle = {
-    paddingVertical: SEPARATOR_SIZE * 2,
-    backgroundColor: 'white',
-  };
-
   return (
     <SafeAreaView style={styles.root}>
       <StatusBar barStyle="dark-content" />
@@ -47,6 +58,7 @@ const FacebookStories = () => {
           stickyItemHeight={36}
           stickyItemBackgroundColors={['#F8F8FA', '#FFF']}
           stickyItemContent={FacebookStickyStory}
+          onStickyItemPress={handleStickyItemPress}
           data={data}
           renderItem={renderItem}
         />

diff --git a/example/src/screens/FacebookStoriesStyled.tsx b/example/src/screens/FacebookStoriesStyled.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import { StyleSheet, View, SafeAreaView, StatusBar, Text } from 'react-native';
+import {
+  StyleSheet,
+  View,
+  SafeAreaView,
+  StatusBar,
+  Text,
+  Alert,
+} from 'react-native';
 import StickyItemFlatList from '@gorhom/sticky-item';
 import DummyItem from '../components/dummy-item';
 import FacebookStickyStoryStyled from '../components/facebook-sticky-story-styled';
@@ -19,6 +26,16 @@ const FacebookStoriesStyled = () => {
   // @ts-ignore
   const { title } = params;
 
+  // styles
+  const containerStyle = {
+    paddingVertical: SEPARATOR_SIZE * 2,
+    backgroundColor: '#111',
+  };
+
+  // methods
+  const handleStickyItemPress = () => Alert.alert('Sticky Item Pressed');
+
+  // render
   const renderItem = () => (
     <DummyItem
       width={STORY_WIDTH}
@@ -27,12 +44,6 @@ const FacebookStoriesStyled = () => {
       backgroundColor={'#333'}
     />
   );
-
-  const containerStyle = {
-    paddingVertical: SEPARATOR_SIZE * 2,
-    backgroundColor: '#111',
-  };
-
   return (
     <SafeAreaView style={styles.root}>
       <StatusBar barStyle="light-content" />
@@ -47,6 +58,7 @@ const FacebookStoriesStyled = () => {
           stickyItemHeight={36}
           stickyItemBackgroundColors={['#222', '#000']}
           stickyItemContent={FacebookStickyStoryStyled}
+          onStickyItemPress={handleStickyItemPress}
           data={data}
           renderItem={renderItem}
         />

diff --git a/example/src/screens/Root.tsx b/example/src/screens/Root.tsx
@@ -4,6 +4,15 @@ import Showcase from '@gorhom/showcase-template';
 import { version, description } from '../../../package.json';
 
 const examples = [
+  {
+    title: '',
+    data: [
+      {
+        name: 'Basic',
+        slug: 'Basic',
+      },
+    ],
+  },
   {
     title: 'Facebook',
     data: [

diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
   "homepage": "https://github.com/gorhom/react-native-sticky-item#readme",
   "scripts": {
     "typescript": "tsc --noEmit",
-    "lint": "eslint --ext .js,.ts,.tsx .",
+    "lint": "eslint --quiet --fix --ext .js,.ts,.tsx .",
     "build": "bob build",
     "release": "release-it",
     "example": "yarn --cwd example",