Skip to content

S
safetcut-app
Commit 55df8217 by Tonk
Options

test slide up modal

parent 756c4c6b
Showing with 122 additions and 30 deletions
AppNavigation.js
...@@ -235,7 +235,7 @@ const AppStack = createSwitchNavigator( ...@@ -235,7 +235,7 @@ const AppStack = createSwitchNavigator(
Main: MainStack, Main: MainStack,
}, },
{ {
initialRouteName: 'AuthLoading', initialRouteName: 'Main',
} }
); );
......
components/FadeDimBG.js 0 → 100644
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 0 → 100644
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 React, { Component } from 'react';
import { Fab, Icon, Text } from 'native-base'; 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 { Switch, Button } from 'native-base';
import { HeaderButtons, Item as HeaderItem } from 'react-navigation-header-buttons'; import { HeaderButtons, Item as HeaderItem } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton'; import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
...@@ -12,6 +12,8 @@ import DatePicker from 'react-native-date-picker'; ...@@ -12,6 +12,8 @@ import DatePicker from 'react-native-date-picker';
import { width, height } from '../../../constants/Layout'; import { width, height } from '../../../constants/Layout';
import InputField from '../../../components/InputField'; import InputField from '../../../components/InputField';
import { isIphoneX } from '../../../utils/isPhoneX'; import { isIphoneX } from '../../../utils/isPhoneX';
import FadeDimBG from '../../../components/FadeDimBG';
import SlideUpModal from '../../../components/SlideUpModal';
// mock data // mock data
const MultipleMockData = [ const MultipleMockData = [
{ {
...@@ -167,6 +169,7 @@ export default class TimerScreen extends Component { ...@@ -167,6 +169,7 @@ export default class TimerScreen extends Component {
selectedBreaker: '', selectedBreaker: '',
checked: [], checked: [],
search: '', search: '',
test: new Animated.Value(height * 1),
}; };
renderTimerFab = () => { renderTimerFab = () => {
...@@ -224,44 +227,38 @@ export default class TimerScreen extends Component { ...@@ -224,44 +227,38 @@ export default class TimerScreen extends Component {
componentDidUpdate = (prevProps, prevState) => { componentDidUpdate = (prevProps, prevState) => {
if (prevState !== this.state) console.log(this.state); 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() { render() {
return ( return (
<> <>
{/* Overlay */} {/* Overlay */}
<Modal {/* <Modal
transparent transparent
presentationStyle={'overFullScreen'} presentationStyle={'overFullScreen'}
animationType="fade" animationType="fade"
visible={this.state.filterOpen || this.state.isVisible} visible={this.state.filterOpen || this.state.isVisible}
> >
<View style={{ width, height, backgroundColor: 'rgba(0,0,0,0.5)' }} /> <View style={{ width, height, backgroundColor: 'rgba(0,0,0,0.5)' }} />
</Modal> </Modal> */}
{/* Search Bar */} {/* Search Bar */}
<View style={{ padding: 15, flexDirection: 'row', alignItems: 'center' }}> <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 <SearchBar
containerStyle={{ containerStyle={{
flex: 1, flex: 1,
...@@ -290,7 +287,7 @@ export default class TimerScreen extends Component { ...@@ -290,7 +287,7 @@ export default class TimerScreen extends Component {
<Icon <Icon
name="funnel" name="funnel"
style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }} style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }}
onPress={() => this.setState({ filterOpen: true })} onPress={() => this.onOpenModal()}
/> />
</View> </View>
...@@ -318,6 +315,7 @@ export default class TimerScreen extends Component { ...@@ -318,6 +315,7 @@ export default class TimerScreen extends Component {
animationType="slide" animationType="slide"
visible={this.state.isVisible} visible={this.state.isVisible}
> >
<FadeDimBG />
<View style={{ flex: 1, backgroundColor: 'transparent' }}> <View style={{ flex: 1, backgroundColor: 'transparent' }}>
<ScrollView contentContainerStyle={[styles.scrollContainer]}> <ScrollView contentContainerStyle={[styles.scrollContainer]}>
<Text style={theme.title}>Create Timer</Text> <Text style={theme.title}>Create Timer</Text>
...@@ -425,11 +423,12 @@ export default class TimerScreen extends Component { ...@@ -425,11 +423,12 @@ export default class TimerScreen extends Component {
<Modal <Modal
transparent transparent
presentationStyle={'overFullScreen'} presentationStyle={'overFullScreen'}
animationType="slide" animationType="fade"
visible={this.state.filterOpen} visible={this.state.filterOpen}
> >
<FadeDimBG />
<View style={{ flex: 1, backgroundColor: 'transparent' }}> <View style={{ flex: 1, backgroundColor: 'transparent' }}>
<View style={styles.filterModal}> <SlideUpModal style={styles.filterModal}>
<View <View
style={[ style={[
theme.rowContainer, theme.rowContainer,
...@@ -515,7 +514,7 @@ export default class TimerScreen extends Component { ...@@ -515,7 +514,7 @@ export default class TimerScreen extends Component {
)} )}
keyExtractor={(item, index) => `sub${index}`} keyExtractor={(item, index) => `sub${index}`}
/> />
</View> </SlideUpModal>
</View> </View>
</Modal> </Modal>
{/* {this.renderTimerFab()} */} {/* {this.renderTimerFab()} */}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment