I need to stick a footer component to the bottom of the viewport. The content above it is in a ScrollView. Im using React Native and React Native Web (thank you Expo) to build for both the web and native.
This works for native but not web:
export default function App() {
return (
<View style={styles.container}>
<ScrollView>
{new Array(100).fill("").map((_, index) => {
return <Text key={index}>Blah {index}</Text>;
})}
</ScrollView>
<View style={styles.footer}>
<Text>Im a footer</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
},
footer: {
backgroundColor: "green",
padding: 20,
width: "100%",
},
});
I can hack it with this code. fixed is not officially supported but the CSS is applied in the web.
footer: {
// @ts-ignore
position: Platform.OS === "web" ? "fixed" : undefined,
bottom: 0,
left: 0,
}
Without the @ts-ignore I get this error from TypeScript:
Type '"fixed"' is not assignable to type '"absolute" | "relative" | undefined'.
Is there a non-hacky way to do this?