How to add floating button in react native?

Question

I want to add floating button in react native. I have added it with position: absolute but it is shown at the end i.e at the botto of the screen. Currently it is only displayed at the bottom i.e where the content of the screen ends. I want to display floating button on bottom right corner and should be visible when user scrolls the screen up and down.

Floating button from react native paper: https://callstack.github.io/react-native-paper/fab.html#usage

If I use position: 'fixed' then it gives me error https://imgur.com/a/JZJ7Pbl

Code:

<ScrollView>

// Some other View components 

     <FAB
        style={styles.fab}
        small
        color="#00d048"
        icon="add"
      />
</ScrollView>

CSS:

fab: {
        position: 'absolute',
        right: 0,
        bottom: 0,
    }

In the screenshot you can see the button is not floating over the content instead it is displayed at bottom of the screen.

Screenshot:

Answer 1

React Native does not currently support position: fixed, so we have to add the element in a separate View with absolute position. As we still want to scroll the other content, we will have to wrap these two in another View:

<View style={{flex: 1}}>
  <ScrollView>
   // Your other components here
  </ScrollView>
  <View style={styles.fixedView}>
    <Fab
      style={styles.fab}
      small
      color="#00d048"
      icon="add"
     />
  </View>
</View>

And the styling:

fixedView : {
  position: 'absolute',
  left: 0,
  bottom: 0,
  flexDirection: 'row',
  justifyContent: 'flex-end',
}

Optionally give a neat margin to the right and bottom of the Fab

fab: {
    margin-right: theme.spacing.unit * 2,
    margin-bottom: theme.spacing.unit * 3,
}

Answer 2

If you want to use position: absolute; parent must be position: relative;