Kaynağa Gözat

Move example to origin

Elliot Hesp 7 yıl önce
ebeveyn
işleme
5641e4c733
65 değiştirilmiş dosya ile 1453 ekleme ve 1877 silme
  1. BIN
      example/img/delete@1x.png
  2. BIN
      example/img/delete@2x.png
  3. BIN
      example/img/edit@1x.png
  4. BIN
      example/img/edit@2x.png
  5. BIN
      example/img/masonry/158xD4xbeh.jpeg
  6. BIN
      example/img/masonry/37r6Cqp1B8.jpeg
  7. BIN
      example/img/masonry/5Gi8kova3k.jpeg
  8. BIN
      example/img/masonry/61mpAVRV73.jpeg
  9. BIN
      example/img/masonry/A4g0lZ33Z8.jpeg
  10. BIN
      example/img/masonry/AdGXmD1CH6.jpeg
  11. BIN
      example/img/masonry/Cfw87359UT.jpeg
  12. BIN
      example/img/masonry/N30E32431C.jpeg
  13. BIN
      example/img/masonry/a848dHxA4e.jpeg
  14. BIN
      example/img/masonry/j51Pva1P8L.jpeg
  15. BIN
      example/img/masonry/kVN0FryOZk.jpeg
  16. BIN
      example/img/masonry/pqgylg80SD.jpeg
  17. BIN
      example/img/masonry/rVOcz7rd0z.jpeg
  18. BIN
      example/img/masonry/ri90ueind7.jpeg
  19. BIN
      example/img/masonry/v8KLi2f0Tr.jpeg
  20. BIN
      example/img/masonry/xU42hx19BB.jpeg
  21. BIN
      example/img/swap@1x.png
  22. BIN
      example/img/swap@2x.png
  23. BIN
      example/img/transform@1x.png
  24. BIN
      example/img/transform@2x.png
  25. 48
    82
      example/src/app.js
  26. 41
    0
      example/src/components/Row.js
  27. 155
    0
      example/src/screens/Actions.js
  28. 0
    133
      example/src/screens/CollapsingTopBarScreen.android.js
  29. 0
    166
      example/src/screens/FirstTabScreen.js
  30. 0
    41
      example/src/screens/InAppNotification.js
  31. 0
    62
      example/src/screens/LightBoxScreen.js
  32. 0
    83
      example/src/screens/ModalScreen.js
  33. 0
    52
      example/src/screens/NotificationScreen.js
  34. 0
    82
      example/src/screens/PushedScreen.js
  35. 0
    146
      example/src/screens/SecondTabScreen.js
  36. 0
    94
      example/src/screens/SideMenu.js
  37. 0
    121
      example/src/screens/StyledScreen.js
  38. 37
    0
      example/src/screens/Transitions.js
  39. 99
    0
      example/src/screens/Types.js
  40. 0
    32
      example/src/screens/index.android.js
  41. 0
    28
      example/src/screens/index.ios.js
  42. 70
    0
      example/src/screens/index.js
  43. 0
    118
      example/src/screens/set/CardScreen.js
  44. 0
    216
      example/src/screens/set/HeroScreen.js
  45. 0
    126
      example/src/screens/set/InformationScreen.js
  46. 0
    235
      example/src/screens/set/ListScreen.js
  47. 0
    34
      example/src/screens/set/heroes.js
  48. 0
    26
      example/src/screens/set/styles.js
  49. 35
    0
      example/src/screens/transitions/CollapsingHeader.js
  50. 46
    0
      example/src/screens/transitions/SharedElementTransitions.js
  51. 106
    0
      example/src/screens/transitions/sharedElementTransitions/Cards/Cards.js
  52. 123
    0
      example/src/screens/transitions/sharedElementTransitions/Cards/Info.js
  53. 54
    0
      example/src/screens/transitions/sharedElementTransitions/Masonry/Item.js
  54. 98
    0
      example/src/screens/transitions/sharedElementTransitions/Masonry/Masonry.js
  55. 100
    0
      example/src/screens/transitions/sharedElementTransitions/Masonry/images.js
  56. 213
    0
      example/src/screens/transitions/sharedElementTransitions/Profiles/Profiles.js
  57. 32
    0
      example/src/screens/transitions/sharedElementTransitions/Profiles/data.js
  58. 25
    0
      example/src/screens/types/Drawer.js
  59. 41
    0
      example/src/screens/types/LightBox.js
  60. 24
    0
      example/src/screens/types/Modal.js
  61. 33
    0
      example/src/screens/types/Notification.js
  62. 24
    0
      example/src/screens/types/Push.js
  63. 19
    0
      example/src/screens/types/TopTabs.js
  64. 15
    0
      example/src/screens/types/tabs/TabOne.js
  65. 15
    0
      example/src/screens/types/tabs/TabTwo.js

BIN
example/img/delete@1x.png Dosyayı Görüntüle


BIN
example/img/delete@2x.png Dosyayı Görüntüle


BIN
example/img/edit@1x.png Dosyayı Görüntüle


BIN
example/img/edit@2x.png Dosyayı Görüntüle


BIN
example/img/masonry/158xD4xbeh.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/37r6Cqp1B8.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/5Gi8kova3k.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/61mpAVRV73.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/A4g0lZ33Z8.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/AdGXmD1CH6.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/Cfw87359UT.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/N30E32431C.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/a848dHxA4e.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/j51Pva1P8L.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/kVN0FryOZk.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/pqgylg80SD.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/rVOcz7rd0z.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/ri90ueind7.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/v8KLi2f0Tr.jpeg Dosyayı Görüntüle


BIN
example/img/masonry/xU42hx19BB.jpeg Dosyayı Görüntüle


BIN
example/img/swap@1x.png Dosyayı Görüntüle


BIN
example/img/swap@2x.png Dosyayı Görüntüle


BIN
example/img/transform@1x.png Dosyayı Görüntüle


BIN
example/img/transform@2x.png Dosyayı Görüntüle


+ 48
- 82
example/src/app.js Dosyayı Görüntüle

@@ -1,93 +1,59 @@
1
-import {
2
-  Platform
3
-} from 'react-native';
4
-import {Navigation} from 'react-native-navigation';
1
+import { Platform } from 'react-native';
2
+import { Navigation } from 'react-native-navigation';
3
+import registerScreens from './screens';
5 4
 
6 5
 // screen related book keeping
7
-import {registerScreens} from './screens';
8 6
 registerScreens();
9 7
 
10
-const SHOW_SHARED_ELEMENT_SCREENS = false;
8
+const tabs = [{
9
+    label: 'Navigation',
10
+    screen: 'example.Types',
11
+    icon: require('../img/list.png'),
12
+    title: 'Navigation Types',
13
+}, {
14
+    label: 'Actions',
15
+    screen: 'example.Actions',
16
+    icon: require('../img/swap.png'),
17
+    title: 'Navigation Actions',
18
+}];
11 19
 
12
-const createTabs = () => {
13
-  const sharedElementScreens = Platform.OS === 'android' ? [
14
-    {
15
-      label: 'Card',
16
-      screen: 'example.CardScreen',
17
-      icon: require('../img/list.png'),
18
-      title: 'Shared Element Transition'
19
-    },
20
-    {
21
-      label: 'SET',
22
-      screen: 'example.ListScreen',
23
-      icon: require('../img/list.png'),
24
-      title: 'Shared Element Transition'
25
-    }
26
-  ] : null;
27
-
28
-  let tabs = [
29
-    {
30
-      label: 'One',
31
-      screen: 'example.FirstTabScreen',
32
-      icon: require('../img/one.png'),
33
-      selectedIcon: require('../img/one_selected.png'),
34
-      title: 'Screen One'
35
-    },
36
-    {
37
-      label: 'Two',
38
-      screen: 'example.SecondTabScreen',
39
-      icon: require('../img/two.png'),
40
-      selectedIcon: require('../img/two_selected.png'),
41
-      title: 'Screen Two',
42
-      navigatorStyle: {
43
-        tabBarBackgroundColor: '#4dbce9',
44
-      }
45
-    }
46
-  ];
47
-  if (Platform.OS === 'android') {
20
+if (Platform.OS === 'android') {
48 21
     tabs.push({
49
-      label: 'Collapsing',
50
-      screen: 'example.CollapsingTopBarScreen',
51
-      icon: require('../img/one.png'),
52
-      title: 'Collapsing',
22
+        label: 'Transitions',
23
+        screen: 'example.Transitions',
24
+        icon: require('../img/transform.png'),
25
+        title: 'Navigation Transitions',
53 26
     });
54
-    if (SHOW_SHARED_ELEMENT_SCREENS) {
55
-      tabs = [...sharedElementScreens, ...tabs];
56
-    }
57
-  }
58
-  return tabs;
59
-};
27
+}
28
+
60 29
 // this will start our app
