From 45730efb294c49e02e4dd02fb94812db88738708 Mon Sep 17 00:00:00 2001 From: Krzysztof Magiera Date: Fri, 3 Aug 2018 16:20:25 +0200 Subject: [PATCH] Add some examples --- Example/App.js | 252 ++++++------------ Example/container.js | 100 +++++++ .../img/dawid-zawila-628275-unsplash.jpg | Bin 0 -> 1288910 bytes .../img/dawid-zawila-715178-unsplash.jpg | Bin 0 -> 652705 bytes .../hires/dawid-zawila-628275-unsplash.jpg | Bin 0 -> 1288910 bytes .../hires/dawid-zawila-715178-unsplash.jpg | Bin 0 -> 652705 bytes .../hires/janusz-maniak-143024-unsplash.jpg | Bin 0 -> 1136015 bytes .../hires/janusz-maniak-272680-unsplash.jpg | Bin 0 -> 930413 bytes .../mariusz-prusaczyk-185182-unsplash.jpg | Bin 0 -> 1990990 bytes .../img/janusz-maniak-143024-unsplash.jpg | Bin 0 -> 1136015 bytes .../img/janusz-maniak-272680-unsplash.jpg | Bin 0 -> 930413 bytes .../img/mariusz-prusaczyk-185182-unsplash.jpg | Bin 0 -> 1990990 bytes Example/navigation/index.js | 125 +++++++++ Example/package.json | 5 +- Example/stack.js | 173 ++++++++++++ Example/yarn.lock | 125 ++++++++- 16 files changed, 599 insertions(+), 181 deletions(-) create mode 100644 Example/container.js create mode 100644 Example/navigation/img/dawid-zawila-628275-unsplash.jpg create mode 100644 Example/navigation/img/dawid-zawila-715178-unsplash.jpg create mode 100644 Example/navigation/img/hires/dawid-zawila-628275-unsplash.jpg create mode 100644 Example/navigation/img/hires/dawid-zawila-715178-unsplash.jpg create mode 100644 Example/navigation/img/hires/janusz-maniak-143024-unsplash.jpg create mode 100644 Example/navigation/img/hires/janusz-maniak-272680-unsplash.jpg create mode 100644 Example/navigation/img/hires/mariusz-prusaczyk-185182-unsplash.jpg create mode 100644 Example/navigation/img/janusz-maniak-143024-unsplash.jpg create mode 100644 Example/navigation/img/janusz-maniak-272680-unsplash.jpg create mode 100644 Example/navigation/img/mariusz-prusaczyk-185182-unsplash.jpg create mode 100644 Example/navigation/index.js create mode 100644 Example/stack.js diff --git a/Example/App.js b/Example/App.js index 1301b655..8b22c60b 100644 --- a/Example/App.js +++ b/Example/App.js @@ -1,196 +1,94 @@ -import React, { Component } from 'react'; +import React from 'react'; import { - StyleSheet, - Button, + Text, View, - TextInput, - Animated, - Easing, + FlatList, + StyleSheet, + TouchableHighlight, } from 'react-native'; -import { Screen, ScreenContainer, ScreenStack } from 'react-native-screens'; +import { createStackNavigator, createSwitchNavigator } from 'react-navigation'; -const COLORS = ['azure', 'pink', 'cyan']; +import Stack from './stack'; +import Container from './container'; +import Navigation from './navigation'; -export class Stack extends Component { - constructor(props) { - super(props); +const SCREENS = { + Stack: { screen: Stack, title: 'ScreenStack example' }, + Container: { screen: Container, title: 'ScreenContainer example' }, + Navigation: { screen: Navigation, title: 'React Navigation example' }, +}; - const progress = new Animated.Value(0); - const slideIn = progress.interpolate({ - inputRange: [0, 1], - outputRange: [320, 0], - }); - const slideOut = progress.interpolate({ - inputRange: [0, 1], - outputRange: [0, 320], - }); - const backSlideIn = progress.interpolate({ - inputRange: [0, 1], - outputRange: [-50, 0], - }); - const backSlideOut = progress.interpolate({ - inputRange: [0, 1], - outputRange: [0, -50], - }); - - this.state = { - stack: ['azure'], - transitioning: 0, - progress, - slideIn, - slideOut, - backSlideIn, - backSlideOut, - }; - } - push(key) { - this.setState({ stack: [...this.state.stack, key], transitioning: 1 }); - this.state.progress.setValue(0); - Animated.timing(this.state.progress, { - duration: 5000, - easing: Easing.out(Easing.quad), - toValue: 1, - useNativeDriver: true, - }).start(() => { - this.setState({ transitioning: 0 }); - }); - } - pop() { - this.setState({ transitioning: -1 }); - this.state.progress.setValue(0); - Animated.timing(this.state.progress, { - duration: 5000, - easing: Easing.out(Easing.quad), - toValue: 1, - useNativeDriver: true, - }).start(() => { - this.setState({ - transitioning: 0, - stack: this.state.stack.slice(0, -1), - }); - }); - } - renderScreen = (key, index) => { - let style = StyleSheet.absoluteFill; - const { stack, transitioning } = this.state; - if (index === stack.length - 1) { - if (transitioning > 0) { - style = { - ...StyleSheet.absoluteFillObject, - transform: [{ translateX: this.state.slideIn }], - }; - } else if (transitioning < 0) { - style = { - ...StyleSheet.absoluteFillObject, - transform: [{ translateX: this.state.slideOut }], - }; - } - } else if (index === stack.length - 2) { - if (transitioning > 0) { - style = { - ...StyleSheet.absoluteFillObject, - transform: [{ translateX: this.state.backSlideOut }], - }; - } else if (transitioning < 0) { - style = { - ...StyleSheet.absoluteFillObject, - transform: [{ translateX: this.state.backSlideIn }], - }; - } - } - const active = - index === stack.length - 1 || - (transitioning !== 0 && index === stack.length - 2); - return ( - - {this.props.renderScreen(key)} - - ); +class MainScreen extends React.Component { + static navigationOptions = { + title: '📱 React Native Screens Examples', }; render() { - const screens = this.state.stack.map(this.renderScreen); + const data = Object.keys(SCREENS).map(key => ({ key })); return ( - - {screens} - - ); - // return ( - // {screens} - // ); - } -} - -// class Inner extends Component { -// state = { size: 20, display: 'flex' }; -// componentDidMount() { -// setInterval(() => { -// this.setState({ size: Math.random() * 10 + 10 }); -// }, 1500); -// setTimeout(() => this.setState({ display: 'none' }), 2000); -// } -// render() { -// return ( -// -// -// -// ); -// } -// } - -class App extends Component { - renderScreen = key => { - const index = COLORS.indexOf(key); - const color = key; - const pop = index > 0 ? () => this.stack.pop() : null; - const push = index < 2 ? () => this.stack.push(COLORS[index + 1]) : null; - return ( - - {pop &&