Skip to content

Commit

Permalink
fix: added custom examples to app
Browse files Browse the repository at this point in the history 
 - reverted header prop to tabbed header
 - added some checks for optional fields
  • Loading branch information
@pi0trpietruszewski
pi0trpietruszewski committed Sep 17, 2021
1 parent 997e2ac commit 4a2b065
Show file tree
Hide file tree
Showing 6 changed files with 176 additions and 142 deletions.
4 changes: 4 additions & 0 deletions example/src/navigation/AppNavigator.js
View file
Expand Up @@ -2,6 +2,8 @@ import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { HomeScreen, CardScreen } from '../screens';
import YodaScreen from '../screens/additionalExamples/YodaScreen';
import AppStoreHeader from '../screens/additionalExamples/SimsScreen';

const Stack = createStackNavigator();

Expand All @@ -10,6 +12,8 @@ const AppNavigator = () => (
<Stack.Navigator headerMode="none">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Card" component={CardScreen} />
<Stack.Screen name="AppStore" component={AppStoreHeader} />
<Stack.Screen name="Yoda" component={YodaScreen} />
</Stack.Navigator>
</NavigationContainer>
);
Expand Down
16 changes: 15 additions & 1 deletion example/src/screens/HomeScreen/HomeScreen.tsx
View file
Expand Up @@ -7,6 +7,7 @@ import {
Platform,
RefreshControl,
LayoutChangeEvent,
Button,
} from 'react-native';
import StickyParallaxHeader from 'react-native-sticky-parallax-header';
import { QuizListElement, UserModal } from '../../components';
Expand Down Expand Up @@ -105,13 +106,26 @@ const HomeScreen: VFC = () => {
};

const renderContent = (title: string) => {
const marginBottom = Platform.select({ ios: calcMargin(title), android: 0 });
const marginBottom = Platform.select({ ios: calcMargin(title) + 20, android: 10 });

return (
<View onLayout={onLayoutContent(title)} style={[styles.content, { marginBottom }]}>
{renderModal()}
<Text style={styles.contentText}>{title}</Text>
{renderQuizElements(title)}
<Text style={styles.contentText}>Check custom examples</Text>
<Button
title={'Yoda Screen'}
onPress={() => {
navigation.navigate('Yoda');
}}
/>
<Button
title={'Sims Screen'}
onPress={() => {
navigation.navigate('AppStore');
}}
/>
</View>
);
};
Expand Down
276 changes: 143 additions & 133 deletions example/src/screens/additionalExamples/SimsScreen.js
View file
@@ -1,10 +1,151 @@
import React from 'react';
import React, { useRef } from 'react';
import { StyleSheet, View, Text, Image, Animated, TouchableOpacity } from 'react-native';
import StickyParallaxHeader from 'react-native-sticky-parallax-header';
import { BlurView } from 'expo-blur';
import { useNavigation } from '@react-navigation/native';

const { event, ValueXY } = Animated;
const scrollY = new ValueXY();