61 30
 Navigation.startTabBasedApp({
62
-  tabs: createTabs(),
63
-  appStyle: {
64
-    tabBarBackgroundColor: '#0f2362',
65
-    tabBarButtonColor: '#ffffff',
66
-    tabBarSelectedButtonColor: '#63d7cc',
67
-    tabFontFamily: 'BioRhyme-Bold',
68
-    forceTitlesDisplay: true
69
-  },
70
-  drawer: {
71
-    left: {
72
-      screen: 'example.SideMenu'
31
+    tabs,
32
+    tabsStyle: {
33
+        tabBarBackgroundColor: '#003a66',
34
+        navBarButtonColor: '#ffffff',
35
+        tabBarButtonColor: '#ffffff',
36
+        navBarTextColor: '#ffffff',
37
+        tabBarSelectedButtonColor: '#ff505c',
38
+        navigationBarColor: '#003a66',
39
+        navBarBackgroundColor: '#003a66',
40
+        statusBarColor: '#002b4c',
41
+        tabFontFamily: 'BioRhyme-Bold',
42
+    },
43
+    appStyle: {
44
+        tabBarBackgroundColor: '#003a66',
45
+        navBarButtonColor: '#ffffff',
46
+        tabBarButtonColor: '#ffffff',
47
+        navBarTextColor: '#ffffff',
48
+        tabBarSelectedButtonColor: '#ff505c',
49
+        navigationBarColor: '#003a66',
50
+        navBarBackgroundColor: '#003a66',
51
+        statusBarColor: '#002b4c',
52
+        tabFontFamily: 'BioRhyme-Bold',
53
+    },
54
+    drawer: {
55
+        left: {
56
+            screen: 'example.Types.Drawer'
57
+        }
73 58
     }
74
-  }
75 59
 });
76
-//Navigation.startSingleScreenApp({
77
-//  screen: {
78
-//    screen: 'example.FirstTabScreen',
79
-//    title: 'Navigation',
80
-//    navigatorStyle: {
81
-//      navBarBackgroundColor: '#4dbce9',
82
-//      navBarTextColor: '#ffff00',
83
-//      navBarSubtitleTextColor: '#ff0000',
84
-//      navBarButtonColor: '#ffffff',
85
-//      statusBarTextColorScheme: 'light'
86
-//    }
87
-//  },
88
-//  drawer: {
89
-//    left: {
90
-//      screen: 'example.SideMenu'
91
-//    }
92
-//  }
93
-//});

+ 41
- 0
example/src/components/Row.js Dosyayı Görüntüle

@@ -0,0 +1,41 @@
1
+import React, { PropTypes } from 'react';
2
+import { StyleSheet, View, Text, TouchableHighlight, Platform } from 'react-native';
3
+
4
+function Row({ title, onPress, platform }) {
5
+    if (platform && platform !== Platform.OS) {
6
+        return <View />;
7
+    }
8
+
9
+    return (
10
+        <TouchableHighlight
11
+            onPress={onPress}
12
+            underlayColor={'rgba(0, 0, 0, 0.054)'}
13
+        >
14
+            <View style={styles.row}>
15
+                <Text style={styles.text}>{title}</Text>
16
+            </View>
17
+        </TouchableHighlight>
18
+    );
19
+}
20
+
21
+Row.propTypes = {
22
+    title: PropTypes.string.isRequired,
23
+    onPress: PropTypes.func.isRequired,
24
+};
25
+
26
+const styles = StyleSheet.create({
27
+    row: {
28
+        height: 48,
29
+        paddingHorizontal: 16,
30
+        flexDirection: 'row',
31
+        alignItems: 'center',
32
+        justifyContent: 'center',
33
+        borderBottomWidth: 1,
34
+        borderBottomColor: 'rgba(0, 0, 0, 0.054)',
35
+    },
36
+    text: {
37
+        fontSize: 16,
38
+    },
39
+});
40
+
41
+export default Row;

+ 155
- 0
example/src/screens/Actions.js Dosyayı Görüntüle

@@ -0,0 +1,155 @@
1
+import React from 'react';
2
+import { StyleSheet, ScrollView } from 'react-native';
3
+import Row from '../components/Row';
4
+
5
+class Actions extends React.Component {
6
+
7
+    constructor() {
8
+        super();
9
+
10
+        this._fab = false;
11
+        this._rightButton = null;
12
+        this._contextualMenu = false;
13
+        this._toggleTabs = 'shown';
14
+        this._toggleNavBar = 'shown';
15
+    }
16
+
17
+    setTitle = () => {
18
+        this.props.navigator.setTitle({
19
+            title: 'New Title!',
20
+        });
21
+    };
22
+
23
+    toggleTabs = () => {
24
+        const to = this._toggleTabs === 'shown' ? 'hidden' : 'shown';
25
+
26
+        this.props.navigator.toggleTabs({
27
+            to,
28
+            animated: true,
29
+        });
30
+        this._toggleTabs = to;
31
+    };
32
+
33
+    setTabBadge = () => {
34
+        this.props.navigator.setTabBadge({
35
+            tabIndex: 1,
36
+            badge: Math.floor(Math.random() * 20) + 1,
37
+        });
38
+    };
39
+
40
+    switchToTab = () => {
41
+        this.props.navigator.switchToTab({
42
+            tabIndex: 0,
43
+        });
44
+    };
45
+
46
+    toggleNavBar = () => {
47
+        const to = this._toggleNavBar === 'shown' ? 'hidden' : 'shown';
48
+
49
+        this.props.navigator.toggleNavBar({
50
+            to,
51
+            animated: true,
52
+        });
53
+        this._toggleNavBar = to;
54
+    };
55
+
56
+    showSnackbar = () => {
57
+        this.props.navigator.showSnackbar({
58
+            title: 'Woo Snacks!',
59
+        });
60
+    };
61
+
62
+    toggleContextualMenu = () => {
63
+        if (!this._contextualMenu) {
64
+            this.props.navigator.showContextualMenu({
65
+                rightButtons: [{
66
+                    title: 'Edit',
67
+                    icon: require('../../img/edit.png'),
68
+                }, {
69
+                    title: 'Delete',
70
+                    icon: require('../../img/delete.png'),
71
+                }],
72
+                onButtonPressed: (index) => console.log(`Button ${index} tapped`)
73
+            });
74
+            this._contextualMenu = true;
75
+        } else {
76
+            this.props.navigator.dismissContextualMenu();
77
+            this._contextualMenu = false;
78
+        }
79
+
80
+    };
81
+
82
+    setButtons = () => {
83
+        let title = '';
84
+
85
+        if (!this._rightButton) {
86
+            title = 'Hello';
87
+        } else if (this._rightButton === 'Hello') {
88
+            title = 'Its Me';
89
+        }
90
+
91
+        this.props.navigator.setButtons({
92
+            rightButtons: [{
93
+                title,
94
+                id: 'topRight',
95
+            }],
96
+            animated: true,
97
+        });
98
+        this._rightButton = title;
99
+    };
100
+
101
+    toggleFAB = () => {
102
+        if (this._fab) {
103
+            this.props.navigator.setButtons({
104
+                fab: {},
105
+            });
106
+            this._fab = false;
107
+        } else {
108
+            this.props.navigator.setButtons({
109
+                fab: {
110
+                    collapsedId: 'share',
111
+                    collapsedIcon: require('../../img/edit@1x.png'),
112
+                    expendedId: 'clear',
113
+                    expendedIcon: require('../../img/edit@1x.png'),
114
+                    backgroundColor: '#ff505c',
115
+                    actions: [
116
+                        {
117
+                            id: 'mail',
118
+                            icon: require('../../img/edit@1x.png'),
119
+                            backgroundColor: '#03A9F4'
120
+                        },
121
+                        {
122
+                            id: 'delete',
123
+                            icon: require('../../img/delete@1x.png'),
124
+                            backgroundColor: '#4CAF50'
125
+                        }
126
+                    ]
127
+                },
128
+                animated: true,
129
+            });
130
+            this._fab = true;
131
+        }
132
+    };
133
+
134
+    render() {
135
+        return (
136
+            <ScrollView style={styles.container}>
137
+                <Row title={'Set Title'} onPress={this.setTitle} />
138
+                <Row title={'Toggle Tabs'} onPress={this.toggleTabs} />
139
+                <Row title={'Set Tab Badge'} onPress={this.setTabBadge} />
140
+                <Row title={'Switch To Tab 0'} onPress={this.switchToTab} />
141
+                <Row title={'Toggle Nav Bar'} onPress={this.toggleNavBar} />
142
+                <Row title={'Show Snackbar'} onPress={this.showSnackbar} platform={'android'} />
143
+                <Row title={'Toggle Contextual Menu'} onPress={this.toggleContextualMenu} platform={'android'} />
144
+                <Row title={'Set Right Buttons'} onPress={this.setButtons} />
145
+                <Row title={'Toggle FAB'} onPress={this.toggleFAB} platform={'android'} />
146
+            </ScrollView>
147
+        );
148
+    }
149
+}
150
+
151
+const styles = StyleSheet.create({
152
+    container: {},
153
+});
154
+
155
+export default Actions;

+ 0
- 133
example/src/screens/CollapsingTopBarScreen.android.js Dosyayı Görüntüle

@@ -1,133 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  Text,
4
-  View,
5
-  ScrollView,
6
-  TouchableOpacity,
7
-  StyleSheet,
8
-} from 'react-native';
9
-
10
-// collapsingToolBarImage: require('../../img/gyro_header.jpg'),
11
-// collapsingToolBarImage: "https://static.wixstatic.com/media/ec14061b42d1dc5b809367f7cfda8eff.jpg/v1/fill/w_1002,h_499,q_80/ec14061b42d1dc5b809367f7cfda8eff.webp",
12
-
13
-export default class ThirdTabScreen extends Component {
14
-  static navigatorStyle = {
15
-    drawUnderTabBar: true,
16
-    navBarButtonColor: '#ffffff',
17
-    navBarTextColor: '#ffffff',
18
-    collapsingToolBarImage: require('../../img/gyro_header.jpg'),
19
-    collapsingToolBarCollapsedColor: '#0f2362',
20
-    navBarBackgroundColor: '#eeeeee'
21
-  };
22
-
23
-  static navigatorButtons = {
24
-    rightButtons: [
25
-      {
26
-        title: 'Edit',
27
-        id: 'edit'
28
-      },
29
-      {
30
-        icon: require('../../img/navicon_add.png'),
31
-        id: 'add'
32
-      }
33
-    ]
34
-  };
35
-
36
-  constructor(props) {
37
-    super(props);
38
-    this.state = {
39
-      navBarVisibility: 'shown'
40
-    }
41
-  }
42
-  render() {
43
-    return (
44
-        <ScrollView style={styles.container}>
45
-          <View style={{flex: 1, backgroundColor: '#ffffff'}}>
46
-            <Text style={styles.button}>Row 0</Text>
47
-            <Text style={styles.button}>Row 1</Text>
48
-            <Text style={styles.button}>Row 2</Text>
49
-            <Text style={styles.button}>Row 3</Text>
50
-            <Text style={styles.button}>Row 4</Text>
51
-            <Text style={styles.button}>Row 5</Text>
52
-            <Text style={styles.button}>Row 6</Text>
53
-            <Text style={styles.button}>Row 7</Text>
54
-            <Text style={styles.button}>Row 8</Text>
55
-
56
-            <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
57
-              <Text style={styles.button}>Push Plain Screen</Text>
58
-            </TouchableOpacity>
59
-
60
-            <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
61
-              <Text style={styles.button}>Push Styled Screen</Text>
62
-            </TouchableOpacity>
63
-
64
-            <TouchableOpacity onPress={ this.onPushStyled2Press.bind(this) }>
65
-              <Text style={styles.button}>Push Styled Screen 2</Text>
66
-            </TouchableOpacity>
67
-
68
-            <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
69
-              <Text style={styles.button}>Show Modal Screen</Text>
70
-            </TouchableOpacity>
71
-
72
-            <TouchableOpacity onPress={ this.onToggleNavBarPressed.bind(this) }>
73
-              <Text style={styles.button}>Toggle Navigation Bar</Text>
74
-            </TouchableOpacity>
75
-          </View>
76
-        </ScrollView>
77
-    );
78
-  }
79
-  onPushPress() {
80
-    this.props.navigator.push({
81
-      title: "More",
82
-      screen: "example.PushedScreen"
83
-    });
84
-  }
85
-  onPushStyledPress() {
86
-    this.props.navigator.push({
87
-      title: "Styled",
88
-      screen: "example.StyledScreen"
89
-    });
90
-  }
91
-  onPushStyled2Press () {
92
-    this.props.navigator.push({
93
-      title: "Styled",
94
-      titleImage: require('../../img/two.png'),
95
-      screen: "example.StyledScreen"
96
-    });
97
-  }
98
-  onModalPress() {
99
-    this.props.navigator.showModal({
100
-      title: "Modal",
101
-      screen: "example.ModalScreen"
102
-    });
103
-  }
104
-
105
-  onToggleNavBarPressed() {
106
-    this.state.navBarVisibility = (this.state.navBarVisibility === 'shown') ? 'hidden' : 'shown';
107
-    this.props.navigator.toggleNavBar({
108
-      to: this.state.navBarVisibility,
109
-      animated: true  // true is default
110
-    });
111
-  }
112
-
113
-  componentDidUpdate() {
114
-    console.error('this is an error: ' + Math.random());
115
-    this.state.navBarState = 'shown';
116
-  }
117
-
118
-}
119
-
120
-const styles = StyleSheet.create({
121
-  container: {
122
-    flex: 1,
123
-    padding: 20,
124
-    backgroundColor: '#eeeeee'
125
-  },
126
-  button: {
127
-    textAlign: 'center',
128
-    fontSize: 18,
129
-    marginBottom: 10,
130
-    marginTop:30,
131
-    color: 'blue'
132
-  }
133
-});

+ 0
- 166
example/src/screens/FirstTabScreen.js Dosyayı Görüntüle

@@ -1,166 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  Text,
4
-  View,
5
-  TouchableOpacity,
6
-  StyleSheet,
7
-  Alert,
8
-  Platform
9
-} from 'react-native';
10
-import {Navigation} from 'react-native-navigation';
11
-
12
-export default class FirstTabScreen extends Component {
13
-  static navigatorButtons = {
14
-    leftButtons: [{
15
-      icon: require('../../img/navicon_menu.png'),
16
-      id: 'menu'
17
-    }],
18
-    rightButtons: [
19
-      {
20
-        title: 'Edit',
21
-        id: 'edit'
22
-      },
23
-      {
24
-        icon: require('../../img/navicon_add.png'),
25
-        id: 'add'
26
-      }
27
-    ]
28
-  };
29
-  static navigatorStyle = {
30
-    navBarBackgroundColor: '#4dbce9',
31
-    navBarTextColor: '#ffff00',
32
-    navBarSubtitleTextColor: '#ff0000',
33
-    navBarButtonColor: '#ffffff',
34
-    statusBarTextColorScheme: 'light',
35
-    tabBarBackgroundColor: '#4dbce9',
36
-    tabBarButtonColor: '#ffffff',
37
-    tabBarSelectedButtonColor: '#ffff00',
38
-  };
39
-
40
-  constructor(props) {
41
-    super(props);
42
-    // if you want to listen on navigator events, set this up
43
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
44
-  }
45
-
46
-  onNavigatorEvent(event) {
47
-    if (event.id === 'menu') {
48
-      this.props.navigator.toggleDrawer({
49
-        side: 'left',
50
-        animated: true
51
-      });
52
-    }
53
-    if (event.id === 'edit') {
54
-      Alert.alert('NavBar', 'Edit button pressed');
55
-    }
56
-    if (event.id === 'add') {
57
-      Alert.alert('NavBar', 'Add button pressed');
58
-    }
59
-  }
60
-
61
-  render() {
62
-    return (
63
-      <View style={{flex: 1, padding: 20}}>
64
-        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
65
-          <Text style={styles.button}>Push Plain Screen</Text>
66
-        </TouchableOpacity>
67
-
68
-        <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
69
-          <Text style={styles.button}>Push Styled Screen</Text>
70
-        </TouchableOpacity>
71
-
72
-        <TouchableOpacity onPress={ this.onPushCustomNavBarScreen.bind(this) }>
73
-          <Text style={styles.button}>Push Custom Navigation Bar Screen</Text>
74
-        </TouchableOpacity>
75
-
76
-        <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
77
-          <Text style={styles.button}>Show Modal Screen</Text>
78
-        </TouchableOpacity>
79
-
80
-        <TouchableOpacity onPress={ this.onLightBoxPress.bind(this) }>
81
-          <Text style={styles.button}>Show LightBox</Text>
82
-        </TouchableOpacity>
83
-
84
-        {
85
-          Platform.OS === 'ios' ?
86
-            <TouchableOpacity onPress={ this.onInAppNotificationPress.bind(this) }>
87
-              <Text style={styles.button}>Show In-App Notification</Text>
88
-            </TouchableOpacity> : false
89
-        }
90
-
91
-        <TouchableOpacity onPress={ this.onStartSingleScreenApp.bind(this) }>
92
-          <Text style={styles.button}>Show Single Screen App</Text>
93
-        </TouchableOpacity>
94
-      </View>
95
-    );
96
-  }
97
-
98
-  onPushPress() {
99
-    this.props.navigator.push({
100
-      title: "More",
101
-      screen: "example.PushedScreen"
102
-    });
103
-  }
104
-
105
-  onPushStyledPress() {
106
-    this.props.navigator.push({
107
-      title: "Styled",
108
-      screen: "example.StyledScreen"
109
-    });
110
-  }
111
-
112
-  onModalPress() {
113
-    this.props.navigator.showModal({
114
-      title: "Modal",
115
-      screen: "example.ModalScreen"
116
-    });
117
-  }
118
-
119
-  onLightBoxPress() {
120
-    this.props.navigator.showLightBox({
121
-      screen: "example.LightBoxScreen",
122
-      style: {
123
-        backgroundBlur: "dark"
124
-      },
125
-      passProps: {
126
-        greeting: 'hey there'
127
-      },
128
-    });
129
-  }
130
-
131
-  onInAppNotificationPress() {
132
-    this.props.navigator.showInAppNotification({
133
-      screen: "example.NotificationScreen"
134
-    });
135
-  }
136
-
137
-  onStartSingleScreenApp() {
138
-    Navigation.startSingleScreenApp({
139
-      screen: {
140
-        screen: 'example.FirstTabScreen'
141
-      },
142
-      drawer: {
143
-        left: {
144
-          screen: 'example.SideMenu'
145
-        }
146
-      }
147
-    });
148
-  }
149
-
150
-  onPushCustomNavBarScreen() {
151
-    this.props.navigator.push({
152
-      title: "Custom Nav Bar",
153
-      screen: "example.CustomNavBarScreen"
154
-    });
155
-  }
156
-}
157
-
158
-const styles = StyleSheet.create({
159
-  button: {
160
-    textAlign: 'center',
161
-    fontSize: 18,
162
-    marginBottom: 10,
163
-    marginTop: 10,
164
-    color: 'blue'
165
-  }
166
-});

+ 0
- 41
example/src/screens/InAppNotification.js Dosyayı Görüntüle

@@ -1,41 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  Text,
4
-  View,
5
-  TouchableHighlight,
6
-  StyleSheet,
7
-  Alert
8
-} from 'react-native';
9
-
10
-const styleSheet = StyleSheet.create({
11
-  container: {
12
-    height: 120,
13
-    backgroundColor: 'white',
14
-    alignItems: 'center',
15
-    justifyContent: 'center',
16
-  }
17
-});
18
-
19
-let globalCounter = 0;
20
-export default class InAppNotification extends Component {
21
-
22
-  constructor(props) {
23
-    super(props);
24
-    this._counter = globalCounter++;
25
-  }
26
-
27
-  render() {
28
-    const message = `I'm notification #${this._counter}!`;
29
-    return (
30
-      <View style={styleSheet.container}>
31
-          <Text style={{color: 'black', fontSize: 20}}>{message}</Text>
32
-          <TouchableHighlight onPress={() => {
33
-            this.props.navigator.dismissInAppNotification();
34
-            Alert.alert(`You've tapped on notification #${this._counter}`, 'We hope you had fun!');
35
-          }}>
36
-            <Text>Tap Me</Text>
37
-          </TouchableHighlight>
38
-      </View>
39
-    );
40
-  }
41
-}

+ 0
- 62
example/src/screens/LightBoxScreen.js Dosyayı Görüntüle

