Skip to content

Instantly share code, notes, and snippets.

View rafaelaugustos's full-sized avatar
🏠
Working from home

Rafael Augusto rafaelaugustos

🏠
Working from home
View GitHub Profile
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>
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()
}
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()
}
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()
}
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)
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}>
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>
@rafaelaugustos
rafaelaugustos / create.shell
Created January 11, 2020 18:00
create a react native app
react-native init animated_modal_rn
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(){
@rafaelaugustos
rafaelaugustos / Home.vue
Created September 2, 2019 14:47
Home to Timeline Facebook
<template>
<Page class="page">
<ActionBar class="action-bar">
<Label class="action-bar-title" text="Timeline"></Label>
</ActionBar>
<ScrollView>
<StackLayout>
<Post />
<Post />