React Native - Floating Action Button - Mobile Application Development

Felicitations! You are standing in the right place! Today, we will show you how to Add a Floating Action Button to Mobile App.

Our starting screen will look like this −



If we click the button, the alert will open -


Implementation

First, You must set up your local development environment. Follow the below link to set up your local environment.


After executing the commands mentioned in this link, a folder with a specified name is created with the following contents.


Import StyleSheet, View, Image, TouchableOpacity, and Alert component in our project.

import React from 'react';
import { StyleSheet, View, Image, TouchableOpacity, Alert } from 'react-native';

Create a function named as MyFunction(). We would call this function on the Floating Action Button onPress event.

MyFunction = () => {

Alert.alert("Wow! Floating Button Clicked");

}

Engender a Root View in render’s return block.

  render() {

return (

<View style={styles.container}>
<TouchableOpacity activeOpacity={0.5} onPress={this.MyFunction}
                style={styles.TouchableOpacityStyle} >
<Image source={{ uri: 'https://raw.githubusercontent.com/knowledgefactory4u
              /Javascript/master/floatingButton.jpeg' }}
style={styles.FloatingButtonStyle} />
</TouchableOpacity>
</View>
);
}
}

Engender Style for View, TouchableOpacity, and Image component.

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white'
},

TouchableOpacityStyle: {

position: 'absolute',
width: 70,
height: 70,
alignItems: 'center',
justifyContent: 'center',
right: 30,
bottom: 30,
},

FloatingButtonStyle: {

resizeMode: 'contain',
width: 70,
height: 70,
}
});

Complete source code for App.js File

import React from 'react';
import { StyleSheet, View, Image, TouchableOpacity, Alert } from 'react-native';

export default class App extends React.Component {
MyFunction = () => {

Alert.alert("Wow! Floating Button Clicked");

}


render() {

return (

<View style={styles.container}>
<TouchableOpacity activeOpacity={0.5} onPress={this.MyFunction} style=
                            {styles.TouchableOpacityStyle} >
<Image source={{ uri: 'https://raw.githubusercontent.com/knowledgefactory4u
                     /Javascript/master/floatingButton.jpeg' }}
style={styles.FloatingButtonStyle} />
</TouchableOpacity>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white'
},

TouchableOpacityStyle: {

position: 'absolute',
width: 70,
height: 70,
alignItems: 'center',
justifyContent: 'center',
right: 30,
bottom: 30,
},

FloatingButtonStyle: {

resizeMode: 'contain',
width: 70,
height: 70,
}
});

First, You must set up your local development environment. Follow the below link to set up your local environment.

Run

sibinmuhammed@ladmin-H310M-S2:~$ react-native start
sibinmuhammed@ladmin-H310M-S2:~/knf-reactnative/KnowledgeFactoryDemo$ react-native run-android



More...

Popular posts from this blog

Spring boot video streaming example-HTML5

DataTable-Pagination example with Spring boot, jQuery and ajax

10 Best Job Posting Sites 2021-2022

Spring boot web project free download:User Registration System

Spring Boot + JPA/Hibernate One to Many mapping example

5 Hardest Puzzle,100% fail answers

Java security AES,SHA256,SHA512,MD5-Spring Boot Project Free Download

Spring Boot-AngularJS-Bootstrap-JPA-CRUD

ReactJS - Bootstrap - Buttons

Spring Boot file upload/download example