[test] Enable paging on both card and list tests, in example app

Author: IjzerenHein

example/src/App.tsx

@@ -31,8 +31,6 @@ import NestedStack from "./tests/NestedStack";
 import NestedStackV4 from "./tests/NestedStack.v4";
 import NestedStack2 from "./tests/NestedStack2";
 import NestedStack2V4 from "./tests/NestedStack2.v4";
-import PagerView from "./tests/PagerView";
-import PagerViewV4 from "./tests/PagerView.v4";
 import RevealFromBottomAndroid from "./tests/RevealFromBottomAndroid";
 import RevealFromBottomAndroidV4 from "./tests/RevealFromBottomAndroid.v4";
 import ScaleFromCenterAndroid from "./tests/ScaleFromCenterAndroid";
@@ -58,7 +56,6 @@ export default () => (
       />
       <Test title="CardView" ComponentV4={CardViewV4} Component={CardView} />
       <Test title="ListView" ComponentV4={ListViewV4} Component={ListView} />
-      <Test title="PagerView" ComponentV4={PagerViewV4} Component={PagerView} />
       <Test
         title="SlideFromRightIOS"
         ComponentV4={SlideFromRightIOSV4}

example/src/screens/DetailComponent.tsx

@@ -0,0 +1,135 @@
+import { LinearGradient } from "expo-linear-gradient";
+import * as React from "react";
+import { View, StyleSheet, Text, Image, TouchableOpacity } from "react-native";
+import { SharedElement } from "react-navigation-shared-element";
+import { NavigationStackProp } from "react-navigation-stack";
+
+import { Icon } from "../components";
+import { Item } from "../data";
+
+type Props = {
+  navigation: NavigationStackProp<any>;
+  item: Item;
+  modal: "none" | "full" | "sheet";
+};
+
+export const DetailComponent = (props: Props) => {
+  const { item, navigation, modal = "none" } = props;
+  return (
+    <View style={styles.container}>
+      <SharedElement id={`${item.id}.image`} style={StyleSheet.absoluteFill}>
+        <Image style={styles.image} resizeMode="cover" source={item.image} />
+      </SharedElement>
+
+      <SharedElement id={`${item.id}.logo`} style={styles.logoContainer}>
+        <Image
+          style={styles.logo}
+          resizeMode="contain"
+          source={require("../../assets/logo.png")}
+        />
+      </SharedElement>
+
+      <View style={styles.content}>
+        <SharedElement
+          id={`${item.id}.gradient`}
+          style={StyleSheet.absoluteFill}
+        >
+          <LinearGradient
+            colors={["transparent", "rgba(0,0,0,0.9)"]}
+            style={StyleSheet.absoluteFill}
+          />
+        </SharedElement>
+        <SharedElement id={`${item.id}.title`}>
+          <Text style={styles.title}>{item.title}</Text>
+        </SharedElement>
+
+        <SharedElement id={`${item.id}.description`}>
+          <Text style={styles.description}>{item.description}</Text>
+        </SharedElement>
+      </View>
+
+      {modal !== "none" ? (
+        <View
+          style={[
+            styles.header,
+            modal === "sheet" ? styles.sheetHeader : undefined,
+          ]}
+        >
+          <TouchableOpacity
+            activeOpacity={0.5}
+            onPress={() => navigation.goBack()}
+          >
+            <SharedElement id="close">
+              <Icon style={styles.icon} name="ios-close" />
+            </SharedElement>
+          </TouchableOpacity>
+        </View>
+      ) : undefined}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+  },
+  header: {
+    position: "absolute",
+    right: 16,
+    top: 32,
+  },
+  sheetHeader: {
+    right: 16,
+    top: 16,
+  },
+  icon: {
+    fontSize: 40,
+    color: "white",
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+  },
+  logoContainer: {
+    position: "absolute",
+    left: 4,
+    top: 12,
+    height: 60,
+    width: 160,
+  },
+  logo: {
+    width: "100%",
+    height: "100%",
+  },
+  content: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    padding: 20,
+  },
+  title: {
+    marginTop: 20,
+    color: "white",
+    fontSize: 60,
+    fontWeight: "bold",
+    textShadowColor: "black",
+    textShadowRadius: 8,
+    textShadowOffset: {
+      width: 0,
+      height: 1,
+    },
+  },
+  description: {
+    color: "white",
+    fontSize: 17,
+    fontWeight: "bold",
+    textShadowColor: "black",
+    textShadowRadius: 4,
+    textShadowOffset: {
+      width: 0,
+      height: 1,
+    },
+  },
+});

example/src/screens/DetailPagerScreen.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import PagerView, {
+  PagerViewOnPageSelectedEvent,
+} from "react-native-pager-view";
+import { SharedElementsComponentConfig } from "react-navigation-shared-element";
+import { NavigationStackProp } from "react-navigation-stack";
+
+import { Item, items } from "../data";
+import { DetailComponent } from "./DetailComponent";
+import { getDetailSharedElements } from "./getDetailSharedElements";
+
+type Props = {
+  navigation: NavigationStackProp<any>;
+  route: any;
+};
+
+export class DetailPagerScreen extends React.Component<Props> {
+  static sharedElements: SharedElementsComponentConfig =
+    getDetailSharedElements;
+
+  render() {
+    const { navigation, route } = this.props;
+    const params = route?.params || navigation?.state?.params;
+    const initialItem: Item = params?.item;
+    const initialIndex = items.indexOf(initialItem);
+    return (
+      <PagerView
+        style={styles.container}
+        initialPage={initialIndex}
+        onPageSelected={this.onPageSelected}
+      >
+        {items.map((item) => this.renderItem(item))}
+      </PagerView>
+    );
+  }
+
+  private renderItem(item: Item) {
+    return (
+      <View key={item.id} style={styles.container}>
+        <DetailComponent
+          item={item}
+          navigation={this.props.navigation}
+          modal="none"
+        />
+      </View>
+    );
+  }
+
+  private onPageSelected = (e: PagerViewOnPageSelectedEvent) => {
+    const { position } = e.nativeEvent;
+    const { navigation } = this.props;
+    navigation.setParams({
+      item: items[position],
+    });
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});