@@ -1,62 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  StyleSheet,
4
-  Text,
5
-  View,
6
-  TouchableOpacity,
7
-  Dimensions
8
-} from 'react-native';
9
-
10
-export default class LightBoxScreen extends Component {
11
-  constructor(props) {
12
-    super(props);
13
-  }
14
-  render() {
15
-    return (
16
-      <View style={styles.container}>
17
-        <Text style={styles.welcome}>
18
-          This is a LightBox!
19
-        </Text>
20
-        {
21
-          this.props.greeting &&
22
-            <Text style={[styles.welcome, {fontSize: 16, marginTop: 20}]}>
23
-              {this.props.greeting}
24
-            </Text>
25
-        }
26
-        <TouchableOpacity onPress={() => this.onDismissPress()}>
27
-          <Text style={styles.button}>Dismiss</Text>
28
-        </TouchableOpacity>
29
-      </View>
30
-    );
31
-  }
32
-  onDismissPress() {
33
-    this.props.navigator.dismissLightBox();
34
-  }
35
-}
36
-
37
-const styles = StyleSheet.create({
38
-  container: {
39
-    width: Dimensions.get('window').width * 0.8,
40
-    justifyContent: 'center',
41
-    alignItems: 'center',
42
-    backgroundColor: 'white',
43
-    borderRadius: 10
44
-  },
45
-  welcome: {
46
-    fontSize: 20,
47
-    textAlign: 'center',
48
-    margin: 10,
49
-  },
50
-  instructions: {
51
-    textAlign: 'center',
52
-    color: '#333333',
53
-    marginBottom: 5,
54
-  },
55
-  button: {
56
-    textAlign: 'center',
57
-    fontSize: 18,
58
-    marginBottom: 10,
59
-    marginTop:10,
60
-    color: 'blue'
61
-  }
62
-});

+ 0
- 83
example/src/screens/ModalScreen.js Dosyayı Görüntüle

@@ -1,83 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  Text,
4
-  View,
5
-  ScrollView,
6
-  TouchableOpacity,
7
-  StyleSheet
8
-} from 'react-native';
9
-
10
-export default class ModalScreen extends Component {
11
-  static navigatorButtons = {
12
-    leftButtons: [{
13
-      title: 'Close',
14
-      id: 'close'
15
-    }]
16
-  };
17
-  constructor(props) {
18
-    super(props);
19
-    // if you want to listen on navigator events, set this up
20
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
21
-  }
22
-  render() {
23
-    return (
24
-      <View style={styles.container}>
25
-
26
-        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
27
-          <Text style={styles.button}>Push Plain Screen</Text>
28
-        </TouchableOpacity>
29
-
30
-        <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
31
-          <Text style={styles.button}>Push Styled Screen</Text>
32
-        </TouchableOpacity>
33
-
34
-        <TouchableOpacity onPress={ this.onClosePress.bind(this) }>
35
-          <Text style={styles.button}>Close Modal</Text>
36
-        </TouchableOpacity>
37
-
38
-        <TouchableOpacity onPress={ this.onCloseAllPress.bind(this) }>
39
-          <Text style={styles.button}>Close All Modals</Text>
40
-        </TouchableOpacity>
41
-
42
-      </View>
43
-    );
44
-  }
45
-  onNavigatorEvent(event) {
46
-    if (event.id == 'close') {
47
-      this.props.navigator.dismissModal();
48
-    }
49
-  }
50
-  onPushPress() {
51
-    this.props.navigator.push({
52
-      title: "More",
53
-      screen: "example.PushedScreen"
54
-    });
55
-  }
56
-  onPushStyledPress() {
57
-    this.props.navigator.push({
58
-      title: "More",
59
-      screen: "example.StyledScreen"
60
-    });
61
-  }
62
-  onClosePress() {
63
-    this.props.navigator.dismissModal();
64
-  }
65
-  onCloseAllPress() {
66
-    this.props.navigator.dismissAllModals();
67
-  }
68
-}
69
-
70
-const styles = StyleSheet.create({
71
-  container: {
72
-    flex: 1,
73
-    backgroundColor: 'white',
74
-    padding: 20
75
-  },
76
-  button: {
77
-    textAlign: 'center',
78
-    fontSize: 18,
79
-    marginBottom: 10,
80
-    marginTop:10,
81
-    color: 'blue'
82
-  }
83
-});

+ 0
- 52
example/src/screens/NotificationScreen.js Dosyayı Görüntüle

@@ -1,52 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  StyleSheet,
4
-  Text,
5
-  View,
6
-  TouchableOpacity,
7
-  Dimensions
8
-} from 'react-native';
9
-
10
-export default class NotificationScreen extends Component {
11
-  constructor(props) {
12
-    super(props);
13
-  }
14
-  render() {
15
-    return (
16
-      <View style={styles.container}>
17
-        <Text style={styles.welcome}>
18
-          This is a Notification!
19
-        </Text>
20
-        <TouchableOpacity onPress={ this.onDismissPress.bind(this) }>
21
-          <Text style={styles.button}>Dismiss</Text>
22
-        </TouchableOpacity>
23
-      </View>
24
-    );
25
-  }
26
-  onDismissPress() {
27
-    this.props.navigator.dismissInAppNotification();
28
-  }
29
-}
30
-
31
-var styles = StyleSheet.create({
32
-  container: {
33
-    flex: 1,
34
-    width: Dimensions.get('window').width,
35
-    justifyContent: 'center',
36
-    alignItems: 'center',
37
-    backgroundColor: '#d6e7ad'
38
-  },
39
-  welcome: {
40
-    fontSize: 20,
41
-    textAlign: 'center',
42
-    margin: 10,
43
-    paddingTop: 20
44
-  },
45
-  button: {
46
-    textAlign: 'center',
47
-    fontSize: 18,
48
-    marginBottom: 10,
49
-    marginTop:10,
50
-    color: '#4692ad'
51
-  }
52
-});

+ 0
- 82
example/src/screens/PushedScreen.js Dosyayı Görüntüle

@@ -1,82 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  Text,
4
-  View,
5
-  ScrollView,
6
-  TouchableOpacity,
7
-  StyleSheet
8
-} from 'react-native';
9
-
10
-export default class PushedScreen extends Component {
11
-  static navigatorStyle = {
12
-    drawUnderTabBar: true
13
-  };
14
-  constructor(props) {
15
-    super(props);
16
-  }
17
-  render() {
18
-    return (
19
-      <View style={styles.container}>
20
-        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
21
-          <Text style={styles.button}>Push Plain Screen</Text>
22
-        </TouchableOpacity>
23
-
24
-        <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
25
-          <Text style={styles.button}>Push Styled Screen</Text>
26
-        </TouchableOpacity>
27
-
28
-        <TouchableOpacity onPress={ this.onPopPress.bind(this) }>
29
-          <Text style={styles.button}>Pop Screen</Text>
30
-        </TouchableOpacity>
31
-
32
-        <TouchableOpacity onPress={ this.onPopToRootPress.bind(this) }>
33
-          <Text style={styles.button}>Pop To Root</Text>
34
-        </TouchableOpacity>
35
-
36
-        <TouchableOpacity onPress={ this.onResetToPress.bind(this) }>
37
-          <Text style={styles.button}>Reset To</Text>
38
-        </TouchableOpacity>
39
-      </View>
40
-    );
41
-  }
42
-  onPushPress() {
43
-    this.props.navigator.push({
44
-      title: "More",
45
-      screen: "example.PushedScreen"
46
-    });
47
-  }
48
-  onPushStyledPress() {
49
-    this.props.navigator.push({
50
-      title: "More",
51
-      screen: "example.StyledScreen"
52
-    });
53
-  }
54
-  onPopPress() {
55
-    this.props.navigator.pop();
56
-  }
57
-  onPopToRootPress() {
58
-    this.props.navigator.popToRoot();
59
-  }
60
-  onResetToPress() {
61
-    this.props.navigator.resetTo({
62
-      title: "New Root",
63
-      screen: "example.StyledScreen",
64
-      animated: true
65
-    });
66
-  }
67
-}
68
-
69
-const styles = StyleSheet.create({
70
-  container: {
71
-    flex: 1,
72
-    padding: 20,
73
-    backgroundColor: 'white'
74
-  },
75
-  button: {
76
-    textAlign: 'center',
77
-    fontSize: 18,
78
-    marginBottom: 10,
79
-    marginTop:10,
80
-    color: 'blue'
81
-  }
82
-});

+ 0
- 146
example/src/screens/SecondTabScreen.js Dosyayı Görüntüle

@@ -1,146 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  Text,
4
-  View,
5
-  ScrollView,
6
-  TouchableOpacity,
7
-  StyleSheet,
8
-  Alert
9
-} from 'react-native';
10
-
11
-export default class SecondTabScreen extends Component {
12
-  static navigatorStyle: {
13
-    drawUnderTabBar: true,
14
-    navBarBackgroundColor: '#4dbce9',
15
-    navBarTextColor: '#ffff00',
16
-    navBarSubtitleTextColor: '#ff0000',
17
-    navBarButtonColor: '#ffffff',
18
-    statusBarTextColorScheme: 'light'
19
-  };
20
-
21
-  constructor(props) {
22
-    super(props);
23
-    this.buttonsCounter = 0;
24
-    // if you want to listen on navigator events, set this up
25
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
26
-  }
27
-
28
-  render() {
29
-    return (
30
-      <View style={styles.container}>
31
-
32
-        <TouchableOpacity onPress={ this.onChangeButtonsPress.bind(this) }>
33
-          <Text style={styles.button}>Change Buttons</Text>
34
-        </TouchableOpacity>
35
-
36
-        <TouchableOpacity onPress={ this.onChangeTitlePress.bind(this) }>
37
-          <Text style={styles.button}>Change Title</Text>
38
-        </TouchableOpacity>
39
-
40
-        <TouchableOpacity onPress={ this.onSwitchTabPress.bind(this) }>
41
-          <Text style={styles.button}>Switch To Tab#1</Text>
42
-        </TouchableOpacity>
43
-
44
-        <TouchableOpacity onPress={ this.onSetTabBadgePress.bind(this) }>
45
-          <Text style={styles.button}>Set Tab Badge</Text>
46
-        </TouchableOpacity>
47
-
48
-        <TouchableOpacity onPress={ this.onToggleTabsPress.bind(this) }>
49
-          <Text style={styles.button}>Toggle Tabs</Text>
50
-        </TouchableOpacity>
51
-
52
-      </View>
53
-    );
54
-  }
55
-  onChangeTitlePress() {
56
-    this.props.navigator.setTitle({
57
-      title: Math.round(Math.random() * 100000).toString()
58
-    });
59
-  }
60
-  onChangeButtonsPress() {
61
-    let buttons;
62
-    if (this.buttonsCounter % 3 == 0) {
63
-      buttons = [
64
-        {
65
-          title: 'Edit',
66
-          id: 'edit',
67
-          disabled: true
68
-        },
69
-        {
70
-          icon: require('../../img/navicon_add.png'),
71
-          id: 'add'
72
-        }
73
-      ];
74
-    } else if (this.buttonsCounter % 3 == 1) {
75
-      buttons = [{
76
-        title: 'Save',
77
-        id: 'save'
78
-      }];
79
-    } else {
80
-      buttons = [];
81
-    }
82
-    this.buttonsCounter++;
83
-
84
-    this.props.navigator.setButtons({
85
-      rightButtons: buttons,
86
-      animated: true
87
-    });
88
-  }
89
-  onSwitchTabPress() {
90
-    this.props.navigator.switchToTab({
91
-      tabIndex: 0
92
-    });
93
-  }
94
-  onSetTabBadgePress() {
95
-    this.props.navigator.setTabBadge({
96
-      badge: 12
97
-    });
98
-  }
99
-  onToggleTabsPress() {
100
-    this.props.navigator.toggleTabs({
101
-      to: this.tabsHidden ? 'shown' : 'hidden'
102
-    });
103
-    this.tabsHidden = !this.tabsHidden;
104
-  }
105
-  onNavigatorEvent(event) {
106
-    // handle a deep link
107
-    if (event.type == 'DeepLink') {
108
-      const parts = event.link.split('/');
109
-      if (parts[0] == 'tab2') {
110
-        this.props.navigator.resetTo({
111
-          title: "Replaced Root",
112
-          screen: parts[1],
113
-          animated: true
114
-        });
115
-        this.props.navigator.switchToTab();
116
-      }
117
-    }
118
-    // handle a button press
119
-    if (event.type == 'NavBarButtonPress') {
120
-      if (event.id == 'edit') {
121
-        Alert.alert('NavBar', 'Dynamic Edit button pressed');
122
-      }
123
-      if (event.id == 'add') {
124
-        Alert.alert('NavBar', 'Dynamic Add button pressed');
125
-      }
126
-      if (event.id == 'save') {
127
-        Alert.alert('NavBar', 'Dynamic Save button pressed');
128
-      }
129
-    }
130
-  }
131
-}
132
-
133
-const styles = StyleSheet.create({
134
-  container: {
135
-    flex: 1,
136
-    padding: 20,
137
-    backgroundColor: 'white'
138
-  },
139
-  button: {
140
-    textAlign: 'center',
141
-    fontSize: 18,
142
-    marginBottom: 10,
143
-    marginTop:10,
144
-    color: 'blue'
145
-  }
146
-});

+ 0
- 94
example/src/screens/SideMenu.js Dosyayı Görüntüle

@@ -1,94 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  Text,
4
-  View,
5
-  ScrollView,
6
-  TouchableOpacity,
7
-  StyleSheet,
8
-  AlertIOS
9
-} from 'react-native';
10
-
11
-export default class SideMenu extends Component {
12
-  constructor(props) {
13
-    super(props);
14
-  }
15
-  render() {
16
-    return (
17
-      <View style={styles.container}>
18
-        <Text style={styles.title}>Side Menu</Text>
19
-
20
-        <TouchableOpacity onPress={ this.onReplaceTab2Press.bind(this) }>
21
-          <Text style={styles.button}>Replace Tab#2 Root</Text>
22
-        </TouchableOpacity>
23
-
24
-        <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
25
-          <Text style={styles.button}>Show Modal Screen</Text>
26
-        </TouchableOpacity>
27
-
28
-        <TouchableOpacity onPress={ this.onShowInAppNotification.bind(this) }>
29
-          <Text style={styles.button}>Show In-App Notification</Text>
30
-        </TouchableOpacity>
31
-
32
-    </View>
33
-    );
34
-  }
35
-  onReplaceTab2Press() {
36
-    this._toggleDrawer();
37
-    // push/pop navigator actions affect the navigation stack of the current screen only.
38
-    // since side menu actions are normally directed at sibling tabs, push/pop will
39
-    // not help us. the recommended alternative is to use deep links for this purpose
40
-    this.props.navigator.handleDeepLink({
41
-      link: "tab2/example.PushedScreen"
42
-    });
43
-  }
44
-
45
-  onModalPress() {
46
-    this._toggleDrawer();
47
-    this.props.navigator.showModal({
48
-      title: "Modal",
49
-      screen: "example.ModalScreen"
50
-    });
51
-  }
52
-
53
-  onShowInAppNotification() {
54
-    this._toggleDrawer();
55
-    this.props.navigator.showInAppNotification({
56
-      screen: "example.InAppNotification",
57
-      // autoDismiss: false,
58
-      // autoDismissTimerSec: 1,
59
-      // position: "bottom",
60
-    });
61
-  }
62
-
63
-  _toggleDrawer() {
64
-    this.props.navigator.toggleDrawer({
65
-      to: 'closed',
66
-      side: 'left',
67
-      animated: true
68
-    });
69
-  }
70
-}
71
-
72
-const styles = StyleSheet.create({
73
-  container: {
74
-    flex: 1,
75
-    alignItems: 'center',
76
-    backgroundColor: 'white',
77
-    justifyContent: 'center',
78
-    width: 300
79
-  },
80
-  title: {
81
-    textAlign: 'center',
82
-    fontSize: 18,
83
-    marginBottom: 10,
84
-    marginTop:10,
85
-    fontWeight: '500'
86
-  },
87
-  button: {
88
-    textAlign: 'center',
89
-    fontSize: 18,
90
-    marginBottom: 10,
91
-    marginTop:10,
92
-    color: 'blue'
93
-  }
94
-});

