This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState } from 'react' | |
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native' | |
import Modal from './Modal' | |
const App = () => { | |
const [modal, setModal] = useState(false) | |
return( | |
<View style={styles.container}> | |
<Text style={styles.title}>Animated Modal RN</Text> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const closeModal = () => { | |
Animated.sequence([ | |
Animated.timing(state.modal, { toValue: height, duration: 250, useNativeDriver: true }), | |
Animated.timing(state.opacity, { toValue: 0, duration: 300 }), | |
Animated.timing(state.container, { toValue: height, duration: 100 }) | |
]).start() | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const openModal = () => { | |
Animated.sequence([ | |
Animated.timing(state.container, { toValue: 0, duration: 100 }), | |
Animated.timing(state.opacity, { toValue: 1, duration: 300 }), | |
Animated.spring(state.modal, { toValue: 0, bounciness: 5, useNativeDriver: true }) | |
]).start() | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const openModal = () => { | |
Animated.sequence([ | |
Animated.timing(state.container, { toValue: 0, duration: 100 }), | |
Animated.timing(state.opacity, { toValue: 1, duration: 300 }), | |
Animated.spring(state.modal, { toValue: 0, bounciness: 5, useNativeDriver: true }) | |
]).start() | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState } from 'react' | |
import { View, Text, StyleSheet, TouchableOpacity, Animated, Dimensions } from 'react-native' | |
const { height } = Dimensions.get('window') | |
const Modal = () => { | |
const [state, setState] = useState({ | |
opacity: new Animated.Value(0), | |
container: new Animated.Value(height), | |
modal: new Animated.Value(height) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native' | |
const Modal = () => { | |
return( | |
<View style={styles.container}> | |
<View style={styles.modal}> | |
<View style={styles.indicator} /> | |
<Text style={styles.text}> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native' | |
const App = () => { | |
return( | |
<View style={styles.container}> | |
<Text style={styles.title}>Animated Modal RN</Text> | |
<TouchableOpacity style={styles.button}> | |
<Text>Open Modal</Text> | |
</TouchableOpacity> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
react-native init animated_modal_rn |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { hot } from 'react-hot-loader/root' | |
import React, { Component, createRef } from 'react' | |
import { $Page, $Label, $ActionBar, $GridLayout, $FormattedString, $Span, $Switch, $Frame } from 'react-nativescript' | |
import { ItemSpec } from 'tns-core-modules/ui/layouts/grid-layout/grid-layout' | |
import { Frame, Page } from 'tns-core-modules/ui/frame/frame' | |
class AppContainer extends Component { | |
pageRef = createRef(<Page />) | |
componentDidMount(){ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<Page class="page"> | |
<ActionBar class="action-bar"> | |
<Label class="action-bar-title" text="Timeline"></Label> | |
</ActionBar> | |
<ScrollView> | |
<StackLayout> | |
<Post /> | |
<Post /> |