FAB не будет отображаться

Question

Я добавляю FAB на своем компьютере, но он не будет отображаться на главной странице, независимо от того, как я ее экспортирую.

Это код для основного. js:

    /* eslint-disable prettier/prettier */
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Scan from './Scan';
import Kowops from './Kowops';
import Wallet from './Wallet';
import { FAB } from 'react-native-paper';

export class Main extends Component {
    render() {

        return (
            <View style={styles.container}>
            <View style={{alignItems: 'center'}}>
            <Text style={styles.plainText} onPress={() => this.props.navigation.navigate('Register')}>
            This is the main page, return to registration
            </Text>
            <View style={{height:5}}></View>
            </View>
            </View>
        )
    }
}

const mainCTA = () => (
    <FAB
      style={styles.fab}
      small
      icon="plus"
      onPress={() => console.log('Pressed')}
    />
  );

export class MyFAB extends Component{
    render(){
        return (
            <mainCTA />
        );
    }
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
      <Tab.Navigator         
      tabBarOptions={{
        activeTintColor: 'black',
        //activeBackgroundColor: '#75a478',
        inactiveBackgroundColor: '#c5e1a5',
        inactiveTintColor: 'gray',
        labelStyle: {fontSize: 14},
        style: 
        {
        backgroundColor: '#c5e1a5',
        borderTopColor: 'transparent',
        padding: 0,
        activeTabStyle: {
        fontWeight: 'bold',
        }
        },
        tabStyle: {
            borderRightColor: 'white',
            borderRightWidth: 1,
      }
      }}>


        <Tab.Screen name="Main" component={Main} />
        <Tab.Screen name="Scan" component={Scan} />
        <Tab.Screen name="Wallet" component={Wallet} />
        <Tab.Screen name="Kowops" component={Kowops} />
      </Tab.Navigator>
  );
}

export default function BottomNav() {
    return (

        <MyTabs />

    );
  }

const styles = StyleSheet.create({
    container: {
        flex: 2,
        backgroundColor:'#ffffff',
        padding: 10,
        alignItems: 'stretch',
        justifyContent: 'space-around'
    },
    logoContainer: {
        height: 120,
        padding: 10,
        alignItems: 'center' ,
        justifyContent: 'flex-end' 
    },
    logo: {
        height: 50,
        width: 165
    },
    formContainer: {
        flex:1,
        alignItems: 'center' ,
        justifyContent: 'center' 

    },
    buttonContainer: {
    padding: 10, 
    marginBottom: 20, 
    width: 250, 
    alignItems: 'center', 
    backgroundColor: '#c5e1a5'
  },
    inputTextField: {
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: 10, 
            height: 40, 
            width: 250,
            marginBottom: 10,
            fontSize: 16,
            borderBottomWidth : 1.0,
    },
    plainText: {
        fontSize: 16,
        marginBottom: 5,
        color: '#59616e',
        textDecorationLine: 'underline',
    },
    fab: {
        position: 'absolute',
        margin: 16,
        right: 0,
        bottom: 0,
    },
});

Я уже пытался пропустить это

export class MyFAB extends Component{
        render(){
            return (
                <mainCTA />
            );

И я пытался экспортировать по-разному экспортировать это, но ничего не работает. Может кто-нибудь мне помочь?

Заранее большое спасибо!

Тим