Change footer style based on view height in react native - react-native

Question

In react native, how would I go about applying a different footer style depending on the height of a particular ScrollView?
Basically, I want to create a sticky footer for a view that isn't the entire height of the phone and, if the ScrollView is larger, I want to add the footer onto the end of the ScrollView.
Hope that makes at least some sense!
Sample below for demonstration.
ThanksSimon
//If the view is larger than the phone height, have the footer at the bottom of the scroll view
<View style={{flex: 1}}>
<Header navigation={this.prop.navigation}
<Scrollview>
<View>
<Text>Content</Text>
</View>
<View>
<Image source={image} style={styles.footerImage} />
</View>
</ScrollView>
</View>
//If the content view is smaller than the phone size, the view needs to be outside the scrollview and use stick styles
<View style={{flex: 1}}>
<Header navigation={this.prop.navigation}
<Scrollview>
<View>
<Text>Content</Text>
</View>
</ScrollView>
<View>
<Image source={image} style={styles.stickyFooter} />
</View>
</View>
const styles = StyleSheet.create({
footerImage: {
width: Dimensions.get('window').width,
maxHeight: 235,
resizeMode: "contain"
},
stickyFooter: {
flex: 1,
position: 'absolute',
left: 0,
top: 0,
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});

Answer 1

Ciao, you could move the footer position using minHeight on Scrollview css. Something like:
<Scrollview style={styles.scrollview}>
<View>
<Text>Content</Text>
</View>
</ScrollView>
Then in your styles:
const styles = StyleSheet.create({
...
scrollview:{
minHeight: 300 // 300 for example
}
});
In this way, if Scrollview does not contains elements, footer appears after 300. Else, if Scrollview contains elements and his height is greater then 300, footer will be moved down according to Scrollview height.

Answer 2

import React from 'react';
import {
Text,
View,
StyleSheet,
ScrollView,
Dimensions,
Image,
} from 'react-native';
export default function App() {
return (
<View>
<ScrollView>
<View style={styles.body}>
<Text>Body</Text>
</View>
<View style={styles.footer}>
<Text>Footer</Text>
</View>
</ScrollView>
</View>
);
}
const { height } = Dimensions.get('window');
const styles = StyleSheet.create({
body: {
minHeight: height, // This is where the magic happens
backgroundColor: 'blue', // This is just for visual indication
},
footer: {
minHeight: 150,
backgroundColor: 'green' // This is just for visual indication
}
});
Should work for different screen heights.