Project Folder Structure

android
ios
node_modules
src
    Componets
      fabswipemenu.js
    App.js
app.json
babel.config.js
index.js
metro.config.js
package-lock.json
package.json

Creating a New Project run this command

ngx react-native init <Project-name>

• After then create a project add node package

npm install --save native-base

• After then install node package then run this command

react-native link

• After then Open  index.js  under the Project folder and add this code.

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

• After then src folder under the project folder like "project-name/src/" and cut the App.js of the root folder and paste src folder
• After that add this code in App.js

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';

import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import FabSwipeMenu from './Components/fabswipemenu';

const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Header />
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next:
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next:
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next:
</Text>
</View>
</View>
</ScrollView>
<FabSwipeMenu/>
</SafeAreaView>
</>
);
};

const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});
export default App;

• After then create Components folder under the src folder and create a fabswipemenu.js file and add this code

import React, {Component} from 'react';
import { StyleSheet, View, Animated, Text, TouchableOpacity, Easing } from 'react-native';
import { Button } from 'native-base';
var styles = StyleSheet.create({
fabList:{
zIndex:10,
position:'absolute',
bottom:20,
display:"flex",
flexDirection:"row",
right:0,
height:50,
paddingRight:20,
borderTopLeftRadius:100,
borderTopRightRadius:0,
borderBottomRightRadius:0,
borderBottomLeftRadius:100,
backgroundColor:'rgb(38, 52, 74)',
},
fabOpenIcon:{
zIndex:100,
paddingLeft:8,
height:50,
width:100,
flexDirection:"column",
justifyContent:"center",
alignItems:"center",
},
fabOpenIconFirst:{
zIndex:100,
paddingLeft:8,
paddingRight:5,
height:50,
width:50,
flexDirection:"column",
justifyContent:"center",
alignItems:"center",
},
fabOpenIconLast:{
zIndex:100,
paddingLeft:8,
paddingRight:5,
height:50,
width:55,
flexDirection:"column",
justifyContent:"center",
alignItems:"center",
}
});

export default class FabSwipeMenu extends React.Component {
constructor(props) {
super(props);
this.width = new Animated.Value(50);
this.state = {
isOpenSwipList:false,
};
this.animationWidth= this.props.otherThenTraining?155:310;
//console.log(this.props);
}
openSwiprList = () => {
this.width.setValue(55);
this.setState({isOpenSwipList:true})
Animated.timing(this.width, {
toValue:this.animationWidth,
delay:0,
duration: this.animationWidth,
}).start();
};

closeSwiprList = () => {
this.width.setValue(this.animationWidth);
this.setState({isOpenSwipList:false})
Animated.timing(this.width, {
toValue:55,
delay:0,
duration: this.animationWidth,
}).start();
};

render() {
return (
<React.Fragment>
{
this.state.isOpenSwipList?
<TouchableOpacity onPress={() => this.closeSwiprList()} style={{backgroundColor:'rgba(0,0,0,0)',position:"absolute",flex:1, width:'100%',height:'100%',top:0,left:0, zIndex:0}}></TouchableOpacity>:
null
}
<Animated.View style={[styles.fabList, {width:this.width}]}>
{
this.state.isOpenSwipList?
null:
<Button onPress={() => this.openSwiprList()} transparent style={styles.fabOpenIconFirst} >
<Text style={{fontSize:9,color:'rgb(256,256,256)'}}>Open</Text>
</Button>
}
<Button transparent style={styles.fabOpenIcon} >
<Text style={{fontSize:12,color:'rgb(256,256,256)'}}>Home</Text>
</Button>
<Button transparent style={styles.fabOpenIcon} >
<Text style={{fontSize:12,color:'rgb(256,256,256)'}}>About</Text>
</Button>
<Button transparent style={styles.fabOpenIcon} >
<Text style={{fontSize:12,color:'rgb(256,256,256)'}}>Contact</Text>
</Button>
<Button transparent style={styles.fabOpenIcon} >
<Text style={{fontSize:12,color:'rgb(256,256,256)'}}>Help</Text>
</Button>
</Animated.View>
</React.Fragment
);
}
}

Create Swipe fab menu custom for android and ios app both working right to left with animation are done.

Run command

ngx react-native run-android
ngx react-native run-ios

Thank you

Github link: https://github.com/Sudarshan101/Fab-Swipe-Menu-Custom-React-Native

Youtube: https://www.youtube.com/watch?v=wqQJzilacOQ