+ 0
- 121
example/src/screens/StyledScreen.js Dosyayı Görüntüle

@@ -1,121 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  Text,
4
-  View,
5
-  ScrollView,
6
-  TouchableOpacity,
7
-  Image,
8
-  StyleSheet,
9
-  Alert,
10
-  Platform
11
-} from 'react-native';
12
-
13
-export default class StyledScreen extends Component {
14
-  static navigatorStyle = {
15
-    drawUnderNavBar: true,
16
-    drawUnderTabBar: true,
17
-    navBarTranslucent: true
18
-  };
19
-  static navigatorButtons = {
20
-    rightButtons: [{
21
-      icon: require('../../img/navicon_edit.png'),
22
-      id: 'compose',
23
-      testID: 'e2e_is_awesome'
24
-    }]
25
-  };
26
-  constructor(props) {
27
-    super(props);
28
-    // if you want to listen on navigator events, set this up
29
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
30
-  }
31
-  render() {
32
-    return (
33
-      <ScrollView style={styles.container}>
34
-        <Image style={{width: undefined, height: 100}} source={require('../../img/colors.png')} />
35
-
36
-        <View style={{padding: 20}}>
37
-          <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
38
-            <Text style={styles.button}>Push Plain Screen</Text>
39
-          </TouchableOpacity>
40
-
41
-          <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
42
-            <Text style={styles.button}>Push Styled Screen</Text>
43
-          </TouchableOpacity>
44
-
45
-          <TouchableOpacity onPress={ this.onPopPress.bind(this) }>
46
-            <Text style={styles.button}>Pop Screen</Text>
47
-          </TouchableOpacity>
48
-  
49
-          <TouchableOpacity onPress={ this.onSetSubtitlePress.bind(this) }>
50
-            <Text style={styles.button}>Set Subtitle</Text>
51
-          </TouchableOpacity>
52
-  
53
-          <TouchableOpacity onPress={ this.onSetTitleImagePress.bind(this) }>
54
-            <Text style={styles.button}>Set Title Image</Text>
55
-          </TouchableOpacity>
56
-        </View>
57
-
58
-      </ScrollView>
59
-    );
60
-  }
61
-  onNavigatorEvent(event) {
62
-    if (event.id == 'compose') {
63
-      Alert.alert('NavBar', 'Compose button pressed');
64
-    }
65
-  }
66
-  onPushPress() {
67
-    this.props.navigator.push({
68
-      title: "More",
69
-      screen: "example.PushedScreen"
70
-    });
71
-  }
72
-  onPushStyledPress() {
73
-    this.props.navigator.push({
74
-      title: "More",
75
-      screen: "example.StyledScreen"
76
-    });
77
-  }
78
-  onPopPress() {
79
-    this.props.navigator.pop();
80
-  }
81
-  
82
-  onSetSubtitlePress() {
83
-    if (Platform.OS === 'android') {
84
-      this.props.navigator.setSubTitle({
85
-        subtitle: 'Subtitle'
86
-      });
87
-    } else {
88
-      this.props.navigator.setTitle({
89
-        title: 'title',
90
-        subtitle: 'subtitle',
91
-        navigatorStyle: {
92
-          navBarSubtitleTextColor: '#ff00ff',
93
-          navBarTextColor: '#ffff00'
94
-
95
-        }
96
-      })
97
-    }
98
-  }
99
-  
100
-  onSetTitleImagePress() {
101
-    this.props.navigator.setTitle({
102
-      title: 'title',
103
-      titleImage: require('../../img/one.png'),
104
-    })
105
-  }
106
-  
107
-}
108
-
109
-const styles = StyleSheet.create({
110
-  container: {
111
-    flex: 1,
112
-    backgroundColor: 'white'
113
-  },
114
-  button: {
115
-    textAlign: 'center',
116
-    fontSize: 18,
117
-    marginBottom: 10,
118
-    marginTop:10,
119
-    color: 'blue'
120
-  }
121
-});

+ 37
- 0
example/src/screens/Transitions.js Dosyayı Görüntüle

@@ -0,0 +1,37 @@
1
+import React from 'react';
2
+import { StyleSheet, ScrollView, Text } from 'react-native';
3
+import Row from '../components/Row';
4
+
5
+class Transitions extends React.Component {
6
+
7
+    showCollapsingHeader = () => {
8
+      this.props.navigator.showModal({
9
+          title: 'Collapsing Header',
10
+          screen: 'example.Transitions.CollapsingHeader',
11
+      });
12
+    };
13
+
14
+    showSharedElementTransitions = () => {
15
+        this.props.navigator.showModal({
16
+            title: 'Shared Element Transition Examples',
17
+            screen: 'example.Transitions.SharedElementTransitions',
18
+        });
19
+    };
20
+
21
+    render() {
22
+        return (
23
+            <ScrollView style={styles.container}>
24
+                <Row title={'Collapsing Header'} onPress={this.showCollapsingHeader} />
25
+                <Row title={'Shared Element Transition'} onPress={this.showSharedElementTransitions} />
26
+            </ScrollView>
27
+        );
28
+    }
29
+}
30
+
31
+const styles = StyleSheet.create({
32
+    container: {
33
+        flex: 1,
34
+    },
35
+});
36
+
37
+export default Transitions;

+ 99
- 0
example/src/screens/Types.js Dosyayı Görüntüle

@@ -0,0 +1,99 @@
1
+import React from 'react';
2
+import { StyleSheet, View, Text, ScrollView, TouchableHighlight } from 'react-native';
3
+import Row from '../components/Row';
4
+
5
+class Types extends React.Component {
6
+
7
+    toggleDrawer = () => {
8
+        this.props.navigator.toggleDrawer({
9
+            side: 'left',
10
+            animated: true
11
+        });
12
+    };
13
+
14
+    pushScreen = () => {
15
+        this.props.navigator.push({
16
+            screen: 'example.Types.Push',
17
+            title: 'New Screen',
18
+        });
19
+    };
20
+
21
+    pushTopTabsScreen = () => {
22
+        this.props.navigator.push({
23
+            screen: 'example.Types.TopTabs',
24
+            title: 'Top Tabs',
25
+            topTabs: [{
26
+                screenId: 'example.Types.TopTabs.TabOne',
27
+                title: 'Tab One',
28
+            }, {
29
+                screenId: 'example.Types.TopTabs.TabTwo',
30
+                title: 'Tab Two',
31
+            }],
32
+        });
33
+    };
34
+
35
+    showModal = () => {
36
+        this.props.navigator.showModal({
37
+            screen: 'example.Types.Modal',
38
+            title: 'Modal',
39
+        });
40
+    };
41
+
42
+    showLightBox = () => {
43
+        this.props.navigator.showLightBox({
44
+            screen: "example.Types.LightBox",
45
+            passProps: {
46
+                title: 'LightBox',
47
+                content: 'Hey there, I\'m a light box screen :D',
48
+                onClose: this.dismissLightBox,
49
+            },
50
+            style: {
51
+                backgroundBlur: 'dark',
52
+                backgroundColor: 'rgba(0, 0, 0, 0.7)',
53
+            }
54
+        });
55
+    };
56
+
57
+    dismissLightBox = () => {
58
+        this.props.navigator.dismissLightBox();
59
+    };
60
+
61
+    showInAppNotification = () => {
62
+        this.props.navigator.showInAppNotification({
63
+            screen: 'example.Types.Notification',
64
+        });
65
+    };
66
+
67
+    render() {
68
+        return (
69
+            <ScrollView style={styles.container}>
70
+                <Row title={'Toggle Drawer'} onPress={this.toggleDrawer} />
71
+                <Row title={'Push Screen'} onPress={this.pushScreen} />
72
+                <Row title={'Top Tabs Screen'} onPress={this.pushTopTabsScreen} platform={'android'} />
73
+                <Row title={'Show Modal'} onPress={this.showModal} />
74
+                <Row title={'Show Lightbox'} onPress={this.showLightBox} />
75
+                <Row title={'Show In-App Notification'} onPress={this.showInAppNotification} />
76
+            </ScrollView>
77
+        );
78
+    }
79
+}
80
+
81
+const styles = StyleSheet.create({
82
+    container: {
83
+        flex: 1,
84
+    },
85
+    row: {
86
+        height: 48,
87
+        paddingHorizontal: 16,
88
+        flexDirection: 'row',
89
+        alignItems: 'center',
90
+        justifyContent: 'center',
91
+        borderBottomWidth: 1,
92
+        borderBottomColor: 'rgba(0, 0, 0, 0.054)',
93
+    },
94
+    text: {
95
+        fontSize: 16,
96
+    },
97
+});
98
+
99
+export default Types;

+ 0
- 32
example/src/screens/index.android.js Dosyayı Görüntüle

@@ -1,32 +0,0 @@
1
-import {Navigation} from 'react-native-navigation';
2
-
3
-import FirstTabScreen from './FirstTabScreen';
4
-import SecondTabScreen from './SecondTabScreen';
5
-import PushedScreen from './PushedScreen';
6
-import StyledScreen from './StyledScreen';
7
-import SideMenu from './SideMenu';
8
-import ModalScreen from './ModalScreen';
9
-import CollapsingTopBarScreen from './CollapsingTopBarScreen';
10
-import InAppNotification from './InAppNotification';
11
-import LightBoxScreen from './LightBoxScreen';
12
-import ListScreen from './set/ListScreen';
13
-import HeroScreen from './set/HeroScreen';
14
-import CardScreen from './set/CardScreen';
15
-import InfoScreen from './set/InformationScreen';
16
-
17
-// register all screens of the app (including internal ones)
18
-export function registerScreens() {
19
-  Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
20
-  Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
21
-  Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
22
-  Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
23
-  Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
24
-  Navigation.registerComponent('example.SideMenu', () => SideMenu);
25
-  Navigation.registerComponent('example.CollapsingTopBarScreen', () => CollapsingTopBarScreen);
26
-  Navigation.registerComponent('example.InAppNotification', () => InAppNotification);
27
-  Navigation.registerComponent('example.LightBoxScreen', () => LightBoxScreen);
28
-  Navigation.registerComponent('example.ListScreen', () => ListScreen);
29
-  Navigation.registerComponent('example.HeroScreen', () => HeroScreen);
30
-  Navigation.registerComponent('example.CardScreen', () => CardScreen);
31
-  Navigation.registerComponent('example.infoScreen', () => InfoScreen);
32
-}

+ 0
- 28
example/src/screens/index.ios.js Dosyayı Görüntüle

@@ -1,28 +0,0 @@
1
-import {Navigation} from 'react-native-navigation';
2
-
3
-import FirstTabScreen from './FirstTabScreen';
4
-import SecondTabScreen from './SecondTabScreen';
5
-import PushedScreen from './PushedScreen';
6
-import StyledScreen from './StyledScreen';
7
-import SideMenu from './SideMenu';
8
-import ModalScreen from './ModalScreen';
9
-import NotificationScreen from './NotificationScreen';
10
-import LightBoxScreen from './LightBoxScreen';
11
-import CustomNavBarScreen from './CustomNavBarScreen';
12
-import CustomNavBar from './CustomNavBar';
13
-
14
-
15
-// register all screens of the app (including internal ones)
16
-export function registerScreens() {
17
-  Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
18
-  Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
19
-  Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
20
-  Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
21
-  Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
22
-  Navigation.registerComponent('example.NotificationScreen', () => NotificationScreen);
23
-  Navigation.registerComponent('example.SideMenu', () => SideMenu);
24
-  Navigation.registerComponent('example.LightBoxScreen', () => LightBoxScreen);
25
-
26
-  Navigation.registerComponent('example.CustomNavBarScreen', () => CustomNavBarScreen);
27
-  Navigation.registerComponent('example.CustomNavBar', () => CustomNavBar);
28
-}

+ 70
- 0
example/src/screens/index.js Dosyayı Görüntüle

@@ -0,0 +1,70 @@
1
+import { Navigation } from 'react-native-navigation';
2
+
3
+// import FirstTabScreen from './FirstTabScreen';
4
+// import SecondTabScreen from './SecondTabScreen';
5
+// import PushedScreen from './PushedScreen';
6
+// import StyledScreen from './StyledScreen';
7
+// import SideMenu from './SideMenu';
8
+// import ModalScreen from './ModalScreen';
9
+// import NotificationScreen from './NotificationScreen';
10
+// import LightBoxScreen from './LightBoxScreen';
11
+
12
+// register all screens of the app (including internal ones)
13
+// export function registerScreens() {
14
+//   Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
15
+//   Navigation.registerComponent('example.SecondTabScreen', () => SecondTabScreen);
16
+//   Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
17
+//   Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
18
+//   Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
19
+//   Navigation.registerComponent('example.NotificationScreen', () => NotificationScreen);
20
+//   Navigation.registerComponent('example.SideMenu', () => SideMenu);
21
+//   Navigation.registerComponent('example.LightBoxScreen', () => LightBoxScreen);
22
+// }
23
+
24
+import Types from './Types';
25
+import Actions from './Actions';
26
+import Transitions from './Transitions';
27
+
28
+import Push from './types/Push';
29
+import Drawer from './types/Drawer';
30
+import LightBox from './types/LightBox';
31
+import Notification from './types/Notification';
32
+import Modal from './types/Modal';
33
+import TopTabs from './types/TopTabs';
34
+import TabOne from './types/tabs/TabOne';
35
+import TabTwo from './types/tabs/TabTwo';
36
+
37
+import CollapsingHeader from './transitions/CollapsingHeader';
38
+import SharedElementTransitions from './transitions/SharedElementTransitions';
39
+
40
+import Cards from './transitions/sharedElementTransitions/Cards/Cards';
41
+import CardsInfo from './transitions/sharedElementTransitions/Cards/Info';
42
+
43
+// import Profiles from './transitions/sharedElementTransitions/Profiles/Profiles';
44
+
45
+import Masonry from './transitions/sharedElementTransitions/Masonry/Masonry';
46
+import MasonryItem from './transitions/sharedElementTransitions/Masonry/Item';
47
+
48
+export default function () {
49
+    Navigation.registerComponent('example.Types', () => Types);
50
+    Navigation.registerComponent('example.Actions', () => Actions);
51
+    Navigation.registerComponent('example.Transitions', () => Transitions);
52
+
53
+    Navigation.registerComponent('example.Types.Push', () => Push);
54
+    Navigation.registerComponent('example.Types.Drawer', () => Drawer);
55
+    Navigation.registerComponent('example.Types.Screen', () => Drawer);
56
+    Navigation.registerComponent('example.Types.Modal', () => Modal);
57
+    Navigation.registerComponent('example.Types.LightBox', () => LightBox);
58
+    Navigation.registerComponent('example.Types.Notification', () => Notification);
59
+    Navigation.registerComponent('example.Types.TopTabs', () => TopTabs);
60
+    Navigation.registerComponent('example.Types.TopTabs.TabOne', () => TabOne);
61
+    Navigation.registerComponent('example.Types.TopTabs.TabTwo', () => TabTwo);
62
+
63
+    Navigation.registerComponent('example.Transitions.CollapsingHeader', () => CollapsingHeader);
64
+    Navigation.registerComponent('example.Transitions.SharedElementTransitions', () => SharedElementTransitions);
65
+    Navigation.registerComponent('example.Transitions.SharedElementTransitions.Cards', () => Cards);
66
+    Navigation.registerComponent('example.Transitions.SharedElementTransitions.Cards.Info', () => CardsInfo);
67
+    // Navigation.registerComponent('example.Transitions.SharedElementTransitions.Profiles', () => Profiles);
68
+    Navigation.registerComponent('example.Transitions.SharedElementTransitions.Masonry', () => Masonry);
69
+    Navigation.registerComponent('example.Transitions.SharedElementTransitions.Masonry.Item', () => MasonryItem);
70
+}

+ 0
- 118
example/src/screens/set/CardScreen.js Dosyayı Görüntüle

@@ -1,118 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  ScrollView,
4
-  TouchableWithoutFeedback,
5
-  TouchableNativeFeedback,
6
-  StyleSheet,
7
-  Image,
8
-  Text,
9
-  View,
10
-  Platform,
11
-  ScrolView
12
-} from 'react-native';
13
-import {SharedElementTransition} from 'react-native-navigation';
14
-import * as Animatable from 'react-native-animatable';
15
-import * as setStyles from './styles';
16
-
17
-const IMAGE_HEIGHT = 190;
18
-
19
-export default class CardScreen extends Component {
20
-  static navigatorStyle = {
21
-    ...setStyles.navigatorStyle
22
-  };
23
-
24
-  constructor(props) {
25
-    super(props);
26
-    this.state = {};
27
-  }
28
-
29
-  render() {
30
-    return (
31
-      <ScrollView>
32
-        <View style={[styles.container]}>
33
-          {this._renderCard(0)}
34
-          {this._renderCard(1)}
35
-          {this._renderCard(2)}
36
-        </View>
37
-      </ScrollView>
38
-    );
39
-  }
40
-
41
-  _renderCard(index) {
42
-    return (
43
-      <View style={styles.cardContainer}>
44
-        <TouchableWithoutFeedback onPress={() => this._onCardPress(index)}>
45
-          {this._renderImage(index)}
46
-        </TouchableWithoutFeedback>
47
-        <TouchableNativeFeedback onPress={() => this._onCardPress(index)}>
48
-          {this._renderCardContent()}
49
-        </TouchableNativeFeedback>
50
-      </View>
51
-    );
52
-  }
53
-
54
-  _onCardPress(index) {
55
-    this.props.navigator.push({
56
-      screen: 'example.infoScreen',
57
-      _title: 'Shared Element Transition',
58
-      sharedElements: [`image${index}`],
59
-      animated: false,
60
-      overrideBackPress: true,
61
-      passProps: {
62
-        sharedImageId: `image${index}`
63
-      }
64
-    })
65
-  }
66
-
67
-  _renderImage(index) {
68
-    return (
69
-      <SharedElementTransition
70
-        style={styles.imageContainer}
71
-        sharedElementId={`image${index}`}
72
-      >
73
-        <Image
74
-          style={styles.image}
75
-          source={require('../../../img/beach.jpg')}
76
-        />
77
-      </SharedElementTransition>
78
-    );
79
-  }
80
-
81
-  _renderCardContent() {
82
-    return (
83
-      <View style={styles.cardContentContainer}>
84
-        <Text style={styles.title}>This is a title</Text>
85
-        <Text>This is a very long long long long long long long long long long content</Text>
86
-      </View>
87
-    );
88
-  }
89
-}
90
-
91
-const styles = StyleSheet.create({
92
-  container: {
93
-    marginVertical: 16,
94
-    marginHorizontal: 8,
95
-  },
96
-  cardContainer: {
97
-    marginVertical: 8,
98
-    elevation: 2,
99
-    borderRadius: 2,
100
-    backgroundColor: '#F5F5F5'
101
-  },
102
-  imageContainer: {
103
-    justifyContent: 'flex-start'
104
-  },
105
-  image: {
106
-    height: IMAGE_HEIGHT,
107
-    borderTopLeftRadius: 2,
108
-    borderTopRightRadius: 2
109
-  },
110
-  cardContentContainer: {
111
-    padding: 8
112
-  },
113
-  title: {
114
-    fontWeight: '500',
115
-    paddingBottom: 8,
116
-    fontSize: 17
117
-  }
118
-});

+ 0
- 216
example/src/screens/set/HeroScreen.js Dosyayı Görüntüle

@@ -1,216 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  ScrollView,
4
-  TouchableOpacity,
5
-  StyleSheet,
6
-  Image,
7
-  Text,
8
-  View,
9
-  ScrolView
10
-} from 'react-native';
11
-import {SharedElementTransition} from 'react-native-navigation';
12
-import * as Animatable from 'react-native-animatable';
13
-import * as heroStyles from './styles';
14
-
15
-const FADE_DURATION = 500;
16
-const SHOW_DURATION = 500;
17
-const HIDE_DURATION = 500;
18
-
19
-const HEADER_HEIGHT = 120;
20
-const ICON_MARGIN = 24;
21
-
22
-export default class HeroScreen extends Component {
23
-  static navigatorStyle = {
24
-    ...heroStyles.navigatorStyle
25
-  };
26
-
27
-  constructor(props) {
28
-    super(props);
29
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
30
-    this.state = {
31
-      animationType: 'fadeIn'
32
-    }
33
-  }
34
-
35
-  componentDidMount() {
36
-    if (__STRESS_TEST__) {
37
-      setTimeout(() => {
38
-        this.setState({
39
-          animationType: 'fadeOut'
40
-        });
41
-        this.props.navigator.pop();
42
-      }, 650);
43
-    }
44
-  }
45
-
46
-  render() {
47
-    return (
48
-      <ScrollView style={[styles.container]}>
49
-        {this._renderHeader()}
50
-        {this._renderContent()}
51
-      </ScrollView>
52
-    );
53
-  }
54
-
55
-  _renderHeader() {
56
-    return (
57
-        <Animatable.View
58
-          animation={this.state.animationType}
59
-          duration={FADE_DURATION}
60
-          style={[styles.header, {backgroundColor: this.props.primaryColor}]}
61
-          useNativeDriver={true}
62
-        >
63
-          <View style={{height: ICON_MARGIN, flexDirection: 'row', backgroundColor: 'white'}}/>
64
-          <View style={{flex: 1, flexDirection: 'row'}}>
65
-            {this._renderIcon()}
66
-            {this._renderTitle()}
67
-          </View>
68
-      </Animatable.View>
69
-    );
70
-  }
71
-
72
-  _renderTitle() {
73
-    return (
74
-      <View style={{alignSelf: 'flex-end'}}>
75
-        <SharedElementTransition
76
-          style={styles.titleContainer}
77
-          sharedElementId={this.props.sharedTitleId}
78
-          showDuration={SHOW_DURATION}
79
-          hideDuration={HIDE_DURATION}
80
-          showInterpolation={
81
-                {
82
-                  type: 'path',
83
-                  controlX1: '0.5',
84
-                  controlY1: '1',
85
-                  controlX2: '0',
86
-                  controlY2: '0.5',
87
-                  easing: 'FastOutSlowIn'
88
-                }
89
-              }
90
-          hideInterpolation={
91
-                {
92
-                  type: 'path',
93
-                  controlX1: '0.5',
94
-                  controlY1: '0',
95
-                  controlX2: '1',
96
-                  controlY2: '0.5',
97
-                  easing:'FastOutSlowIn'
98
-                }
99
-              }
100
-        >
101
-          <Text style={[styles.title, {color: this.props.titleColor}]}>{this.props.title}</Text>
102
-        </SharedElementTransition>
103
-      </View>
104
-    );
105
-  }
106
-
107
-  _renderContent() {
108
-    return (
109
-      <Animatable.View
110
-        animation={this.state.animationType}
111
-        duration={FADE_DURATION}
112
-        style={styles.body}
113
-        useNativeDriver={true}>
114
-        <View
115
-          style={styles.list}
116
-          initialListSize={20}>
117
-          {this._genRows()}
118
-        </View>
119
-      </Animatable.View>
120
-    );
121
-  }
122
-
123
-  _genRows() {
124
-    const children = [];
125
-    for (let ii = 0; ii < 30; ii++) {
126
-      children.push(
127
-        <Text>{'row ' + ii}</Text>
128
-      );
129
-    }
130
-    return children;
131
-  }
132
-
133
-  _renderIcon() {
134
-    return (
135
-      <SharedElementTransition
136
-        sharedElementId={this.props.sharedIconId}
137
-        style={styles.iconContainer}
138
-        showDuration={SHOW_DURATION}
139
-        hideDuration={HIDE_DURATION}
140
-        showInterpolation={
141
-          {
142
-            type: 'path',
143
-            controlX1: '0.5',
144
-            controlY1: '1',
145
-            controlX2: '0',
146
-            controlY2: '0.5',
147
-            easing: 'FastOutSlowIn'
148
-          }
149
-        }
150
-        hideInterpolation={
151
-          {
152
-            type: 'path',
153
-            controlX1: '0.5',
154
-            controlY1: '0',
155
-            controlX2: '1',
156
-            controlY2: '0.5',
157
-            easing:'FastOutSlowIn'
158
-          }
159
-        }
160
-      >
161
-        <Image
162
-          source={this.props.icon}
163
-          style={styles.heroIcon}
164
-          fadeDuration={0}
165
-        />
166
-      </SharedElementTransition>
167
-    );
168
-  }
169
-
170
-  onNavigatorEvent(event) {
171
-    if (event.id === 'backPress') {
172
-      this.setState({
173
-        animationType: 'fadeOut'
174
-      });
175
-      this.props.navigator.pop();
176
-    }
177
-  }
178
-}
179
-
180
-const styles = StyleSheet.create({
181
-  container: {
182
-    flex: 1,
183
-    flexDirection: 'column',
184
-    backgroundColor: 'transparent'
185
-  },
186
-  header: {
187
-    height: 110,
188
-    flexDirection: 'column-reverse'
189
-  },
190
-  titleContainer: {
191
-    marginLeft: ICON_MARGIN + 90 +  + 16,
192
-    marginBottom: 8
193
-  },
194
-  title: {
195
-    fontSize: 23,
196
-    ...heroStyles.textLight
197
-  },
198
-  iconContainer: {
199
-    position: 'absolute',
200
-    bottom: -ICON_MARGIN,
201
-    left: ICON_MARGIN
202
-  },
203
-  heroIcon: {
204
-    width: 90,
205
-    height: 90,
206
-    resizeMode: 'contain'
207
-  },
208
-  body: {
209
-    flex: 4,
210
-    backgroundColor: 'white',
211
-  },
212
-  list: {
213
-    marginTop: 16,
214
-    marginHorizontal: 8
215
-  }
216
-});

+ 0
- 126
example/src/screens/set/InformationScreen.js Dosyayı Görüntüle

@@ -1,126 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  ScrollView,
4
-  TouchableOpacity,
5
-  StyleSheet,
6
-  Image,
7
-  Text,
8
-  View,
9
-  Platform,
10
-  ScrolView
11
-} from 'react-native';
12
-import {SharedElementTransition} from 'react-native-navigation';
13
-import * as Animatable from 'react-native-animatable';
14
-import * as setStyles from './styles';
15
-
16
-const SHOW_DURATION = 400;
17
-const HIDE_DURATION = 300;
18
-
19
-export default class InfoScreen extends Component {
20
-  static navigatorStyle = {
21
-    ...setStyles.navigatorStyle,
22
-    navBarHideOnScroll: false
23
-  };
24
-
25
-  constructor(props) {
26
-    super(props);
27
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
28
-    this.state = {
29
-      animationType: 'fadeInRight',
30
-      animationDuration: SHOW_DURATION
31
-    }
32
-  }
33
-
34
-  onNavigatorEvent(event) {
35
-    if (event.id === 'backPress') {
36
-      this.setState({
37
-        animationType: 'fadeOutRight',
38
-        animationDuration: HIDE_DURATION
39
-      });
40
-      this.props.navigator.pop();
41
-    }
42
-  }
43
-
44
-  render() {
45
-    return (
46
-      <View style={styles.container}>
47
-        {this._renderImage()}
48
-        {this._renderContent()}
49
-      </View>
50
-    );
51
-  }
52
-
53
-  _renderImage() {
54
-    return (
55
-      <SharedElementTransition
56
-        style={styles.imageContainer}
57
-        sharedElementId={this.props.sharedImageId}
58
-        showDuration={SHOW_DURATION}
59
-        hideDuration={HIDE_DURATION}
60
-        animateClipBounds={true}
61
-        showInterpolation={
62
-          {
63
-            type: 'linear',
64
-            easing: 'FastOutSlowIn'
65
-          }
66
-        }
67
-        hideInterpolation={
68
-        {
69
-          type: 'linear',
70
-          easing:'FastOutSlowIn'
71
-        }
72
-      }
73
-      >
74
-        <Image
75
-          style={styles.image}
76
-          source={require('../../../img/beach.jpg')}
77
-        />
78
-      </SharedElementTransition>
79
-    );
80
-  }
81
-
82
-  _renderContent() {
83
-    return (
84
-      <Animatable.View
85
-        style={styles.content}
86
-        duration={this.state.animationDuration}
87
-        animation={this.state.animationType}
88
-        useNativeDriver={true}
89
-      >
90
-        <Text style={styles.text}>Line 1</Text>
91
-        <Text style={styles.text}>Line 2</Text>
92
-        <Text style={styles.text}>Line 3</Text>
93
-        <Text style={styles.text}>Line 4</Text>
94
-        <Text style={styles.text}>Line 5</Text>
95
-        <Text style={styles.text}>Line 6</Text>
96
-        <Text style={styles.text}>Line 7</Text>
97
-        <Text style={styles.text}>Line 8</Text>
98
-      </Animatable.View>
99
-    );
100
-  }
101
-}
102
-
103
-const styles = StyleSheet.create({
104
-  container: {
105
-    flex: 1
106
-  },
107
-  content: {
108
-    flex: 1,
109
-    marginTop: 190,
110
-    backgroundColor: 'white'
111
-  },
112
-  imageContainer: {
113
-    position: 'absolute',
114
-    top: 0,
115
-    left: 0,
116
-    right: 0,
117
-  },
118
-  image: {
119
-    height: 190
120
-  },
121
-  text: {
122
-    fontSize: 17,
123
-    paddingVertical: 4,
124
-    paddingLeft: 8
125
-  }
126
-});

