React Native - Modal Trigger button always visible

Question

I am trying to make an Action Button on the tapbar which deploys multiple items using Modal. The issue I have is that I want the action button to stay visible so the user can toggle between the modal.

Here you can see the action button visible

obviously disappears once the modal is activated.

Tried:

• On the modal make another button, but on different device sizes the button moves.

Code

import React, {useState} from 'react';
import {
  Dimensions,
  Platform,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import Modal from 'react-native-modal';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Entypo from 'react-native-vector-icons/Entypo';
import Feather from 'react-native-vector-icons/Feather';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import TabBg from '../svg/TabBg';
import colors from './../utils/colors';

const {width, height} = Dimensions.get('window');
Platform.OS == 'ios'
  ? console.log('ios HEIGHT: ' + height + ' WIDTH: ' + width)
  : console.log('android HEIGHT: ' + height + ' WIDTH: ' + width);

Ionicons.loadFont();
Feather.loadFont();
AntDesign.loadFont();
Entypo.loadFont();
MaterialIcons.loadFont();

const TabBarAdvancedButton = ({bgColor, ...props}) => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <>
      <View style={styles.container} pointerEvents="box-none">
        <TabBg color={'white'} style={styles.background} />
        <TouchableOpacity
          style={styles.button}
          onPress={props.onPress}
          activeOpacity={0.9}
          onPress={() => setModalVisible(true)}>
          <Entypo name="plus" style={styles.buttonIcon} />
        </TouchableOpacity>
      </View>
      <Modal
        backdropOpacity={0.8}
        animationIn="fadeIn"
        animationOut="fadeOut"
        isVisible={modalVisible}
        onBackdropPress={() => setModalVisible(false)}
        style={styles.contentView}>
        {/*close button */}

        <View style={styles.content}>
          <TouchableOpacity
            style={{
              position: 'absolute',
              backgroundColor: 'red',
              alignSelf: 'center',
            }}>
            <AntDesign name="search1" size={20} color="#fff" />
          </TouchableOpacity>
          <View
            style={{
              flexDirection: 'row',
              flex: 1,
              justifyContent: 'space-around',
              marginBottom: height * 0.02,
            }}>
            <TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
              <AntDesign name="search1" size={20} color="#fff" />
            </TouchableOpacity>
            <TouchableOpacity activeOpacity={0.8} style={[styles.buttonItem]}>
              <MaterialIcons name="fitness-center" size={20} color="#fff" />
            </TouchableOpacity>

            <TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
              <AntDesign name="search1" size={20} color="#fff" />
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </>
  );
};

export default TabBarAdvancedButton;

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: 75,
    alignItems: 'center',
  },
  background: {
    position: 'absolute',
    top: 0,
  },
  button: {
    top: -22.5,
    justifyContent: 'center',
    alignItems: 'center',
    width: 50,
    height: 50,
    borderRadius: 27,
    backgroundColor: colors.PRIMARY_COLOR_DARK,
  },
  buttonIcon: {
    fontSize: 16,
    color: '#F6F7EB',
  },
  content: {
    backgroundColor: 'transparent',
    padding: 60,
    justifyContent: 'space-evenly',
    alignItems: 'center',
    borderTopRightRadius: 17,
    borderTopLeftRadius: 17,
    flexDirection: 'row',
  },
  contentTitle: {
    fontSize: 20,
    marginBottom: 12,
  },
  contentView: {
    justifyContent: 'flex-end',
    margin: 0,
  },
  buttonStyle: {
    height: 50,
    width: 50,
    borderRadius: 100,
  },
  buttonStyle2: {
    height: 50,
    width: 50,
    borderRadius: 100,
  },

  buttonItem: {
    height: 56,
    width: 56,
    borderRadius: 100,
    borderColor: '#468CFF',
    borderWidth: 3.5,
    backgroundColor: '#366ABF',
    bottom: 50,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Answer 1

You can try the below code, you should be adding the action button inside the modal as well, so that will be displayed inside modal.

export default ActionButton = () => {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <>
      <Button
        onPress={() => {
          setModalVisible(true);
        }}
        buttonStyle={styles.buttonStyle}
        icon={
          <Entypo
            name={"plus"}
            fill={Colors.tintColor}
            color={Colors.iconColor}
          />
        }
      />
      <View style={styles.container}>
        <Modal
          backdropOpacity={0.8}
          isVisible={modalVisible}
          onBackdropPress={() => setModalVisible(false)}
          style={styles.contentView}
        >
          {/*close button */}

          <View style={styles.content}>
            <View
              style={{
                flexDirection: "row",
                flex: 1,
                justifyContent: "space-around",
              }}
            >
              <TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
                <AntDesign name="search1" size={20} color="#fff" />
              </TouchableOpacity>
              <TouchableOpacity
                activeOpacity={0.8}
                style={[styles.buttonItem, { bottom: 130 }]}
              >
                <MaterialIcons name="fitness-center" size={20} color="#fff" />
              </TouchableOpacity>
              <TouchableOpacity activeOpacity={0.8} style={styles.buttonItem}>
                <AntDesign name="search1" size={20} color="#fff" />
              </TouchableOpacity>
              <Button
                onPress={() => {
                  setModalVisible(true);
                }}
                buttonStyle={styles.buttonStyle}
                icon={
                  <Entypo
                    name={"plus"}
                    fill={Colors.tintColor}
                    color={Colors.iconColor}
                  />
                }
              />
            </View>
          </View>
        </Modal>
      </View>
    </>
  );
};
const styles = StyleSheet.create({
  content: {
    backgroundColor: "transparent",
    padding: 60,
    justifyContent: "space-evenly",
    alignItems: "center",
    borderTopRightRadius: 17,
    borderTopLeftRadius: 17,
    flexDirection: "row",
  },
  contentTitle: {
    fontSize: 20,
    marginBottom: 12,
  },
  contentView: {
    justifyContent: "flex-end",
    margin: 0,
  },
  buttonStyle: {
    height: 50,
    width: 50,
    backgroundColor: Colors.tintColor,
    borderRadius: 100,
  },
  buttonStyle2: {
    height: 50,
    width: 50,
    backgroundColor: Colors.tintColor,
    borderRadius: 100,
  },

  buttonItem: {
    height: 56,
    width: 56,
    borderRadius: 100,
    borderColor: "#468CFF",
    borderWidth: 3.5,
    backgroundColor: "#366ABF",
    bottom: 50,
    justifyContent: "center",
    alignItems: "center",
  },
});