Element with fixed position on viewport in React Native Web?

Viewed 720

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?

0 Answers
Related