const AppStoreHeader = () => {
const scrollY = useRef(new ValueXY()).current;

const navigation = useNavigation();

const goBack = () => navigation.goBack();

const renderForeground = () => (
<View>
<Image
source={{
uri: 'https://i.ytimg.com/vi/gGca2DVEegc/maxresdefault.jpg',
}}
style={styles.foregroundImage}
/>
<View style={styles.foregroundContainer}>
<Image
source={{
uri: 'https://is2-ssl.mzstatic.com/image/thumb/Purple123/v4/0c/9e/88/0c9e8824-1373-995f-3be0-30814b1e4d15/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-85-220.png/460x0w.png',
}}
style={styles.foregroundLogo}
/>
<View style={styles.foregroundDetails}>
<Text style={styles.foregroundDetailsHeader}>The Sims™ Mobile</Text>
<Text style={styles.foregroundDetailsDesc}>Play with life.</Text>
<View style={styles.foregroundActionsContainer}>
<TouchableOpacity style={styles.foregroundActionsButton}>
<Text style={styles.headerDetailsButtonTitle}>GET</Text>
</TouchableOpacity>
<Text style={styles.foregroundActionsButtonTitle}>{'In-App\nPurchases'}</Text>
<Image
source={require('../../assets/icons/share.png')}
style={styles.foregroundActionsShare}
resizeMode="contain"
/>
</View>
</View>
</View>
</View>
);

const renderHeader = () => {
const opacity = scrollY.y.interpolate({
inputRange: [0, 110, 150],
outputRange: [0, 0, 1],
extrapolate: 'clamp',
});

const left = scrollY.y.interpolate({
inputRange: [0, 110, 160],
outputRange: [24, 24, -40],
extrapolate: 'clamp',
});

const arrowOpacity = scrollY.y.interpolate({
inputRange: [0, 110, 140],
outputRange: [1, 1, 0],
extrapolate: 'clamp',
});

const detailsOpacity = scrollY.y.interpolate({
inputRange: [0, 250, 350],
outputRange: [0, 0, 1],
extrapolate: 'clamp',
});

return (
<>
<TouchableOpacity
onPress={goBack}
style={[styles.headerButtonContainer, { transform: [{ translateX: left }] }]}>
<Animated.View onPress={goBack} style={[styles.headerButton, { opacity: arrowOpacity }]}>
<Image
style={styles.headerImage}
resizeMode="contain"
source={{
uri: 'https://cdn.iconscout.com/icon/free/png-256/chevron-25-433513.png',
}}
/>
</Animated.View>
</TouchableOpacity>
<Animated.View style={[styles.headerContainer, { opacity }]}>
<BlurView
style={styles.headerBlurView}
tint="dark"
intensity={90}
reducedTransparencyFallbackColor="white"
/>
</Animated.View>
<View style={styles.headerWrapper}>
<Animated.View style={{ opacity }}>
<TouchableOpacity style={styles.headerSearchContainer} onPress={goBack}>
<Image
style={styles.headerSearchArrow}
resizeMode="contain"
source={{
uri: 'https://www.shareicon.net/data/512x512/2016/05/19/767484_arrows_512x512.png',
}}
/>

<Text style={styles.headerSearchText}>Search</Text>
</TouchableOpacity>
</Animated.View>
<Animated.View style={{ opacity: detailsOpacity }}>
<Image
source={{
uri: 'https://is2-ssl.mzstatic.com/image/thumb/Purple123/v4/0c/9e/88/0c9e8824-1373-995f-3be0-30814b1e4d15/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-85-220.png/460x0w.png',
}}
style={styles.headerDetailsImage}
/>
</Animated.View>
<Animated.View style={[styles.headerDetailsContainer, { opacity: detailsOpacity }]}>
<Text style={styles.headerDetailsText}>{'In-App\nPurchases'}</Text>
<TouchableOpacity style={styles.headerDetailsButton}>
<Text style={styles.headerDetailsButtonTitle}>GET</Text>
</TouchableOpacity>
</Animated.View>
</View>
</>
);
};

return (
<StickyParallaxHeader
hasBorderRadius={false}
backgroundColor="black"
scrollEvent={event([{ nativeEvent: { contentOffset: { y: scrollY.y } } }], {
useNativeDriver: false,
})}
parallaxHeight={430}
transparentHeader
foreground={renderForeground()}
header={renderHeader()}
snapStartThreshold={50}
snapStopThreshold={250}
snapValue={180}>
<View />
</StickyParallaxHeader>
);
};