+ 0
- 235
example/src/screens/set/ListScreen.js Dosyayı Görüntüle

@@ -1,235 +0,0 @@
1
-import React, {Component} from 'react';
2
-import {
3
-  Text,
4
-  View,
5
-  ScrollView,
6
-  TouchableOpacity,
7
-  TouchableWithoutFeedback,
8
-  StyleSheet,
9
-  ListView,
10
-  Image
11
-} from 'react-native';
12
-import heroes from './heroes';
13
-import {SharedElementTransition} from 'react-native-navigation';
14
-import * as heroStyles from './styles';
15
-
16
-const LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';
17
-const hashCode = function(str) {
18
-  var hash = 15;
19
-  for (var ii = str.length - 1; ii >= 0; ii--) {
20
-    hash = ((hash << 5) - hash) + str.charCodeAt(ii);
21
-  }
22
-  return hash;
23
-};
24
-
25
-export default class ListScreen extends Component {
26
-  static navigatorStyle = {
27
-    ...heroStyles.navigatorStyle
28
-  };
29
-
30
-  static navigatorButtons = {
31
-    rightButtons: [
32
-      {
33
-        title: 'Add',
34
-        icon: require('../../../img/navicon_add.png'),
35
-        id: 'add',
36
-        showAsAction: 'always'
37
-      },
38
-      {
39
-        title: 'All',
40
-        id: 'all',
41
-        showAsAction: 'never'
42
-      },
43
-      {
44
-        title: 'Upcoming',
45
-        id: 'upcoming',
46
-        showAsAction: 'never'
47
-      },
48
-      {
49
-        title: 'My',
50
-        id: 'my',
51
-        showAsAction: 'never'
52
-      },
53
-      {
54
-        title: 'Participant',
55
-        id: 'participant',
56
-        showAsAction: 'never'
57
-      },
58
-    ],
59
-    fab: {
60
-      collapsedId: 'share',
61
-      collapsedIcon: require('../../../img/navicon_add.png'),
62
-      backgroundColor: '#31363c'
63
-    }
64
-  };
65
-
66
-  constructor(props) {
67
-    super(props);
68
-    this._onRowPress = this._onRowPress.bind(this);
69
-    this._renderRow = this._renderRow.bind(this);
70
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
71
-    this.onPress = [];
72
-    this.counter = 0;
73
-
74
-    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
75
-    this.state = {
76
-      dataSource: ds.cloneWithRows(this._genRows({}))
77
-    }
78
-  }
79
-
80
-  onNavigatorEvent(event) {
81
-    console.log('ListScreen', 'onNavigatorEvent ', event.id);
82
-    if (event.id === 'didAppear' && __STRESS_TEST__) {
83
-      setTimeout(() => {
84
-        this.onPress[Math.floor((Math.random() * 4))]();
85
-        console.log('count', this.counter++);
86
-      }, 750);
87
-    }
88
-  }
89
-
90
-  render() {
91
-    return (
92
-      <ListView
93
-        dataSource={this.state.dataSource}
94
-        renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, sectionID, rowID)}/>
95
-    );
96
-  }
97
-
98
-  _renderRow(rowData, sectionID, rowID) {
99
-    console.log('ListScreen', '_renderRow ', rowID);
100
-    const rowHash = Math.abs(hashCode(rowData.rowTitle));
101
-    const sharedIconId = "image" + rowID;
102
-    const sharedTitleId = "title" + rowID;
103
-
104
-    const onPress = () => this._onRowPress({
105
-      rowData,
106
-      sharedIconId,
107
-      sharedTitleId
108
-    });
109
-    if (['0', '1', '2', '3'].includes(rowID)) {
110
-      this.onPress.push(onPress);
111
-    }
112
-    return (
113
-      <TouchableWithoutFeedback
114
-        style={styles.row}
115
-        onPress={onPress}
116
-      >
117
-        <View style={[styles.sharedRowContent, heroStyles.primaryLight]}>
118
-          {this._renderRowIcon({rowData, sharedIconId})}
119
-          {this._renderRowContent({rowData, sharedTitleId, rowHash})}
120
-        </View>
121
-      </TouchableWithoutFeedback>
122
-    );
123
-  }
124
-
125
-  _renderRowIcon({rowData, sharedIconId}) {
126
-    return (
127
-      <View>
128
-        <SharedElementTransition
129
-          key={sharedIconId}
130
-          sharedElementId={sharedIconId}
131
-          style={styles.imageContainer}
132
-        >
133
-          <Image
134
-            source={rowData.icon}
135
-            style={styles.heroIcon}
136
-            fadeDuration={0}
137
-          />
138
-        </SharedElementTransition>
139
-      </View>
140
-    );
141
-  }
142
-
143
-  _renderRowContent({rowData, sharedTitleId, rowHash}) {
144
-    return (
145
-      <View style={styles.itemContentContainer}>
146
-        <SharedElementTransition sharedElementId={sharedTitleId}>
147
-          <Text style={styles.itemTitle}>{rowData.title}</Text>
148
-        </SharedElementTransition>
149
-        <Text style={styles.text}>
150
-          {rowData.rowTitle + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
151
-        </Text>
152
-      </View>
153
-    );
154
-  }
155
-
156
-  _onRowPress(data) {
157
-    const {rowData, sharedIconId, sharedTitleId} = data;
158
-    this.props.navigator.push({
159
-      screen: 'example.HeroScreen',
160
-      sharedElements: [
161
-        data.sharedElementId,
162
-        data.sharedElementId + 'container'
163
-      ],
164
-      animated: false,
165
-      overrideBackPress: true,
166
-      passProps: {
167
-        sharedIconId: sharedIconId,
168
-        sharedTitleId: sharedTitleId,
169
-        ...rowData
170
-      }
171
-    });
172
-  }
173
-
174
-  _genRows() {
175
-    const dataBlob = [];
176
-    for (let ii = 0; ii < 100; ii++) {
177
-      dataBlob.push({
178
-        rowTitle: 'Row ' + ii + ' ',
179
-        icon: heroes[ii % 5].icon,
180
-        title: heroes[ii % 5].title,
181
-        primaryColor: heroes[ii % 5].primaryColor,
182
-        titleColor: heroes[ii % 5].titleColor
183
-      });
184
-    }
185
-    return dataBlob;
186
-  }
187
-
188
-  _renderSeparator(sectionID, rowID) {
189
-    return (
190
-      <View
191
-        key={`${sectionID}-${rowID}`}
192
-        style={{
193
-          height: 1,
194
-          backgroundColor: rowID % 2 == 0 ? '#3B5998' : '#CCCCCC'
195
-        }}
196
-      />
197
-    );
198
-  }
199
-}
200
-
201
-const styles = StyleSheet.create({
202
-  row: {
203
-    padding: 5,
204
-    height: 110,
205
-    flexDirection: 'row',
206
-    justifyContent: 'center',
207
-    borderWidth: 1,
208
-  },
209
-  sharedRowContent: {
210
-    flexDirection: 'row',
211
-  },
212
-  imageContainer: {
213
-    justifyContent: 'center'
214
-  },
215
-  heroIcon: {
216
-    width: 100,
217
-    height: 100,
218
-    resizeMode: 'contain'
219
-  },
220
-  itemContentContainer: {
221
-    flex: 1,
222
-    paddingLeft: 5,
223
-    flexDirection: 'column',
224
-    alignItems: 'flex-start'
225
-  },
226
-  itemTitle: {
227
-    fontSize: 19,
228
-    ...heroStyles.textDark
229
-  },
230
-  text: {
231
-    ...heroStyles.textDark
232
-  }
233
-});
234
-
235
-

+ 0
- 34
example/src/screens/set/heroes.js Dosyayı Görüntüle

@@ -1,34 +0,0 @@
1
-import * as heroStyles from './styles';
2
-
3
-export default heroes = [
4
-  {
5
-    title: 'Bounty Hunter',
6
-    icon: require('../../../img/heroes/bouny_hunter.png'),
7
-    primaryColor: '#f0cb3c',
8
-    titleColor: '#993825'
9
-  },
10
-  {
11
-    title: 'Templar Assasin',
12
-    icon: require('../../../img/heroes/templar_assasin.png'),
13
-    primaryColor: '#f6f6f6',
14
-    titleColor: heroStyles.textDark.color
15
-  },
16
-  {
17
-    title: 'Oracle',
18
-    icon: require('../../../img/heroes/oracle.png'),
19
-    primaryColor: '#19b0b9',
20
-    titleColor: '#a2195b'
21
-  },
22
-  {
23
-    title: 'Earthspirit',
24
-    icon: require('../../../img/heroes/earthspirit.png'),
25
-    primaryColor: '#819c97',
26
-    titleColor: heroStyles.textDark.color
27
-  },
28
-  {
29
-    title: 'Skywrath Mage',
30
-    icon: require('../../../img/heroes/skywrath_mage.png'),
31
-    primaryColor: '#dfb42e',
32
-    titleColor: '#1e5ea6'
33
-  }
34
-];

+ 0
- 26
example/src/screens/set/styles.js Dosyayı Görüntüle

@@ -1,26 +0,0 @@
1
-export const navigatorStyle = {
2
-  navBarHideOnScroll: true,
3
-  drawUnderTabBar: true,
4
-  navBarButtonColor: '#cacaca',
5
-  navBarBackgroundColor: '#31363c',
6
-  navBarTextColor: '#cacaca',
7
-  tabBarBackgroundColor: '#31363c',
8
-  tabBarButtonColor: '#cacaca',
9
-  tabBarSelectedButtonColor: '#cacaca'
10
-};
11
-
12
-export const primaryDark = {
13
-  backgroundColor: '#1f2222'
14
-};
15
-
16
-export const primaryLight = {
17
-  backgroundColor: '#cacaca'
18
-};
19
-
20
-export const textLight = {
21
-  color: '#cacaca'
22
-};
23
-
24
-export const textDark = {
25
-  color: '#1f2222'
26
-};

+ 35
- 0
example/src/screens/transitions/CollapsingHeader.js Dosyayı Görüntüle

@@ -0,0 +1,35 @@
1
+import React from 'react';
2
+import { StyleSheet, View, Text, ScrollView } from 'react-native';
3
+
4
+class CollapsingHeader extends React.Component {
5
+
6
+    static navigatorStyle = {
7
+        drawUnderTabBar: true,
8
+        navBarButtonColor: '#ffffff',
9
+        navBarTextColor: '#ffffff',
10
+        collapsingToolBarImage: require('../../../img/gyro_header.jpg'),
11
+        collapsingToolBarCollapsedColor: '#0f2362',
12
+        navBarBackgroundColor: '#eeeeee'
13
+    };
14
+
15
+    render() {
16
+        return (
17
+            <ScrollView style={styles.container}>
18
+                <View>
19
+                    {[...new Array(40)].map((a, index) => (
20
+                        <Text key={`row_${index}`} style={styles.button}>Row {index}</Text>
21
+                    ))}
22
+                </View>
23
+            </ScrollView>
24
+        );
25
+    }
26
+}
27
+
28
+const styles = StyleSheet.create({
29
+    container: {
30
+        flex: 1,
31
+        backgroundColor: '#fff',
32
+    },
33
+});
34
+
35
+export default CollapsingHeader;

+ 46
- 0
example/src/screens/transitions/SharedElementTransitions.js Dosyayı Görüntüle

@@ -0,0 +1,46 @@
1
+import React from 'react';
2
+import { StyleSheet, ScrollView, Text } from 'react-native';
3
+import Row from '../../components/Row';
4
+
5
+class Transitions extends React.Component {
6
+
7
+    showCardsExample = () => {
8
+        this.props.navigator.showModal({
9
+            title: 'Cards',
10
+            screen: 'example.Transitions.SharedElementTransitions.Cards',
11
+        });
12
+    };
13
+
14
+    showProfileExample = () => {
15
+        this.props.navigator.showModal({
16
+            title: 'Profiles',
17
+            screen: 'example.Transitions.SharedElementTransitions.Profiles',
18
+        });
19
+    };
20
+
21
+    showMasonryExample = () => {
22
+        this.props.navigator.showModal({
23
+            title: 'Masonry',
24
+            screen: 'example.Transitions.SharedElementTransitions.Masonry',
25
+        });
26
+    };
27
+
28
+    render() {
29
+        return (
30
+            <ScrollView style={styles.container}>
31
+                <Row title={'Cards'} onPress={this.showCardsExample} />
32
+                {/*<Row title={'Profiles'} onPress={this.showProfileExample} />*/}
33
+                <Row title={'Masonry'} onPress={this.showMasonryExample} />
34
+            </ScrollView>
35
+        );
36
+    }
37
+}
38
+
39
+const styles = StyleSheet.create({
40
+    container: {
41
+        flex: 1,
42
+        backgroundColor: '#ffffff',
43
+    },
44
+});
45
+
46
+export default Transitions;

+ 106
- 0
example/src/screens/transitions/sharedElementTransitions/Cards/Cards.js Dosyayı Görüntüle

