update add timer, delete FAB,

screens/Private/TimerScreen/TimerScreen.js

@@ -131,24 +131,7 @@ export default class TimerScreen extends Component {
 				<HeaderItem title="menu" iconName="ios-menu" onPress={() => console.log('menu')} />
 			</HeaderButtons>
 		),
-		headerRight: (
-			<TouchableOpacity onPress={() => console.log('clicked')}>
-				<View style={{ marginRight: 17 }}>
-					<Icon name="ios-notifications" style={{ color: color.white }} />
-					<Badge
-						badgeStyle={{
-							width: 12,
-							height: 12,
-							borderWidth: 2,
-							borderRadius: 6,
-							backgroundColor: color.warnning,
-							borderColor: color.primary,
-						}}
-						containerStyle={{ position: 'absolute', top: -2, right: -4 }}
-					/>
-				</View>
-			</TouchableOpacity>
-		),
+		headerRight: navigation.state.params ? navigation.state.params.headerRight : null,
 	});
 
 	state = {
@@ -171,23 +154,24 @@ export default class TimerScreen extends Component {
 		search: '',
 		test: new Animated.Value(height * 1),
 	};
+	componentDidMount() {
+		this.props.navigation.setParams({
+			headerRight: (
+				<TouchableOpacity
+					onPress={() =>
+						this.setState({
+							isVisible: true,
+						})
+					}
+				>
+					<View style={{ marginRight: 17 }}>
+						<Icon name="ios-add" style={{ color: color.white }} />
+					</View>
+				</TouchableOpacity>
+			),
+		});
+	}
 
-	renderTimerFab = () => {
-		return (
-			<Fab
-				containerStyle={{
-					bottom: '15%',
-					// right: '50%', // centerFAB
-					// marginRight: -28,
-				}}
-				style={{ backgroundColor: color.primary }}
-				position="bottomRight"
-				onPress={() => this.setState({ isVisible: true })}
-			>
-				<Icon name="add" />
-			</Fab>
-		);
-	};
 	autoClose = swipeInstance => {
 		if (this.currentlyOpenSwipe && this.currentlyOpenSwipe !== swipeInstance) {
 			this.currentlyOpenSwipe.close();
@@ -229,19 +213,8 @@ export default class TimerScreen extends Component {
 	};
 	onOpenModal = () => {
 		this.setState({
-			filterOpen: true,
+			isVisible: 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 (
@@ -287,7 +260,11 @@ export default class TimerScreen extends Component {
 					<Icon
 						name="md-funnel"
 						style={{ color: '#c7cad1', fontSize: 14, marginLeft: 10 }}
-						onPress={() => this.onOpenModal()}
+						onPress={() =>
+							this.setState({
+								filterOpen: true,
+							})
+						}
 					/>
 				</View>
 
@@ -318,10 +295,9 @@ export default class TimerScreen extends Component {
 					<FadeDimBG />
 					<View style={{ flex: 1, backgroundColor: 'transparent' }}>
 						<SlideUpModal ending={0.1} style={styles.scrollContainer}>
-							<ScrollView>
-								<Text style={theme.title}>Create Timer</Text>
-
-								<Text style={[theme.normalText, theme.textDark, theme.mt2]}>Set Time</Text>
+							<Text style={theme.title}>Create Timer</Text>
+							<ScrollView style={theme.mt2}>
+								<Text style={[theme.normalText, theme.textDark]}>Set Time</Text>
 								<DatePicker
 									date={this.state.timer}
 									onDateChange={date => this.setState({ timer: date })}
@@ -501,7 +477,6 @@ export default class TimerScreen extends Component {
 						</SlideUpModal>
 					</View>
 				</Modal>
-				{this.renderTimerFab()}
 
 				{/* Filter Modal */}
 				<Modal
@@ -601,7 +576,6 @@ export default class TimerScreen extends Component {
 						</SlideUpModal>
 					</View>
 				</Modal>
-				{/* {this.renderTimerFab()} */}
 			</>
 		);
 	}