const styles = StyleSheet.create({
headerContainer: {
Expand Down Expand Up @@ -141,135 +282,4 @@ const styles = StyleSheet.create({
},
});

const renderForeground = () => (
<View>
<Image
source={{
uri: 'https://i.ytimg.com/vi/gGca2DVEegc/maxresdefault.jpg',
}}
style={styles.foregroundImage}
/>
<View style={styles.foregroundContainer}>
<Image
source={{
uri:
'https://is2-ssl.mzstatic.com/image/thumb/Purple123/v4/0c/9e/88/0c9e8824-1373-995f-3be0-30814b1e4d15/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-85-220.png/460x0w.png',
}}
style={styles.foregroundLogo}
/>
<View style={styles.foregroundDetails}>
<Text style={styles.foregroundDetailsHeader}>The Sims™ Mobile</Text>
<Text style={styles.foregroundDetailsDesc}>Play with life.</Text>
<View style={styles.foregroundActionsContainer}>
<TouchableOpacity style={styles.foregroundActionsButton}>
<Text style={styles.headerDetailsButtonTitle}>GET</Text>
</TouchableOpacity>
<Text style={styles.foregroundActionsButtonTitle}>{'In-App\nPurchases'}</Text>
<Image
source={require('../../assets/icons/share.png')}
style={styles.foregroundActionsShare}
resizeMode="contain"
/>
</View>
</View>
</View>
</View>
);

const renderHeader = () => {
const opacity = scrollY.y.interpolate({
inputRange: [0, 110, 150],
outputRange: [0, 0, 1],
extrapolate: 'clamp',
});

const left = scrollY.y.interpolate({
inputRange: [0, 110, 160],
outputRange: [24, 24, -40],
extrapolate: 'clamp',
});

const arrowOpacity = scrollY.y.interpolate({
inputRange: [0, 110, 140],
outputRange: [1, 1, 0],
extrapolate: 'clamp',
});

const detailsOpacity = scrollY.y.interpolate({
inputRange: [0, 250, 350],
outputRange: [0, 0, 1],
extrapolate: 'clamp',
});

return (
<>
<TouchableOpacity style={[styles.headerButtonContainer, { left }]}>
<Animated.View style={[styles.headerButton, { opacity: arrowOpacity }]}>
<Image
style={styles.headerImage}
resizeMode="contain"
source={{
uri: 'https://cdn.iconscout.com/icon/free/png-256/chevron-25-433513.png',
}}
/>
</Animated.View>
</TouchableOpacity>
<Animated.View style={[styles.headerContainer, { opacity }]}>
<BlurView
style={styles.headerBlurView}
tint="dark"
intensity={90}
reducedTransparencyFallbackColor="white"
/>
</Animated.View>
<View style={styles.headerWrapper}>
<Animated.View style={[styles.headerSearchContainer, { opacity }]}>
<Image
style={styles.headerSearchArrow}
resizeMode="contain"
source={{
uri: 'https://www.shareicon.net/data/512x512/2016/05/19/767484_arrows_512x512.png',
}}
/>
<Text style={styles.headerSearchText}>Search</Text>
</Animated.View>
<Animated.View style={{ opacity: detailsOpacity }}>
<Image
source={{
uri:
'https://is2-ssl.mzstatic.com/image/thumb/Purple123/v4/0c/9e/88/0c9e8824-1373-995f-3be0-30814b1e4d15/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-85-220.png/460x0w.png',
}}
style={styles.headerDetailsImage}
/>
</Animated.View>
<Animated.View style={[styles.headerDetailsContainer, { opacity: detailsOpacity }]}>
<Text style={styles.headerDetailsText}>{'In-App\nPurchases'}</Text>
<TouchableOpacity style={styles.headerDetailsButton}>
<Text style={styles.headerDetailsButtonTitle}>GET</Text>
</TouchableOpacity>
</Animated.View>
</View>
</>
);
};

const AppStoreHeader = () => (
<StickyParallaxHeader
headerType="AvatarHeader"
hasBorderRadius={false}
backgroundColor="black"
scrollEvent={event([{ nativeEvent: { contentOffset: { y: scrollY.y } } }], {
useNativeDriver: false,
})}
parallaxHeight={430}
transparentHeader
foreground={renderForeground}
header={renderHeader}
snapStartThreshold={50}
snapStopThreshold={250}
snapValue={180}>
<View />
</StickyParallaxHeader>
);

export default AppStoreHeader;
9 changes: 6 additions & 3 deletions example/src/screens/additionalExamples/YodaScreen.js
View file
Expand Up @@ -9,6 +9,7 @@ import {
StyleSheet,
} from 'react-native';
import StickyParallaxHeader from 'react-native-sticky-parallax-header';
import { useNavigation } from '@react-navigation/native';

const windowHeight = Dimensions.get('window').height;
const { event, ValueXY } = Animated;
Expand All @@ -31,6 +32,7 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: 'black',
flex: 1,
},
headerWrapper: {
flexDirection: 'row',
Expand Down Expand Up @@ -92,6 +94,8 @@ const styles = StyleSheet.create({
});

const CutomHeaderScreen = () => {
const naviagation = useNavigation();
const back = () => naviagation.goBack();
const renderContent = (x) => (
<View style={styles.contentContiner}>
<Text style={styles.contentText}>{x}</Text>
Expand All @@ -108,13 +112,12 @@ const CutomHeaderScreen = () => {
return (
<View style={styles.headerCotainer}>
<View style={styles.headerWrapper}>
<TouchableOpacity onPress={() => console.warn('CLICKED')}>
<TouchableOpacity onPress={back}>
<Image
style={styles.headerImage}
resizeMode="contain"
source={{
uri:
'https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/VisualEditor_-_Icon_-_Close_-_white.svg/1200px-VisualEditor_-_Icon_-_Close_-_white.svg.png',
uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/VisualEditor_-_Icon_-_Close_-_white.svg/1200px-VisualEditor_-_Icon_-_Close_-_white.svg.png',
}}
/>
</TouchableOpacity>
Expand Down

0 comments on commit 4a2b065

Please sign in to comment.