CODEWITHSUNDEEP
react-native
jehee choi
jehee choi

Reputation: 175

What is proper way to use Floating Button as globally in react-native?

Root component is App.js

using Redux-saga as well.

my intention is that after login i want to use float button global.

but there are 3 tabs with Tab-Navigator (e.g Mail/Profile/Gallery..) and they have each Stack Navigator.

and i want to use floating button with different functions by tabs.

For example,

Mail.js --> fab function(Write)

Profile.js --> fab function(Call, Message)

Gallery.js -- > fab function(Share, Upload).. like that.

where should i put Fab Component to use globally??

i'm using library

https://github.com/santomegonzalo/react-native-floating-action

if there is other nice library i would accept if you guys recommend me. thanks

App.js

 export default class App extends React.Component {
   render() {

     return (
       <Provider store={store}>
        <View style={styles.container}>
         <ReduxNavigation />
       </View>
     </Provider>
  )}}

Upvotes: 0

Views: 2608

Answers (1)

Prince
Prince

Reputation: 851

You can use react-native-action-button module for action button. if your action button is independent of current screen on which you are, then you can use it in root component, as the action button have absolute position.

here is sample code that you can use for reference.

export default class App extends React.Component {
    render() {
        return (
        <Provider store={store}>
            <View style={styles.container}>
                <ReduxNavigation />

                <ActionButton buttonColor="rgba(231,76,60,1)">
                <ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
                    <Icon name="md-create" style={styles.actionButtonIcon} />
                </ActionButton.Item>
                <ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
                    <Icon name="md-notifications-off" style={styles.actionButtonIcon} />
                </ActionButton.Item>
                <ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
                    <Icon name="md-done-all" style={styles.actionButtonIcon} />
                </ActionButton.Item>
                </ActionButton>
            </View>
        </Provider>
        )
    }
}

Upvotes: 1

Related Questions