React Native Fixed Footer

React Native fixed footer

Off the top of my head you could do this with a ScrollView. Your top-level container could be a flex container, inside that have a ScrollView at the top and your footer at the bottom. Then inside the ScrollView just put the rest of your app as normal.

How to make sticky footer with react native scrollview?

You should move out the MyStickyFooter component from your ScrollView.

You should have something like this:

<View style={....}>
  <ScrollView>
     ... components
  </ScrollView>
  <MyStickyFooter/>
</View>

React Native ScrollView dynamic footer

here is my solution which i found

<ScrollView>
    <View style={{ minHeight: height - buttonHeight - safeAreaView }}>
        <Text>Content</Text>
    </View>
    <Button text="Next" />
</ScrollView>

React / Partially sticky footer

try checking if you are at the bottom of the page and conditionally hide and show your footer.

const App = () => {
  const [isBottom, setIsBottom] = React.useState(false);

  const handleScroll = () => {

    const bottom = Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight

    if (bottom) {
      setIsBottom(true)
    } else {
      setIsBottom(false)
    }

  };
  React.useEffect(() => {
    window.addEventListener('scroll', handleScroll, {
      passive: true
    });

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
     <div>content.....</div>
    <footer className={isBottom ? "showFooter" : "hideFooter"}>M</footer>
    )
};

---

Related Topics