@@ -0,0 +1,106 @@
1
+import React from 'react';
2
+import { ScrollView, TouchableHighlight, StyleSheet, Image, Text, View, ScrolView } from 'react-native';
3
+import { SharedElementTransition } from 'react-native-navigation';
4
+
5
+const IMAGE_HEIGHT = 190;
6
+
7
+class CardScreen extends React.Component {
8
+
9
+    goToCard = (index) => {
10
+        this.props.navigator.push({
11
+            screen: 'example.Transitions.SharedElementTransitions.Cards.Info',
12
+            sharedElements: [`image${index}`],
13
+            animated: false,
14
+            overrideBackPress: true,
15
+            passProps: {
16
+                sharedImageId: `image${index}`
17
+            }
18
+        })
19
+    };
20
+
21
+    _renderCard(index) {
22
+        return (
23
+            <View style={styles.cardContainer}>
24
+                <TouchableHighlight
25
+                    underlayColor={'rgba(0, 0, 0, 0.054)'}
26
+                    onPress={() => this.goToCard(index)}
27
+                >
28
+                    <View>
29
+                        {this._renderImage(index)}
30
+                        {this._renderCardContent()}
31
+                    </View>
32
+                </TouchableHighlight>
33
+            </View>
34
+        );
35
+    }
36
+
37
+    _renderImage(index) {
38
+        return (
39
+            <SharedElementTransition
40
+                style={styles.imageContainer}
41
+                sharedElementId={`image${index}`}
42
+            >
43
+                <Image
44
+                    style={styles.image}
45
+                    source={require('../../../../../img/beach.jpg')}
46
+                />
47
+            </SharedElementTransition>
48
+        );
49
+    }
50
+
51
+    _renderCardContent() {
52
+        return (
53
+            <View style={styles.cardContentContainer}>
54
+                <Text style={styles.title}>This is a title</Text>
55
+                <Text>This is a very long long long long long long long long long long content</Text>
56
+            </View>
57
+        );
58
+    }
59
+
60
+    render() {
61
+        return (
62
+            <ScrollView
63
+                style={styles.container}
64
+                contentContainerStyle={styles.content}
65
+            >
66
+                {this._renderCard(0)}
67
+                {this._renderCard(1)}
68
+                {this._renderCard(2)}
69
+            </ScrollView>
70
+        );
71
+    }
72
+}
73
+
74
+const styles = StyleSheet.create({
75
+    container: {
76
+        flex: 1,
77
+        backgroundColor: '#ffffff',
78
+    },
79
+    content: {
80
+        marginHorizontal: 8,
81
+    },
82
+    cardContainer: {
83
+        marginVertical: 8,
84
+        elevation: 2,
85
+        borderRadius: 2,
86
+        backgroundColor: '#F5F5F5'
87
+    },
88
+    imageContainer: {
89
+        justifyContent: 'flex-start'
90
+    },
91
+    image: {
92
+        height: IMAGE_HEIGHT,
93
+        borderTopLeftRadius: 2,
94
+        borderTopRightRadius: 2
95
+    },
96
+    cardContentContainer: {
97
+        padding: 8
98
+    },
99
+    title: {
100
+        fontWeight: '500',
101
+        paddingBottom: 8,
102
+        fontSize: 17
103
+    },
104
+});
105
+
106
+export default CardScreen;

+ 123
- 0
example/src/screens/transitions/sharedElementTransitions/Cards/Info.js Dosyayı Görüntüle

@@ -0,0 +1,123 @@
1
+import React, { Component } from 'react';
2
+import {
3
+    ScrollView,
4
+    TouchableOpacity,
5
+    StyleSheet,
6
+    Image,
7
+    Text,
8
+    View,
9
+    Platform,
10
+    ScrolView
11
+} from 'react-native';
12
+import { SharedElementTransition } from 'react-native-navigation';
13
+import * as Animatable from 'react-native-animatable';
14
+
15
+const SHOW_DURATION = 400;
16
+const HIDE_DURATION = 300;
17
+
18
+class InfoScreen extends Component {
19
+
20
+    constructor(props) {
21
+        super(props);
22
+        this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
23
+        this.state = {
24
+            animationType: 'fadeInRight',
25
+            animationDuration: SHOW_DURATION
26
+        }
27
+    }
28
+
29
+    onNavigatorEvent(event) {
30
+        if (event.id === 'backPress') {
31
+            this.setState({
32
+                animationType: 'fadeOutRight',
33
+                animationDuration: HIDE_DURATION
34
+            });
35
+            this.props.navigator.pop();
36
+        }
37
+    }
38
+
39
+    render() {
40
+        return (
41
+            <View style={styles.container}>
42
+                {this._renderImage()}
43
+                {this._renderContent()}
44
+            </View>
45
+        );
46
+    }
47
+
48
+    _renderImage() {
49
+        return (
50
+            <SharedElementTransition
51
+                style={styles.imageContainer}
52
+                sharedElementId={this.props.sharedImageId}
53
+                showDuration={SHOW_DURATION}
54
+                hideDuration={HIDE_DURATION}
55
+                animateClipBounds={true}
56
+                showInterpolation={
57
+                    {
58
+                        type: 'linear',
59
+                        easing: 'FastOutSlowIn'
60
+                    }
61
+                }
62
+                hideInterpolation={
63
+                    {
64
+                        type: 'linear',
65
+                        easing: 'FastOutSlowIn'
66
+                    }
67
+                }
68
+            >
69
+                <Image
70
+                    style={styles.image}
71
+                    source={require('../../../../../img/beach.jpg')}
72
+                />
73
+            </SharedElementTransition>
74
+        );
75
+    }
76
+
77
+    _renderContent() {
78
+        return (
79
+            <Animatable.View
80
+                style={styles.content}
81
+                duration={this.state.animationDuration}
82
+                animation={this.state.animationType}
83
+                useNativeDriver={true}
84
+            >
85
+                <Text style={styles.text}>Line 1</Text>
86
+                <Text style={styles.text}>Line 2</Text>
87
+                <Text style={styles.text}>Line 3</Text>
88
+                <Text style={styles.text}>Line 4</Text>
89
+                <Text style={styles.text}>Line 5</Text>
90
+                <Text style={styles.text}>Line 6</Text>
91
+                <Text style={styles.text}>Line 7</Text>
92
+                <Text style={styles.text}>Line 8</Text>
93
+            </Animatable.View>
94
+        );
95
+    }
96
+}
97
+
98
+const styles = StyleSheet.create({
99
+    container: {
100
+        flex: 1
101
+    },
102
+    content: {
103
+        flex: 1,
104
+        marginTop: 190,
105
+        backgroundColor: 'white'
106
+    },
107
+    imageContainer: {
108
+        position: 'absolute',
109
+        top: 0,
110
+        left: 0,
111
+        right: 0,
112
+    },
113
+    image: {
114
+        height: 190
115
+    },
116
+    text: {
117
+        fontSize: 17,
118
+        paddingVertical: 4,
119
+        paddingLeft: 8
120
+    }
121
+});
122
+
123
+export default InfoScreen;

+ 54
- 0
example/src/screens/transitions/sharedElementTransitions/Masonry/Item.js Dosyayı Görüntüle

@@ -0,0 +1,54 @@
1
+import React from 'react';
2
+import { StyleSheet, View, Text, Image } from 'react-native';
3
+import { SharedElementTransition } from 'react-native-navigation';
4
+
5
+const SHOW_DURATION = 200;
6
+const HIDE_DURATION = 300;
7
+
8
+class Item extends React.Component {
9
+
10
+    static navigatorStyle = {
11
+        navBarHidden: true,
12
+    };
13
+
14
+    render() {
15
+        return (
16
+            <View style={styles.container}>
17
+                <SharedElementTransition
18
+                    sharedElementId={this.props.sharedImageId}
19
+                    showDuration={SHOW_DURATION}
20
+                    hideDuration={HIDE_DURATION}
21
+                    animateClipBounds
22
+                    showInterpolation={{
23
+                        type: 'linear',
24
+                        easing: 'FastInSlowOut',
25
+                    }}
26
+                    hideInterpolation={{
27
+                        type: 'linear',
28
+                        easing: 'FastOutSlowIn',
29
+                    }}
30
+                >
31
+                    <Image
32
+                        style={styles.image}
33
+                        source={this.props.image}
34
+                    />
35
+                </SharedElementTransition>
36
+            </View>
37
+        );
38
+    }
39
+}
40
+
41
+const styles = StyleSheet.create({
42
+    container: {
43
+        flex: 1,
44
+        backgroundColor: '#ffffff',
45
+        alignItems: 'center',
46
+        justifyContent: 'center',
47
+    },
48
+    image: {
49
+        width: 400,
50
+        height: 400,
51
+    }
52
+});
53
+
54
+export default Item;

+ 98
- 0
example/src/screens/transitions/sharedElementTransitions/Masonry/Masonry.js Dosyayı Görüntüle

@@ -0,0 +1,98 @@
1
+import React from 'react';
2
+import { StyleSheet, View, Text, PixelRatio, FlatList, Image, TouchableHighlight } from 'react-native';
3
+import { Navigation, SharedElementTransition } from 'react-native-navigation';
4
+
5
+import images from './images';
6
+
7
+const ROW_HEIGHT = 650;
8
+const COLS = 2;
9
+
10
+class Masonry extends React.Component {
11
+
12
+    onAssetPress = (image, key) => {
13
+        this.props.navigator.push({
14
+            screen: 'example.Transitions.SharedElementTransitions.Masonry.Item',
15
+            sharedElements: [key],
16
+            passProps: {
17
+                image,
18
+                sharedImageId: key,
19
+            },
20
+        });
21
+    };
22
+
23
+    renderAsset = (asset, row, column, index) => {
24
+        const key = `row_${row}_column_${column}_asset_${index}`;
25
+
26
+        return (
27
+            <TouchableHighlight
28
+                key={key}
29
+                onPress={() => {
30
+                    this.onAssetPress(asset.source, key);
31
+                }}
32
+                style={[styles.assetContainer, { flex: asset.weight }]}
33
+            >
34
+                <View style={{ flex: 1 }}>
35
+                    <SharedElementTransition
36
+                        style={{ flex: 1 }}
37
+                        sharedElementId={key}
38
+                    >
39
+                        <Image
40
+                            source={asset.source}
41
+                            resizeMode={'cover'}
42
+                            style={styles.asset}
43
+                        />
44
+                    </SharedElementTransition>
45
+                </View>
46
+            </TouchableHighlight>
47
+        );
48
+    };
49
+
50
+    renderItem = ({ item, index }) => {
51
+        return (
52
+            <View style={[styles.item, { height: ROW_HEIGHT }]}>
53
+                {[...new Array(COLS)].map((column, columnIndex) => (
54
+                    <View
55
+                        key={`row_${index}_column_${columnIndex}`}
56
+                        style={{ flex: 1 }}
57
+                    >
58
+                        {item.images[columnIndex].map((asset, assetIndex) => this.renderAsset(asset, index, columnIndex, assetIndex))}
59
+                    </View>
60
+                ))}
61
+            </View>
62
+        );
63
+    };
64
+
65
+    render() {
66
+        return (
67
+            <View style={styles.container}>
68
+                <FlatList
69
+                    data={images}
70
+                    renderItem={this.renderItem}
71
+                    getItemLayout={(layout, index) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index })}
72
+                />
73
+            </View>
74
+        );
75
+    }
76
+}
77
+
78
+const styles = StyleSheet.create({
79
+    container: {
80
+        flex: 1,
81
+        backgroundColor: '#ffffff',
82
+    },
83
+    item: {
84
+        flex: 1,
85
+        flexDirection: 'row',
86
+    },
87
+    assetContainer: {
88
+        margin: 5,
89
+        borderRadius: 6,
90
+        borderWidth: StyleSheet.hairlineWidth,
91
+    },
92
+    asset: {
93
+        flex: 1,
94
+        borderRadius: 6,
95
+    },
96
+});
97
+
98
+export default Masonry;

+ 100
- 0
example/src/screens/transitions/sharedElementTransitions/Masonry/images.js Dosyayı Görüntüle

@@ -0,0 +1,100 @@
1
+const images = [
2
+    require('../../../../../img/masonry/Cfw87359UT.jpeg'),
3
+    require('../../../../../img/masonry/a848dHxA4e.jpeg'),
4
+    require('../../../../../img/masonry/AdGXmD1CH6.jpeg'),
5
+    require('../../../../../img/masonry/5Gi8kova3k.jpeg'),
6
+    require('../../../../../img/masonry/ri90ueind7.jpeg'),
7
+    require('../../../../../img/masonry/kVN0FryOZk.jpeg'),
8
+    require('../../../../../img/masonry/v8KLi2f0Tr.jpeg'),
9
+    require('../../../../../img/masonry/xU42hx19BB.jpeg'),
10
+    require('../../../../../img/masonry/61mpAVRV73.jpeg'),
11
+    require('../../../../../img/masonry/pqgylg80SD.jpeg'),
12
+    require('../../../../../img/masonry/37r6Cqp1B8.jpeg'),
13
+    require('../../../../../img/masonry/N30E32431C.jpeg'),
14
+    require('../../../../../img/masonry/rVOcz7rd0z.jpeg'),
15
+    require('../../../../../img/masonry/A4g0lZ33Z8.jpeg'),
16
+    require('../../../../../img/masonry/j51Pva1P8L.jpeg'),
17
+    require('../../../../../img/masonry/158xD4xbeh.jpeg'),
18
+];
19
+
20
+function randomImage() {
21
+    return images[Math.floor(Math.random() * images.length)];
22
+}
23
+
24
+export default [
25
+    {
26
+        key: 1,
27
+        images: [[{
28
+            weight: 2,
29
+            source: randomImage(),
30
+        }, {
31
+            weight: 1,
32
+            source: randomImage(),
33
+        }, {
34
+            weight: 3,
35
+            source: randomImage(),
36
+        }], [{
37
+            weight: 1,
38
+            source: randomImage(),
39
+        } ,{
40
+            weight: 3,
41
+            source: randomImage(),
42
+        }, {
43
+            weight: 1,
44
+            source: randomImage(),
45
+        }, {
46
+            weight: 1,
47
+            source: randomImage(),
48
+        }]],
49
+    },
50
+    {
51
+        key: 2,
52
+        images: [[{
53
+            weight: 1,
54
+            source: randomImage(),
55
+        }, {
56
+            weight: 1,
57
+            source: randomImage(),
58
+        }, {
59
+            weight: 1,
60
+            source: randomImage(),
61
+        }, {
62
+            weight: 3,
63
+            source: randomImage(),
64
+        }], [{
65
+            weight: 3,
66
+            source: randomImage(),
67
+        } ,{
68
+            weight: 3,
69
+            source: randomImage(),
70
+        }]],
71
+    },
72
+    {
73
+        key: 3,
74
+        images: [[{
75
+            weight: 1,
76
+            source: randomImage(),
77
+        }, {
78
+            weight: 2,
79
+            source: randomImage(),
80
+        }, {
81
+            weight: 1,
82
+            source: randomImage(),
83
+        }, {
84
+            weight: 2,
85
+            source: randomImage(),
86
+        }], [{
87
+            weight: 2,
88
+            source: randomImage(),
89
+        } ,{
90
+            weight: 1,
91
+            source: randomImage(),
92
+        }, {
93
+            weight: 2,
94
+            source: randomImage(),
95
+        }, {
96
+            weight: 1,
97
+            source: randomImage(),
98
+        }]],
99
+    }
100
+];

