test slide up modal

AppNavigation.js

@@ -235,7 +235,7 @@ const AppStack = createSwitchNavigator(
 		Main: MainStack,
 	},
 	{
-		initialRouteName: 'AuthLoading',
+		initialRouteName: 'Main',
 	}
 );
 

components/FadeDimBG.js

+import React from 'react';
+import { Animated, StyleSheet } from 'react-native';
+
+export default class FadeDimBG extends React.Component {
+	state = {
+		fadeAnim: new Animated.Value(0), // Initial value for opacity: 0
+	};
+
+	componentDidMount() {
+		Animated.timing(
+			// Animate over time
+			this.state.fadeAnim, // The animated value to drive
+			{
+				toValue: 1, // Animate to opacity: 1 (opaque)
+				duration: 500, // Make it take a while
+			}
+		).start(); // Starts the animation
+	}
+	componentWillUnmount() {
+		Animated.timing(
+			// Animate over time
+			this.state.fadeAnim, // The animated value to drive
+			{
+				toValue: 0, // Animate to opacity: 1 (opaque)
+				duration: 500, // Make it take a while
+			}
+		).start(); // Starts the animation
+	}
+
+	render() {
+		let { fadeAnim } = this.state;
+
+		return (
+			<Animated.View // Special animatable View
+				style={[
+					StyleSheet.absoluteFill,
+					{
+						...this.props.style,
+						opacity: fadeAnim, // Bind opacity to animated value
+						backgroundColor: 'rgba(0,0,0,0.5)',
+					},
+				]}
+			>
+				{this.props.children}
+			</Animated.View>
+		);
+	}
+}

components/SlideUpModal.js

+import React from 'react';
+import { Animated, StyleSheet } from 'react-native';
+import { height } from '../constants/Layout';
+
+export default class SlideUpModal extends React.Component {
+	state = {
+		slide: new Animated.Value(height * 1), // Initial value for opacity: 0
+	};
+
+	componentDidMount() {
+		Animated.timing(
+			// Animate over time
+			this.state.slide, // The animated value to drive
+			{
+				toValue: height * 0.3, // Animate to opacity: 1 (opaque)
+				duration: 500, // Make it take a while
+			}
+		).start(); // Starts the animation
+	}
+	componentWillUnmount() {
+		Animated.timing(
+			// Animate over time
+			this.state.slide, // The animated value to drive
+			{
+				toValue: height * 1, // Animate to opacity: 1 (opaque)
+				duration: 500, // Make it take a while
+			}
+		).start(); // Starts the animation
+	}
+
+	render() {
+		let { slide } = this.state;
+
+		return (
+			<Animated.View // Special animatable View
+				style={{
+					...this.props.style,
+					top: slide,
+				}}
+			>
+				{this.props.children}
+			</Animated.View>
+		);
+	}
+}

screens/Private/TimerScreen/TimerScreen.js

 import React, { Component } from 'react';
 import { Fab, Icon, Text } from 'native-base';
-import { View, StyleSheet, FlatList, ScrollView, Modal, TouchableOpacity, TextInput } from 'react-native';
+import { View, StyleSheet, FlatList, ScrollView, Modal, TouchableOpacity, TextInput, Animated } from 'react-native';
 import { Switch, Button } from 'native-base';
 import { HeaderButtons, Item as HeaderItem } from 'react-navigation-header-buttons';
 import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
@@ -12,6 +12,8 @@ import DatePicker from 'react-native-date-picker';
 import { width, height } from '../../../constants/Layout';
 import InputField from '../../../components/InputField';
 import { isIphoneX } from '../../../utils/isPhoneX';
+import FadeDimBG from '../../../components/FadeDimBG';
+import SlideUpModal from '../../../components/SlideUpModal';
 // mock data
 const MultipleMockData = [
 	{
@@ -167,6 +169,7 @@ export default class TimerScreen extends Component {
 		selectedBreaker: '',
 		checked: [],
 		search: '',
+		test: new Animated.Value(height * 1),
 	};
 
 	renderTimerFab = () => {
@@ -224,44 +227,38 @@ export default class TimerScreen extends Component {
 	componentDidUpdate = (prevProps, prevState) => {
 		if (prevState !== this.state) console.log(this.state);
 	};
-
+	onOpenModal = () => {
+		this.setState({
+			filterOpen: true,
+		});
+		this.testslide();
+	};
+	testslide = () => {
+		Animated.timing(
+			// Animate over time
+			this.state.test, // The animated value to drive
+			{
+				toValue: height * 0.3, // Animate to opacity: 1 (opaque)
+				duration: 500, // Make it take a while
+			}
+		).start();
+	};
 	render() {
 		return (
 			<>
 				{/* Overlay */}
 
-				<Modal
+				{/* <Modal
 					transparent
 					presentationStyle={'overFullScreen'}
 					animationType="fade"
 					visible={this.state.filterOpen || this.state.isVisible}
 				>
 					<View style={{ width, height, backgroundColor: 'rgba(0,0,0,0.5)' }} />
-				</Modal>
+				</Modal> */}
 
 				{/* Search Bar */}
 				<View style={{ padding: 15, flexDirection: 'row', alignItems: 'center' }}>
-					{/* <View
-						style={[
-							{
-								// height: 30,
-								paddingVertical: 5,
-								paddingHorizontal: 10,
-								borderColor: '#c7cad1',
-								borderWidth: 1,
-								borderRadius: 21,
-								flex: 1,
-							},
-							theme.rowContainer,
-						]}
-					>
-						<Icon name="search" style={{ color: '#c7cad1', fontSize: 14, marginRight: 10 }} />
-						<TextInput
-							placeholder="Search"
-							placeholderTextColor="#b9bdc5"
-							style={{ fontSize: 14, fontFamily: 'Avenir-Roman' }}
-						/>
-					</View> */}
 					<SearchBar
 						containerStyle={{
 							flex: 1,
@@ -290,7 +287,7 @@ export default class TimerScreen extends Component {
 					<Icon
 						name="funnel"
 						style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }}
-						onPress={() => this.setState({ filterOpen: true })}
+						onPress={() => this.onOpenModal()}
 					/>
 				</View>
 
@@ -318,6 +315,7 @@ export default class TimerScreen extends Component {
 					animationType="slide"
 					visible={this.state.isVisible}
 				>
+					<FadeDimBG />
 					<View style={{ flex: 1, backgroundColor: 'transparent' }}>
 						<ScrollView contentContainerStyle={[styles.scrollContainer]}>
 							<Text style={theme.title}>Create Timer</Text>
@@ -425,11 +423,12 @@ export default class TimerScreen extends Component {
 				<Modal
 					transparent
 					presentationStyle={'overFullScreen'}
-					animationType="slide"
+					animationType="fade"
 					visible={this.state.filterOpen}
 				>
+					<FadeDimBG />
 					<View style={{ flex: 1, backgroundColor: 'transparent' }}>
-						<View style={styles.filterModal}>
+						<SlideUpModal style={styles.filterModal}>
 							<View
 								style={[
 									theme.rowContainer,
@@ -515,7 +514,7 @@ export default class TimerScreen extends Component {
 								)}
 								keyExtractor={(item, index) => `sub${index}`}
 							/>
-						</View>
+						</SlideUpModal>
 					</View>
 				</Modal>
 				{/* {this.renderTimerFab()} */}