Visibility enter exit

example/src/App.tsx

@@ -1,32 +1,38 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { random } from 'lodash';
 import shuffle from 'lodash/shuffle';
-import { StyleSheet, Text, View } from 'react-native';
+import { ImageSourcePropType, StyleSheet, Text, View } from 'react-native';
 import { LazyScrollView } from 'react-native-lazy-scrollview';
 import { ColorBlock } from './components/ColorBlock';
 
-const ALBUMS = [
-  'https://audioxide.com/api/images/album-artwork/in-utero-nirvana-medium-square.jpg',
-  'https://audioxide.com/api/images/album-artwork/pinkerton-weezer-medium-square.jpg',
-  'https://static1.squarespace.com/static/55b7b1bde4b0828f7d1438de/t/6091766fa1c5b50917511c4b/1620145812302/WAVVES+-+Hideaway+-+Album+Cover+3000x3000.jpg?format=1500w',
-  'https://i.scdn.co/image/ab67616d0000b27313f2466b83507515291acce4',
-  'https://m.media-amazon.com/images/I/515NY3NS1EL._UF1000,1000_QL80_.jpg',
-  'https://images.squarespace-cdn.com/content/v1/5e270e203c421657bd3e3208/1584536470858-1OSWN7WUQ3DY749LGHOU/R-1843384-1282324049.jpeg.jpg',
+const ALBUMS: ImageSourcePropType = [
+  require('../assets/albums/american-psycho.jpg'),
+  require('../assets/albums/doggstyle.jpg'),
+  require('../assets/albums/dude-ranch.jpg'),
+  require('../assets/albums/in_utero.jpg'),
+  require('../assets/albums/is-this-it.jpg'),
+  require('../assets/albums/let-it-be.jpg'),
+  require('../assets/albums/rip-this.jpeg'),
+  require('../assets/albums/spilt-milk.jpg'),
+  require('../assets/albums/suffer.jpg'),
+  require('../assets/albums/t-hives.jpg'),
+  require('../assets/albums/trendkill.jpg'),
+  require('../assets/albums/wysiatwin.jpg'),
+  require('../assets/albums/youre-welcome.jpeg'),
   null,
-  'https://m.media-amazon.com/images/I/61vMlYT58HL._UF1000,1000_QL80_.jpg',
-  'https://e.snmc.io/i/1200/s/9a0f51b8b776171aaee65c1a352f6d11/2396429',
-  'https://global-uploads.webflow.com/5fda4244c42e015b06d2fd8d/5fdbca8f15a8ee0f0f369767_cover.jpg',
-  'https://i.discogs.com/GXyIsX5gBpgw3XMtEZ-FvyVJBDZyk7Aoq-bPzV_yIXk/rs:fit/g:sm/q:90/h:600/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTIyNDY1/MTUtMTI5OTE5MjI1/NS5qcGVn.jpeg',
   null,
 ];
 
 const OFFSET = -100;
 const SHUFFLED_ALBUMS = shuffle(ALBUMS);
 
 export default function App() {
-  const renderBlock = (uri: string | null, i: number) => (
-    <ColorBlock key={`child_${i}`} uri={uri} nested={random(1) === 1} />
+  const renderBlock = useCallback(
+    (source: ImageSourcePropType | null, i: number) => (
+      <ColorBlock key={`child_${i}`} source={source} nested={random(1) === 1} />
+    ),
+    []
   );
 
   return (
@@ -66,13 +72,13 @@ const styles = StyleSheet.create({
     opacity: 0.7,
     height: 50,
     justifyContent: 'flex-end',
-    alignItems: 'center',
   },
   offsetText: {
     color: 'white',
     fontSize: 18,
     fontWeight: '600',
     backgroundColor: '#000',
     padding: 8,
+    alignSelf: 'flex-start',
   },
 });

example/src/components/ColorBlock.tsx

@@ -1,6 +1,13 @@
 import sample from 'lodash/sample';
 import React, { useMemo, useState } from 'react';
-import { ActivityIndicator, Image, StyleSheet, Text, View } from 'react-native';
+import {
+  ActivityIndicator,
+  Image,
+  ImageSourcePropType,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
 import { LazyChild } from 'react-native-lazy-scrollview';
 
 const NO_LAZY_CHILD_BACKGROUNDS = [
@@ -11,33 +18,38 @@ const NO_LAZY_CHILD_BACKGROUNDS = [
   '#1e90ff',
 ];
 
-const PERCENT = 0.75;
+const PERCENT = 0.9;
 const PERCENT_STRING = `${PERCENT * 100}%`;
-const PERCENT_TEXT = `${PERCENT_STRING} threshold passed`;
+const PERCENT_TEXT = `${PERCENT_STRING} not visible`;
 
 export function ColorBlock({
-  uri,
+  source,
   nested,
 }: {
-  uri: string | null;
+  source: ImageSourcePropType | null;
   nested?: boolean;
 }) {
   const [triggered, setTriggered] = useState(false);
-  const [percentTriggered, setPercentTriggered] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
 
   const onThresholdPass = () => {
     // Make api call
     setTriggered(true);
   };
 
-  const onPercentVisibleThresholdPass = () => {
-    // Make analytic call
-    setPercentTriggered(true);
+  const onVisibilityEnter = () => {
+    console.log('ENTER', source?.toString());
+    setIsVisible(true);
+  };
+
+  const onVisibilityExit = () => {
+    console.log('EXIT', source?.toString());
+    setIsVisible(false);
   };
 
   const backgroundColor = useMemo(() => sample(NO_LAZY_CHILD_BACKGROUNDS), []);
 
-  if (!uri) {
+  if (!source) {
     return (
       <View style={[styles.container, { backgroundColor }]}>
         <Text style={styles.text}>
@@ -55,19 +67,21 @@ export function ColorBlock({
         </Text>
         <LazyChild
           onThresholdPass={onThresholdPass}
-          onPercentVisibleThresholdPass={onPercentVisibleThresholdPass}
+          onVisibilityEnter={onVisibilityEnter}
+          onVisibilityExit={onVisibilityExit}
           percentVisibleThreshold={PERCENT}
         >
           <View style={styles.container}>
             {triggered ? (
-              <Image source={{ uri }} style={styles.image} />
+              <Image source={source} style={styles.image} />
             ) : (
               <ActivityIndicator />
             )}
-            {percentTriggered && (
-              <Text style={styles.percentText}>{PERCENT_TEXT}</Text>
+            {!isVisible && (
+              <View style={styles.percentTextWrapper}>
+                <Text style={styles.percentText}>{PERCENT_TEXT}</Text>
+              </View>
             )}
-            <View style={styles.percentLine} />
           </View>
         </LazyChild>
       </View>
@@ -77,19 +91,21 @@ export function ColorBlock({
   return (
     <LazyChild
       onThresholdPass={onThresholdPass}
-      onPercentVisibleThresholdPass={onPercentVisibleThresholdPass}
+      onVisibilityEnter={onVisibilityEnter}
+      onVisibilityExit={onVisibilityExit}
       percentVisibleThreshold={PERCENT}
     >
       <View style={styles.container}>
         {triggered ? (
-          <Image source={{ uri }} style={styles.image} />
+          <Image source={source} style={styles.image} />
         ) : (
           <ActivityIndicator />
         )}
-        {percentTriggered && (
-          <Text style={styles.percentText}>{PERCENT_TEXT}</Text>
+        {!isVisible && (
+          <View style={styles.percentTextWrapper}>
+            <Text style={styles.percentText}>{PERCENT_TEXT}</Text>
+          </View>
         )}
-        <View style={styles.percentLine} />
       </View>
     </LazyChild>
   );
@@ -125,22 +141,20 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     margin: 16,
   },
-  percentText: {
+  percentTextWrapper: {
     position: 'absolute',
     top: 0,
     right: 0,
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+    bottom: 0,
+    left: 0,
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  percentText: {
     color: 'red',
     fontSize: 16,
     padding: 8,
-    width: '100%',
-  },
-  percentLine: {
-    position: 'absolute',
-    top: PERCENT_STRING,
-    left: 0,
-    right: 0,
-    height: 2,
-    backgroundColor: 'red',
+    textAlign: 'center',
   },
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-lazy-scrollview",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Lazy ScrollView for React Native.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",