+ 213
- 0
example/src/screens/transitions/sharedElementTransitions/Profiles/Profiles.js Dosyayı Görüntüle

@@ -0,0 +1,213 @@
1
+import React, { Component } from 'react';
2
+import {
3
+    ScrollView,
4
+    TouchableOpacity,
5
+    StyleSheet,
6
+    Image,
7
+    Text,
8
+    View,
9
+    ScrolView
10
+} from 'react-native';
11
+import { SharedElementTransition } from 'react-native-navigation';
12
+import * as Animatable from 'react-native-animatable';
13
+
14
+const FADE_DURATION = 500;
15
+const SHOW_DURATION = 500;
16
+const HIDE_DURATION = 500;
17
+
18
+const ICON_MARGIN = 24;
19
+
20
+class Profiles extends Component {
21
+
22
+    constructor(props) {
23
+        super(props);
24
+        this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
25
+        this.state = {
26
+            animationType: 'fadeIn'
27
+        }
28
+    }
29
+
30
+    componentDidMount() {
31
+        if (__STRESS_TEST__) {
32
+            setTimeout(() => {
33
+                this.setState({
34
+                    animationType: 'fadeOut'
35
+                });
36
+                this.props.navigator.pop();
37
+            }, 650);
38
+        }
39
+    }
40
+
41
+    onNavigatorEvent(event) {
42
+        if (event.id === 'backPress') {
43
+            this.setState({
44
+                animationType: 'fadeOut'
45
+            });
46
+            this.props.navigator.pop();
47
+        }
48
+    }
49
+
50
+    _renderHeader() {
51
+        return (
52
+            <Animatable.View
53
+                animation={this.state.animationType}
54
+                duration={FADE_DURATION}
55
+                style={[styles.header, { backgroundColor: this.props.primaryColor }]}
56
+                useNativeDriver={true}
57
+            >
58
+                <View style={{ height: ICON_MARGIN, flexDirection: 'row', backgroundColor: 'white' }} />
59
+                <View style={{ flex: 1, flexDirection: 'row' }}>
60
+                    {this._renderIcon()}
61
+                    {this._renderTitle()}
62
+                </View>
63
+            </Animatable.View>
64
+        );
65
+    }
66
+
67
+    _renderTitle() {
68
+        return (
69
+            <View style={{ alignSelf: 'flex-end' }}>
70
+                <SharedElementTransition
71
+                    style={styles.titleContainer}
72
+                    sharedElementId={this.props.sharedTitleId}
73
+                    showDuration={SHOW_DURATION}
74
+                    hideDuration={HIDE_DURATION}
75
+                    showInterpolation={
76
+                        {
77
+                            type: 'path',
78
+                            controlX1: '0.5',
79
+                            controlY1: '1',
80
+                            controlX2: '0',
81
+                            controlY2: '0.5',
82
+                            easing: 'FastOutSlowIn'
83
+                        }
84
+                    }
85
+                    hideInterpolation={
86
+                        {
87
+                            type: 'path',
88
+                            controlX1: '0.5',
89
+                            controlY1: '0',
90
+                            controlX2: '1',
91
+                            controlY2: '0.5',
92
+                            easing: 'FastOutSlowIn'
93
+                        }
94
+                    }
95
+                >
96
+                    <Text style={[styles.title, { color: this.props.titleColor }]}>{this.props.title}</Text>
97
+                </SharedElementTransition>
98
+            </View>
99
+        );
100
+    }
101
+
102
+    _renderContent() {
103
+        return (
104
+            <Animatable.View
105
+                animation={this.state.animationType}
106
+                duration={FADE_DURATION}
107
+                style={styles.body}
108
+                useNativeDriver={true}>
109
+                <View
110
+                    style={styles.list}
111
+                    initialListSize={20}>
112
+                    {this._genRows()}
113
+                </View>
114
+            </Animatable.View>
115
+        );
116
+    }
117
+
118
+    _genRows() {
119
+        const children = [];
120
+        for (let ii = 0; ii < 30; ii++) {
121
+            children.push(
122
+                <Text>{'row ' + ii}</Text>
123
+            );
124
+        }
125
+        return children;
126
+    }
127
+
128
+    _renderIcon() {
129
+        return (
130
+            <SharedElementTransition
131
+                sharedElementId={this.props.sharedIconId}
132
+                style={styles.iconContainer}
133
+                showDuration={SHOW_DURATION}
134
+                hideDuration={HIDE_DURATION}
135
+                showInterpolation={
136
+                    {
137
+                        type: 'path',
138
+                        controlX1: '0.5',
139
+                        controlY1: '1',
140
+                        controlX2: '0',
141
+                        controlY2: '0.5',
142
+                        easing: 'FastOutSlowIn'
143
+                    }
144
+                }
145
+                hideInterpolation={
146
+                    {
147
+                        type: 'path',
148
+                        controlX1: '0.5',
149
+                        controlY1: '0',
150
+                        controlX2: '1',
151
+                        controlY2: '0.5',
152
+                        easing: 'FastOutSlowIn'
153
+                    }
154
+                }
155
+            >
156
+                <Image
157
+                    source={this.props.icon}
158
+                    style={styles.heroIcon}
159
+                    fadeDuration={0}
160
+                />
161
+            </SharedElementTransition>
162
+        );
163
+    }
164
+
165
+    render() {
166
+        return (
167
+            <ScrollView style={[styles.container]}>
168
+                {this._renderHeader()}
169
+                {this._renderContent()}
170
+            </ScrollView>
171
+        );
172
+    }
173
+
174
+}
175
+
176
+const styles = StyleSheet.create({
177
+    container: {
178
+        flex: 1,
179
+        flexDirection: 'column',
180
+        backgroundColor: 'transparent'
181
+    },
182
+    header: {
183
+        height: 110,
184
+        flexDirection: 'column-reverse'
185
+    },
186
+    titleContainer: {
187
+        marginLeft: ICON_MARGIN + 90 + +16,
188
+        marginBottom: 8
189
+    },
190
+    title: {
191
+        fontSize: 23,
192
+    },
193
+    iconContainer: {
194
+        position: 'absolute',
195
+        bottom: -ICON_MARGIN,
196
+        left: ICON_MARGIN
197
+    },
198
+    heroIcon: {
199
+        width: 90,
200
+        height: 90,
201
+        resizeMode: 'contain'
202
+    },
203
+    body: {
204
+        flex: 4,
205
+        backgroundColor: 'white',
206
+    },
207
+    list: {
208
+        marginTop: 16,
209
+        marginHorizontal: 8
210
+    }
211
+});
212
+
213
+export default Profiles;

+ 32
- 0
example/src/screens/transitions/sharedElementTransitions/Profiles/data.js Dosyayı Görüntüle

@@ -0,0 +1,32 @@
1
+export default heroes = [
2
+    {
3
+        title: 'Bounty Hunter',
4
+        icon: require('../../../../../img/heroes/bouny_hunter.png'),
5
+        primaryColor: '#f0cb3c',
6
+        titleColor: '#993825'
7
+    },
8
+    {
9
+        title: 'Templar Assasin',
10
+        icon: require('../../../../../img/heroes/templar_assasin.png'),
11
+        primaryColor: '#f6f6f6',
12
+        titleColor: 'red',
13
+    },
14
+    {
15
+        title: 'Oracle',
16
+        icon: require('../../../../../img/heroes/oracle.png'),
17
+        primaryColor: '#19b0b9',
18
+        titleColor: '#a2195b'
19
+    },
20
+    {
21
+        title: 'Earthspirit',
22
+        icon: require('../../../../../img/heroes/earthspirit.png'),
23
+        primaryColor: '#819c97',
24
+        titleColor: 'red',
25
+    },
26
+    {
27
+        title: 'Skywrath Mage',
28
+        icon: require('../../../../../img/heroes/skywrath_mage.png'),
29
+        primaryColor: '#dfb42e',
30
+        titleColor: '#1e5ea6'
31
+    }
32
+];

+ 25
- 0
example/src/screens/types/Drawer.js Dosyayı Görüntüle

@@ -0,0 +1,25 @@
1
+import React from 'react';
2
+import { StyleSheet, View, Text } from 'react-native';
3
+
4
+class MyClass extends React.Component {
5
+
6
+    render() {
7
+        return (
8
+            <View style={styles.container}>
9
+
10
+            </View>
11
+        );
12
+    }
13
+}
14
+
15
+const styles = StyleSheet.create({
16
+    container: {
17
+        flex: 1,
18
+        width: 300,
19
+        alignItems: 'center',
20
+        justifyContent: 'center',
21
+        backgroundColor: '#ffffff',
22
+    },
23
+});
24
+
25
+export default MyClass;

+ 41
- 0
example/src/screens/types/LightBox.js Dosyayı Görüntüle

@@ -0,0 +1,41 @@
1
+import React from 'react';
2
+import { StyleSheet, View, Text, Dimensions, Button } from 'react-native';
3
+
4
+class Lightbox extends React.Component {
5
+
6
+    render() {
7
+        return (
8
+            <View style={styles.container}>
9
+                <View style={{ flex: 8 }}>
10
+                    <Text style={styles.title}>{this.props.title}</Text>
11
+                    <Text style={styles.content}>{this.props.content}</Text>
12
+                </View>
13
+                <View style={{ flex: 2 }}>
14
+                    <Button
15
+                        title={'Close'}
16
+                        onPress={() => this.props.onClose()}
17
+                    />
18
+                </View>
19
+            </View>
20
+        );
21
+    }
22
+}
23
+
24
+const styles = StyleSheet.create({
25
+    container: {
26
+        width: Dimensions.get('window').width * 0.7,
27
+        height: Dimensions.get('window').height * 0.3,
28
+        backgroundColor: '#ffffff',
29
+        borderRadius: 5,
30
+        padding: 16,
31
+    },
32
+    title: {
33
+        fontSize: 17,
34
+        fontWeight: '700',
35
+    },
36
+    content: {
37
+      marginTop: 8,
38
+    },
39
+});
40
+
41
+export default Lightbox;

+ 24
- 0
example/src/screens/types/Modal.js Dosyayı Görüntüle

@@ -0,0 +1,24 @@
1
+import React from 'react';
2
+import { StyleSheet, View, Text } from 'react-native';
3
+
4
+class Modal extends React.Component {
5
+
6
+    render() {
7
+        return (
8
+            <View style={styles.container}>
9
+                <Text>Modal Screen</Text>
10
+            </View>
11
+        );
12
+    }
13
+}
14
+
15
+const styles = StyleSheet.create({
16
+    container: {
17
+        flex: 1,
18
+        alignItems: 'center',
19
+        justifyContent: 'center',
20
+        backgroundColor: '#ffffff',
21
+    },
22
+});
23
+
24
+export default Modal;

+ 33
- 0
example/src/screens/types/Notification.js Dosyayı Görüntüle

@@ -0,0 +1,33 @@
1
+import React from 'react';
2
+import { StyleSheet, View, Text, Dimensions, Button } from 'react-native';
3
+
4
+class Notification extends React.Component {
5
+
6
+    render() {
7
+        return (
8
+            <View style={styles.container}>
9
+                <Text style={styles.title}>In-App Notification</Text>
10
+                <Text style={styles.content}>You have 10 unread notifications!</Text>
11
+            </View>
12
+        );
13
+    }
14
+}
15
+
16
+const styles = StyleSheet.create({
17
+    container: {
18
+        height: 100,
19
+        backgroundColor: '#ff505c',
20
+        padding: 16,
21
+        margin: 10,
22
+    },
23
+    title: {
24
+        fontSize: 18,
25
+        textAlign: 'center',
26
+    },
27
+    content: {
28
+        textAlign: 'center',
29
+        marginTop: 10,
30
+    },
31
+});
32
+
33
+export default Notification;

+ 24
- 0
example/src/screens/types/Push.js Dosyayı Görüntüle

@@ -0,0 +1,24 @@
1
+import React from 'react';
2
+import { StyleSheet, View, Text } from 'react-native';
3
+
4
+class Push extends React.Component {
5
+
6
+    render() {
7
+        return (
8
+            <View style={styles.container}>
9
+                <Text>Push Screen</Text>
10
+            </View>
11
+        );
12
+    }
13
+}
14
+
15
+const styles = StyleSheet.create({
16
+    container: {
17
+        flex: 1,
18
+        alignItems: 'center',
19
+        justifyContent: 'center',
20
+        backgroundColor: '#ffffff',
21
+    },
22
+});
23
+
24
+export default Push;

+ 19
- 0
example/src/screens/types/TopTabs.js Dosyayı Görüntüle

@@ -0,0 +1,19 @@
1
+import React from 'react';
2
+import { PixelRatio } from 'react-native';
3
+
4
+class TopTabs extends React.Component {
5
+    static navigatorStyle = {
6
+        topTabTextColor: '#ffffff',
7
+        selectedTopTabTextColor: '#ff505c',
8
+
9
+        // Icons
10
+        topTabIconColor: '#ffffff',
11
+        selectedTopTabIconColor: '#ff505c',
12
+
13
+        // Tab indicator
14
+        selectedTopTabIndicatorHeight: PixelRatio.get() * 2,
15
+        selectedTopTabIndicatorColor: '#ff505c',
16
+    };
17
+}
18
+
19
+export default TopTabs;

+ 15
- 0
example/src/screens/types/tabs/TabOne.js Dosyayı Görüntüle

@@ -0,0 +1,15 @@
1
+import React from 'react';
2
+import { StyleSheet, View, Text, Dimensions, Button } from 'react-native';
3
+
4
+class TabOne extends React.Component {
5
+
6
+    render() {
7
+        return (
8
+            <View>
9
+                <Text>Tab One</Text>
10
+            </View>
11
+        );
12
+    }
13
+}
14
+
15
+export default TabOne;

+ 15
- 0
example/src/screens/types/tabs/TabTwo.js Dosyayı Görüntüle

@@ -0,0 +1,15 @@
1
+import React from 'react';
2
+import { StyleSheet, View, Text, Dimensions, Button } from 'react-native';
3
+
4
+class TabOne extends React.Component {
5
+
6
+    render() {
7
+        return (
8
+            <View>
9
+                <Text>Tab Two</Text>
10
+            </View>
11
+        );
12
+    }
13
+}
14
+
15
+export default TabOne;