React-native-action-button : change position of action items

I am actually trying to use action buttons in React-native, but I have problems customizing action buttons position.

Using react-native-action-button (“react-native-action-button”: “^2.8.5”), buttons are positioned vertically, just like that:

Action buttons

But, I would like something where buttons are aligned horizontally, or as a “pyramid”, like the one in the center higher than the two others, aligned. A bit like that (the screen is from the MyFitnessPal app):

Action button MyFitnessPal

What could also be good is having a ‘transparent screen’ where action button are deployed, but that comes after.

Here is the code I am using :

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';


class App extends Component {

  render() {
    return (
      <View style={{flex:1, backgroundColor: '#f3f3f3'}}>
        {/* Rest of the app comes ABOVE the action button component !*/}
          <ActionButton
            buttonColor="rgba(231,76,60,1)"
            position = 'center'
            verticalOrientation = 'up'
            size = {70}
            style = {{marginBottom: 100}}
            >
        {/*Inner options of the action button*/}
        {/*Icons here
           https://infinitered.github.io/ionicons-version-3-search/
         */}
            <ActionButton.Item
            buttonColor="#9b59b6"
            title="Add to Watch Later"
            onPress={() => this.props.navigation.navigate('Search')}>
            <Ionicons
              name="md-eye"
              style={styles.actionButtonIcon}
              />
            </ActionButton.Item>
            <ActionButton.Item
            buttonColor="#3498db"
            title="Add to Favourite"
            onPress={() => alert('Added to favourite')}>
            <Ionicons
              name="md-star"
              style={styles.actionButtonIcon}
            />
            </ActionButton.Item>
            <ActionButton.Item
            buttonColor="#1abc9c"
            title="Share"
            onPress={() => alert('Share Post')}>
            <Ionicons
              name="ios-beer"
              style={styles.actionButtonIcon}
            />
            </ActionButton.Item>
          </ActionButton>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',
  },
});

Thank you in advance for your precious help !

Answer

Try using this approach!

import React from 'react';
import { View, Text, StyleSheet, TouchableWithoutFeedback, Animated, Dimensions } from 'react-native';
import { AntDesign, Entypo } from '@expo/vector-icons';
import ActionButton from 'react-native-action-button';
import { NavigationContainer } from '@react-navigation/native';


const width = Dimensions.get('window').width;

export default function Action({ navigation }) {

    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff', marginBottom: 70, marginRight: 20 }}>
            <ActionButton buttonColor="#7E1FCD" position="right"   >
                <ActionButton.Item
                    buttonColor="#7E7A83"
                    size={34}
                    title="Time Blocker"
                    titleColor="red"
                    onPress={() => console.log("notes tapped!")}>
                    <AntDesign name="smileo" size={10} color="#FFF" />
                </ActionButton.Item>


                <ActionButton.Item buttonColor="#7E7A83"
                    size={34}
                    title="Book Resource"
                    onPress={() => console.log("notes tapped!")}>
                    <AntDesign name="smileo" size={10} color="#FFF" />
                </ActionButton.Item>

                <ActionButton.Item buttonColor="#7E7A83"
                    size={34}
                    title="New Class Session"
                    onPress={() => console.log("notes tapped!")}>
                    <AntDesign name="smileo" size={10} color="#FFF" />
                </ActionButton.Item>

                <ActionButton.Item buttonColor="#7E7A83"
                    size={34}
                    title="New Appointment"
                    onPress={() => navigation.navigate("Select")}>
                    <AntDesign name="smileo" size={10} color="#FFF" />
                </ActionButton.Item>
            </ActionButton>
        </View>
    );

}

Advertisement

Answer