Skip to content

Commit be50b99

Browse files
thijs-qvthijs-qv
authored
[test] Add imageBackground test to example app (#195)
1 parent aed5af8 commit be50b99

File tree

6 files changed

+252
-0
lines changed

6 files changed

+252
-0
lines changed

‎example/src/App.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import FadeFromBottomAndroid from "./tests/FadeFromBottomAndroid";
1717
import FadeFromBottomAndroidV4 from "./tests/FadeFromBottomAndroid.v4";
1818
import ForwardOnly from "./tests/ForwardOnly";
1919
import ForwardOnlyV4 from "./tests/ForwardOnly.v4";
20+
import ImageBackground from "./tests/ImageBackground";
21+
import ImageBackgroundV4 from "./tests/ImageBackground.v4";
2022
import ListView from "./tests/ListView";
2123
import ListViewV4 from "./tests/ListView.v4";
2224
import MaterialTopTabs from "./tests/MaterialTopTabs";
@@ -140,6 +142,12 @@ export default () => (
140142
issue
141143
/>
142144
<Test title="WrongIds" ComponentV4={WrongIdsV4} Component={WrongIds} />
145+
<Test
146+
title="ImageBackground"
147+
ComponentV4={ImageBackgroundV4}
148+
Component={ImageBackground}
149+
issue
150+
/>
143151
<Test title="TextInput" ComponentV4={TextInputStackV4} />
144152
</Tests>
145153
</SafeAreaProvider>

‎example/src/screens/DetailComponentImageBackground.tsx‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import { LinearGradient } from "expo-linear-gradient";
2+
import * as React from "react";
3+
import { View, StyleSheet, Text, ImageBackground, TouchableOpacity } from "react-native";
4+
import { SharedElement } from "react-navigation-shared-element";
5+
import { NavigationStackProp } from "react-navigation-stack";
6+
7+
import { Icon } from "../components";
8+
import { Item } from "../data";
9+
10+
type Props = {
11+
navigation: NavigationStackProp<any>;
12+
item: Item;
13+
modal: "none" | "full" | "sheet";
14+
};
15+
16+
export const DetailComponentImageBackground = (props: Props) => {
17+
const { item, navigation, modal = "none" } = props;
18+
return (
19+
<View style={styles.container}>
20+
<SharedElement id={`${item.id}.image`} style={StyleSheet.absoluteFill}>
21+
<ImageBackground style={styles.image} resizeMode="cover" source={item.image}>
22+
<Text style={styles.imageBackgroundTextContent}>Content inside ImageBackground</Text>
23+
</ImageBackground>
24+
</SharedElement>
25+
26+
<SharedElement id={`${item.id}.logo`} style={styles.logoContainer}>
27+
<ImageBackground
28+
style={styles.logo}
29+
resizeMode="contain"
30+
source={require("../../assets/logo.png")}
31+
/>
32+
</SharedElement>
33+
34+
<View style={styles.content}>
35+
<SharedElement
36+
id={`${item.id}.gradient`}
37+
style={StyleSheet.absoluteFill}
38+
>
39+
<LinearGradient
40+
colors={["transparent", "rgba(0,0,0,0.9)"]}
41+
style={StyleSheet.absoluteFill}
42+
/>
43+
</SharedElement>
44+
<SharedElement id={`${item.id}.title`}>
45+
<Text style={styles.title}>{item.title}</Text>
46+
</SharedElement>
47+
48+
<SharedElement id={`${item.id}.description`}>
49+
<Text style={styles.description}>{item.description}</Text>
50+
</SharedElement>
51+
</View>
52+
53+
{modal !== "none" ? (
54+
<View
55+
style={[
56+
styles.header,
57+
modal === "sheet" ? styles.sheetHeader : undefined,
58+
]}
59+
>
60+
<TouchableOpacity
61+
activeOpacity={0.5}
62+
onPress={() => navigation.goBack()}
63+
>
64+
<SharedElement id="close">
65+
<Icon style={styles.icon} name="ios-close" />
66+
</SharedElement>
67+
</TouchableOpacity>
68+
</View>
69+
) : undefined}
70+
</View>
71+
);
72+
};
73+
74+
const styles = StyleSheet.create({
75+
container: {
76+
flex: 1,
77+
alignItems: "center",
78+
},
79+
header: {
80+
position: "absolute",
81+
right: 16,
82+
top: 32,
83+
},
84+
sheetHeader: {
85+
right: 16,
86+
top: 16,
87+
},
88+
icon: {
89+
fontSize: 40,
90+
color: "white",
91+
},
92+
image: {
93+
width: "100%",
94+
height: "100%",
95+
},
96+
logoContainer: {
97+
position: "absolute",
98+
left: 4,
99+
top: 12,
100+
height: 60,
101+
width: 160,
102+
},
103+
logo: {
104+
width: "100%",
105+
height: "100%",
106+
},
107+
content: {
108+
position: "absolute",
109+
left: 0,
110+
right: 0,
111+
bottom: 0,
112+
padding: 20,
113+
},
114+
title: {
115+
marginTop: 20,
116+
color: "white",
117+
fontSize: 60,
118+
fontWeight: "bold",
119+
textShadowColor: "black",
120+
textShadowRadius: 8,
121+
textShadowOffset: {
122+
width: 0,
123+
height: 1,
124+
},
125+
},
126+
description: {
127+
color: "white",
128+
fontSize: 17,
129+
fontWeight: "bold",
130+
textShadowColor: "black",
131+
textShadowRadius: 4,
132+
textShadowOffset: {
133+
width: 0,
134+
height: 1,
135+
},
136+
},
137+
imageBackgroundTextContent: {
138+
color: "white",
139+
fontSize: 17,
140+
fontWeight: "bold",
141+
textShadowColor: "black",
142+
textShadowRadius: 4,
143+
textShadowOffset: {
144+
width: 0,
145+
height: 1,
146+
},
147+
alignSelf: 'center',
148+
marginTop: 'auto',
149+
marginBottom: 'auto'
150+
}
151+
});

‎example/src/screens/DetailScreenImageBackground.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import * as React from "react";
2+
import { StyleSheet } from "react-native";
3+
import { NavigationStackProp } from "react-navigation-stack";
4+
5+
import { TouchableScale } from "../components";
6+
import { Item, defaultItem } from "../data";
7+
import { DetailComponentImageBackground } from "./DetailComponentImageBackground";
8+
import { getDetailSharedElements } from "./getDetailSharedElements";
9+
10+
type Props = {
11+
navigation: NavigationStackProp<any>;
12+
route: any; // v5
13+
modal: "none" | "full" | "sheet";
14+
onPress?: ({
15+
navigation,
16+
item,
17+
}: {
18+
navigation: NavigationStackProp<any>;
19+
item: Item;
20+
}) => void;
21+
};
22+
23+
export const DetailScreenImageBackground = (props: Props) => {
24+
const { navigation, route, modal, onPress } = props;
25+
const params = route?.params || navigation?.state?.params;
26+
const item: Item = params?.item || defaultItem;
27+
const content = (
28+
<DetailComponentImageBackground item={item} navigation={navigation} modal={modal} />
29+
);
30+
return onPress ? (
31+
<TouchableScale
32+
onPress={() => onPress({ navigation, item })}
33+
style={StyleSheet.absoluteFill}
34+
>
35+
{content}
36+
</TouchableScale>
37+
) : (
38+
content
39+
);
40+
};
41+
42+
DetailScreenImageBackground.navigationOptions = {
43+
title: "Boys will be boys",
44+
};
45+
46+
// Add the `sharedElements` function to the component, which
47+
// should return a list of shared-elements to transition.
48+
// The `sharedElements` function is called whenever you navigate
49+
// to or from this screen. You can use the provided navigation
50+
// states or trigger or disable animations.
51+
DetailScreenImageBackground.sharedElements = getDetailSharedElements;

‎example/src/screens/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export * from "./MainScreen";
22
export * from "./DetailScreen";
3+
export * from "./DetailScreenImageBackground";
34
export * from "./DetailPagerScreen";
45
export * from "./ListScreen";
56
export * from "./createScreen";

‎example/src/tests/ImageBackground.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { NavigationContainer } from "@react-navigation/native";
2+
import * as React from "react";
3+
import { createSharedElementStackNavigator } from "react-navigation-shared-element";
4+
5+
import { MainScreen, DetailScreenImageBackground } from "../screens";
6+
7+
const name = "DefaultStack";
8+
9+
const Stack = createSharedElementStackNavigator({
10+
name,
11+
debug: true,
12+
});
13+
14+
export default () => (
15+
<NavigationContainer>
16+
<Stack.Navigator>
17+
<Stack.Screen name={name} component={MainScreen} />
18+
<Stack.Screen name="Detail" component={DetailScreenImageBackground} />
19+
</Stack.Navigator>
20+
</NavigationContainer>
21+
);

‎example/src/tests/ImageBackground.v4.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { createAppContainer } from "react-navigation";
2+
import { createSharedElementStackNavigator } from "react-navigation-shared-element/build/v4";
3+
4+
import { createScreen, MainScreen, DetailScreenImageBackground } from "../screens";
5+
6+
const name = "SimpleStack";
7+
8+
const StackNavigator = createSharedElementStackNavigator(
9+
{
10+
Main: createScreen(MainScreen, name),
11+
Detail: DetailScreenImageBackground,
12+
},
13+
undefined,
14+
{
15+
name,
16+
debug: true,
17+
}
18+
);
19+
20+
export default createAppContainer(StackNavigator);

0 commit comments

Comments
 (0)