Open In App

How to create a Floating Action Button in react native ?

Last Updated : 07 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms.

Prerequisites:

Approach: In this article, we will create a floating action button in react-native. To create it, we will use react-native-paper library. 

In our project, we will Create a FAB and on click of it, the text field will appear. We will see the implementation step-by-step.

Creating React Native App:

Step 1: Create a react-native project:

npx react-native init DemoProject

Step 2: Now install react-native-paper

npm install react-native-paper

Step 3: Start the server

npx react-native run-android

Step 4: Now go to your project and create a components folder. Inside the components folder, create a file Fab.js

Project Structure: The project should look like this:

Example: In Fab.js, initially, the input field and button will be hidden. On change of their states, both will appear below the Fab button.

Fab.js




import React, { useState } from 'react';
import { View, StyleSheet, Alert, Button } from 'react-native';
import { FAB, TextInput } from 'react-native-paper';
  
const FabExample = () => {
  const [text, setText] = useState('');
  const [showText, setShowText] = useState(false);
  const [disablebtn, setDisablebtn] = useState(true);
  
  const addItem = (text) => {
    setShowText(true);
  };
  const showAlert = () => {
    Alert.alert('Item added successfully');
  };
  
  return (
    <View>
      <FAB style={styles.fab} icon="plus" small label="Add more"
           onPress={addItem} />
      {showText ? (
        <View style={styles.textInput}>
          <TextInput
            mode="outlined"
            label="Item"
            value={text}
            onChangeText={(newText) => {
              setText(newText);
              setDisablebtn(false);
            }}
          />
          <View style={styles.btn}>
            <Button title="Submit" disabled={disablebtn} 
                    onPress={showAlert} />
          </View>
        </View>
      ) : (
        <></>
      )}
    </View>
  );
};
  
export default FabExample;
  
const styles = StyleSheet.create({
  fab: {
    position: 'relative',
    margin: 16,
    marginTop: 40,
    right: 0,
    bottom: 0,
  },
  textInput: {
    position: 'relative',
    margin: 18,
  },
  btn: {
    marginTop: 20,
  },
});


App.js




import React from 'react';
import { View } from 'react-native';
import FabExample from './components/Fab';
  
const App: () => Node = () => {
  return (
    <View>
      <FabExample />
    </View>
  );
};
  
export default App;


Step to run the application: Run the application using the following command:

npx react-native run-android

Output:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads