CODEWITHSUNDEEP
javascriptreact-native
S. M. Asif
S. M. Asif

Reputation: 3709

How to add a floating Action Button inside a scrollview at a specific position in React-Native Expo?

I want to show a floating action button at bottom right side of my screen. But as I have one Scrollview component in my Screen I am not getting how should I do that? In the below image you can see-

there are some cards in the ScrollView but I want to show a floating action button at bottom right side of the screen which will overlap the Cards. So, it would be very nice if anyone suggest me with code - How can I do that?

enter image description here

Upvotes: 6

Views: 9693

Answers (2)

Matheswaaran
Matheswaaran

Reputation: 142

The View should be outside the ScrollView and the position in style properties should be fixed. The bottom and right properties show the space between view and the screen ends

<ScrollView>
...
</ScrollView>
<View style={{ position: 'fixed', bottom: 10, right: 10, zIndex: 200 }}>
    <Icon name="plus" size={25} color="#8E8E93" />
</View>

Upvotes: -5

Masuk Helal Anik
Masuk Helal Anik

Reputation: 2283

Add the action button below your ScrollView code and make it absolute. Here is a working example code 

import React, { Component } from 'react';

import { StyleSheet, View, Alert, ListView, Text, TouchableOpacity, Image,ScrollView } from 'react-native';

export default class Mynewproject extends Component {


 SampleFunction=()=>{

  // Write your own code here, Which you want to execute on Floating Button Click Event.
  Alert.alert("Floating Button Clicked");

}

render() {

return (

<View style={styles.MainContainer}>

       <ScrollView>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>

       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>

       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>

       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>

       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>
       <Text>sdds</Text>

       <Text>sdds</Text>

       </ScrollView>

        <TouchableOpacity activeOpacity={0.5} onPress={this.SampleFunction} style={styles.TouchableOpacityStyle} >

          <Image source={{uri : 'https://reactnativecode.com/wp-content/uploads/2017/11/Floating_Button.png'}} 

          style={styles.FloatingButtonStyle} />

        </TouchableOpacity>

</View>

   );
 }
}

const styles = StyleSheet.create({

 MainContainer :{

   justifyContent: 'center',
   flex:1,
   margin: 10
 },



 TouchableOpacityStyle:{

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

   FloatingButtonStyle: {

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

Upvotes: 12

Related Questions