react-native-gallery/index.android.js at master · uapasha/react-native-gallery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Navigator,
  TouchableHighlight,
  ToolbarAndroid,
} from 'react-native';

// import created modules
var Gallery = require('./Gallery');
var FullPageView = require('./FullPageView')

////////////// MAIN COMPONENT //////////////

class Greeting extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
            Welcome to 500px Image Gallery!
        </Text>
            <View style = {styles.buttonView}>
                <TouchableHighlight
                style = {styles.button}
                underlayColor='#99d9f4'
                onPress ={() => this.goToGallery()}>
                    <Text style = {styles.buttonText}>Want to see it! </Text>
                </TouchableHighlight>
            </View>
      </View>
    );
  }
  // navigation call
  goToGallery() {
    this.props.navigator.push({
      name:'Gallery',
      id: 'gallery'
    })
  }
  // trying t implement back handling but haven't yet succed
  onBack(){
    if (route.id) {
        this.props.navigator.pop();
    }
  }
}

////////////// NAVIGATOR //////////////

class Navigation extends Component{ //PropertyFinderApp
  render() {
    return (
        <Navigator
          initialRoute={{name: 'Hello!', id: 'greeting'}}
          renderScene={this.navigatorRenderScene}/>
    );
  }
  navigatorRenderScene(route, navigator) {
    switch(route.id){
        case 'greeting':
            return (<Greeting
                        navigator = {navigator}
                        title = 'Home'/>);
        case 'gallery':
            return (<Gallery
                        navigator = {navigator}
                        title = 'Gallery'
                        onBack={() => {
                            console.log('Back!')
                            navigator.pop();
                        }} />
            );
        default:
            if ((route.id).indexOf('fullScreen') > -1) {
                // get id of photo that were clicked
                var image_id =(route.id).split('_')[1]
                return (<FullPageView
                            navigator = {navigator}
                            title= 'FullPageView'
                            image_id = {image_id}/>
                );
            } else {
                return (<Text>
                        Something went wrong! {route.id}
                        </Text>)
            }
    }
  }
}

////////////// STYLES //////////
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  buttonView: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'stretch',
    justifyContent: 'center',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    marginBottom: 120,
    marginTop: 120,
  },
  buttonText: {
    fontSize: 28,
    color: 'white',
    alignSelf: 'center',
  },
  button: {
    height: 46,
    flex: 1,
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
});

// register app
AppRegistry.registerComponent('ImageGallery', () => Navigation);