# Collapsing AppBar
### `Light`
### `Dark`
```js
import React from 'react';
import {
View,
Text,
Dimensions,
StyleSheet,
useColorScheme
} from 'react-native';
import Animated, {
useSharedValue,
useAnimatedScrollHandler,
useAnimatedStyle,
interpolate,
Extrapolate,
} from 'react-native-reanimated';
const { width } = Dimensions.get('window');
const IMAGE_HEIGHT = 200;
const HEADER_HEIGHT = 60;
const AppBar = () => {
const scrollY = useSharedValue(0);
const colorScheme = useColorScheme();
const isDarkMode = colorScheme === 'dark';
const scrollHandler = useAnimatedScrollHandler({
onScroll: (event) => {
scrollY.value = event.contentOffset.y;
},
});
const imageAnimatedStyle = useAnimatedStyle(() => {
const translateY = interpolate(
scrollY.value,
[-300, 0, 300],
[-150, 0, 225],
Extrapolate.CLAMP
);
const scale = interpolate(
scrollY.value,
[-300, 0, 300],
[2, 1, 1],
Extrapolate.CLAMP
);
return {
transform: [{ translateY }, { scale }],
};
});
const headerAnimatedStyle = useAnimatedStyle(() => {
const opacity = interpolate(
scrollY.value,
[IMAGE_HEIGHT - HEADER_HEIGHT, IMAGE_HEIGHT],
[0, 1],
Extrapolate.CLAMP
);
return {
opacity,
};
});
const backgroundColor = isDarkMode ? '#000' : '#fff';
const headerBackground = isDarkMode ? '#111' : '#27eff2';
const textColor = isDarkMode ? '#fff' : '#000';
const headerTextColor = isDarkMode ? '#fff' : '#fff';
return (
);
};
const styles = StyleSheet.create({
image: {
width: width,
height: IMAGE_HEIGHT,
},
overlay: {
position: 'absolute',
top: IMAGE_HEIGHT / 2 + 30,
left: 100,
},
overlayText: {
fontSize: 28,
fontWeight: 'bold',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 4,
},
header: {
height: HEADER_HEIGHT,
width: '100%',
position: 'absolute',
top: 0,
zIndex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: 10,
},
headerText: {
fontSize: 20,
fontWeight: 'bold',
},
});
export default AppBar;
```
### `Dark`
```js
import React from 'react';
import {
View,
Text,
Dimensions,
StyleSheet,
useColorScheme
} from 'react-native';
import Animated, {
useSharedValue,
useAnimatedScrollHandler,
useAnimatedStyle,
interpolate,
Extrapolate,
} from 'react-native-reanimated';
const { width } = Dimensions.get('window');
const IMAGE_HEIGHT = 200;
const HEADER_HEIGHT = 60;
const AppBar = () => {
const scrollY = useSharedValue(0);
const colorScheme = useColorScheme();
const isDarkMode = colorScheme === 'dark';
const scrollHandler = useAnimatedScrollHandler({
onScroll: (event) => {
scrollY.value = event.contentOffset.y;
},
});
const imageAnimatedStyle = useAnimatedStyle(() => {
const translateY = interpolate(
scrollY.value,
[-300, 0, 300],
[-150, 0, 225],
Extrapolate.CLAMP
);
const scale = interpolate(
scrollY.value,
[-300, 0, 300],
[2, 1, 1],
Extrapolate.CLAMP
);
return {
transform: [{ translateY }, { scale }],
};
});
const headerAnimatedStyle = useAnimatedStyle(() => {
const opacity = interpolate(
scrollY.value,
[IMAGE_HEIGHT - HEADER_HEIGHT, IMAGE_HEIGHT],
[0, 1],
Extrapolate.CLAMP
);
return {
opacity,
};
});
const backgroundColor = isDarkMode ? '#000' : '#fff';
const headerBackground = isDarkMode ? '#111' : '#27eff2';
const textColor = isDarkMode ? '#fff' : '#000';
const headerTextColor = isDarkMode ? '#fff' : '#fff';
return (
);
};
const styles = StyleSheet.create({
image: {
width: width,
height: IMAGE_HEIGHT,
},
overlay: {
position: 'absolute',
top: IMAGE_HEIGHT / 2 + 30,
left: 100,
},
overlayText: {
fontSize: 28,
fontWeight: 'bold',
color: 'white',
textShadowColor: 'black',
textShadowRadius: 4,
},
header: {
height: HEADER_HEIGHT,
width: '100%',
position: 'absolute',
top: 0,
zIndex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: 10,
},
headerText: {
fontSize: 20,
fontWeight: 'bold',
},
});
export default AppBar;
```