Animating Views from top-bottom to side-by-side in React Native - react-native

Question

I am trying to create a custom header for my app and I want to animate it in a certain way. I will describe the way it is supposed to be animated.
If you have a look at the image you will see one red View that contains one green View and a blue View. I would like the Views be arranged side-by-side from their current positions while animating.
I have tried to create the code for a collapsing header and the red View that contains everything, is shrinking based on a ScrollView but I cant get the green and blue Views to come side-by-side.
Home.js
const HEADER_EXPANDED_VIEW = 200
const HEADER_COLLAPSED_VIEW = 80
export default class HomeActivity extends Component {
constructor(props) {
super(props)
this.state = {
scrollY: new Animated.Value(0)
}
}
static navigationOptions = {
title: "HomeActivity",
header: null
}
render() {
const headerHeight = this.state.scrollY.interpolate({
inputRange: [0, HEADER_EXPANDED_VIEW - HEADER_COLLAPSED_VIEW],
outputRange: [HEADER_EXPANDED_VIEW, HEADER_COLLAPSED_VIEW],
extrapolate: "clamp"
})
// console.log(headerHeight)
return (
<View style={styles.container}>
<ScrollView
contentContainerStyle={{
padding: 16,
paddingTop: HEADER_EXPANDED_VIEW,
color: "#FFFFFF"
}}
onScroll={Animated.event([
{
nativeEvent: {
contentOffset: {
y: this.state.scrollY
}
}
}
])}
>
<Text style={styles.title}>This is Title</Text>
<Text style={styles.content}>
.....
</Text>
</ScrollView>
<CollapsingHeader headerHeight={headerHeight} />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
scrollContainer: {
padding: 16
},
title: {
fontSize: 24,
marginVertical: 16
}
})
CollapsingHeader.js
export default class CollapsingHeader extends Component {
render() {
return (
<Animated.View
style={{
height: this.props.headerHeight,
width: Dimensions.get("screen").width,
position: "absolute",
top: 0,
left: 0,
borderWidth: 2,
borderColor: "#FF0000",
backgroundColor: "#212121"
}}
>
<View
style={{
borderWidth: 2,
borderColor: "#00FF00"
}}
>
<MenuButton />
</View>
<View
style={{
flexDirection: "row",
borderWidth: 2,
borderColor: "#0000FF"
}}
>
<View
style={{
flexGrow: 1
}}
>
<Text
style={{
fontFamily: "NunitoSans-Bold",
fontSize: 40,
color: "#FFFFFF"
}}
>
Home
</Text>
</View>
<SortButton />
<SearchButton />
</View>
</Animated.View>
)
}
}
I am relatively new to React Native, please assume I know very little about it.

Answer 1

If you know the headerHeight at which it's going to collapse, then you could add a dynamic flexDirection to the Animated.View style.
style={{
/* ...your Animated.View styles */
flexDirection: this.props.headerHeight < /* collapse height */ ? 'row' : 'column'
}}