How to add floating block in sticky footer

This example shows how to add floating block in sticky footer.

steps

1. Add a block in sticky footer

{
  name: 'appmaker/floating-button',
  attributes: {},
},

The page will look like this:

const page = {
  title: 'My Page',
  attributes: {
    rootContainerStyle: {
      flex: 1,
    },
    contentContainerStyle: {
      flex: 1,
      backgroundColor: 'white',
    },
  },
  blocks: [],

  stickyFooter: {
    blocks: [
      {
        name: 'appmaker/floating-button',
        attributes: {},
      },
    ],
  },
};
export default page;

2. Register the block

import FloatingButton from './components/FloatingButton';

const blocks = {
  name: 'appmaker/floating-button',
  View: FloatingButton,
};

3. Create the component

import React from 'react';
import { StyleSheet,View } from 'react-native';

return (
    <View style={styles.container}>
     // add your content here
    </View>
  )

const styles = StyleSheet.create({
    container: {
      position: 'absolute', // add this to make the block float      
      zIndex: 10,
    },
});