CODEWITHSUNDEEP
javascriptreact-nativeexpo
goolius_boozler
goolius_boozler

Reputation: 253

How to display a floating button above other components in react native?

I am trying to get a floating action button to display over other components in the bottom right of my app. In the case now it needs to display over a list and be static as the list moves. Currently the button does

I have tried putting the button style in the view tag and the button and neither displays anything on my screen

This is my button component:

import React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';

const FloatingPlusButton = () => {
    return (
      <View style={styles.buttonStyle}>
        <Button>
          <FontAwesome
            name='plus'
            size={32}
          />
        </Button>
      </View>
    );
};

const styles = StyleSheet.create({
  buttonStyle: {
    position: 'absolute',
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    right: 30,
    bottom: 30,
    backgroundColor: '#82ff9e',
  }
});

export default FloatingPlusButton;

This is the screen where I want to show the button:

import React, { Component } from 'react';
import { View, Dimensions } from 'react-native';
import Header from '../components/common/Header';
import TodayIncludes from '../components/TodayIncludes';
import MainTodo from '../components/todoComponents/mainTodo';
import { registerForPushNotificationsAsync } from '../functions/pushNotificationsRegister';
import { FloatingPlusButton } from '../components/FloatingPlusButton';

const HEIGHT = Dimensions.get('window').height;

class HomeScreen extends Component {
  componentDidMount() {
    registerForPushNotificationsAsync();
  }
  render() {
    return (
      <View style={{ flex: 1, height: HEIGHT }}>
        <Header navigation={this.props.navigation} />
        <TodayIncludes />
        <MainTodo />
        {FloatingPlusButton}
      </View>
    );
  }
}

export default HomeScreen;

I am unsure if I am calling the component wrong in the import? I thought it was supposed to be with no brackets and call it like a normal component but this gave me an invariant violation.

Upvotes: 0

Views: 3309

Answers (1)

fayeed
fayeed

Reputation: 2485

You are using the component incorrectly in your code, in jsx { } curly brackets are used to executed traditional js code like you might want to loop over an array etc.

import React, { Component } from 'react';
import { View, Dimensions } from 'react-native';
import Header from '../components/common/Header';
import TodayIncludes from '../components/TodayIncludes';
import MainTodo from '../components/todoComponents/mainTodo';
import { registerForPushNotificationsAsync } from '../functions/pushNotificationsRegister';

// Since you are exporting the component as default there is no need to
// do it by using selective import
import FloatingPlusButton from '../components/FloatingPlusButton';

const HEIGHT = Dimensions.get('window').height;

class HomeScreen extends Component {
  componentDidMount() {
    registerForPushNotificationsAsync();
  }
  render() {
    return (
      <View style={{ flex: 1, position: "relative", height: HEIGHT }}>
        <Header navigation={this.props.navigation} />
        <TodayIncludes />
        <MainTodo />
        {/* Here is how you execute js code */}
        <FloatingPlusButton />
      </View>
    );
  }
}

export default HomeScreen;

Upvotes: 2

Related Questions