├── .watchmanconfig
├── app.json
├── README.md
├── .babelrc
├── rn-cli.config.js
├── .gitignore
├── Another.vue
├── App.vue
├── vueTransformerPlugin.js
├── package.json
└── Main.vue


/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 |   "expo": {
3 |     "sdkVersion": "27.0.0"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | YouTube Video: [Vue Native Basics](https://youtu.be/8e0XHPylhj0)
2 | 
3 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["babel-preset-expo"],
3 |   "env": {
4 |     "development": {
5 |       "plugins": ["transform-react-jsx-source"]
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/rn-cli.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   getTransformModulePath() {
3 |     return require.resolve("./vueTransformerPlugin.js");
4 |   },
5 |   getSourceExts() {
6 |     return ["vue"];
7 |   }
8 | };
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # expo
 4 | .expo/
 5 | 
 6 | # dependencies
 7 | /node_modules
 8 | 
 9 | # misc
10 | .env.local
11 | .env.development.local
12 | .env.test.local
13 | .env.production.local
14 | 
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 | 


--------------------------------------------------------------------------------
/Another.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <view>
 3 |     <text>Another Screen</text>
 4 |     <image
 5 |       :style="{width: '100%', height: '100%'}"
 6 |       :source="{uri: navigation.getParam('imageSrc')}"
 7 |     />
 8 |     <button title="go back" :on-press="() => navigation.goBack()" />
 9 |   </view>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   props: {
15 |     navigation: {
16 |       type: Object
17 |     }
18 |   }
19 | }
20 | </script>
21 | 
22 | 


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <app-navigation></app-navigation>
 3 | </template>
 4 | 
 5 | <script>
 6 | import { StackNavigator } from "vue-native-router"
 7 | import MainScreen from './Main'
 8 | import AnotherScreen from './Another'
 9 | 
10 | const AppNavigation = StackNavigator(
11 |   {
12 |     Main: MainScreen,
13 |     Another: AnotherScreen,
14 |   },
15 |   {
16 |     initialRouteName: 'Main',
17 |   }
18 | )
19 | export default {
20 |     components: { AppNavigation }
21 | }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/vueTransformerPlugin.js:
--------------------------------------------------------------------------------
 1 | // For React Native version 0.52 or later
 2 | var upstreamTransformer = require("metro/src/transformer");
 3 | 
 4 | // For React Native version 0.47-0.51
 5 | // var upstreamTransformer = require("metro-bundler/src/transformer");
 6 | 
 7 | // For React Native version 0.46
 8 | // var upstreamTransformer = require("metro-bundler/build/transformer");
 9 | 
10 | var vueNaiveScripts = require("vue-native-scripts");
11 | var vueExtensions = ["vue"]; // <-- Add other extensions if needed.
12 | 
13 | module.exports.transform = function({ src, filename, options }) {
14 |   if (vueExtensions.some(ext => filename.endsWith("." + ext))) {
15 |     return vueNaiveScripts.transform({ src, filename, options });
16 |   }
17 |   return upstreamTransformer.transform({ src, filename, options });
18 | };
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuenative-example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "devDependencies": {
 6 |     "jest-expo": "~27.0.0",
 7 |     "react-native-scripts": "1.14.0",
 8 |     "react-test-renderer": "16.3.1",
 9 |     "vue-native-scripts": "0.0.9"
10 |   },
11 |   "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
12 |   "scripts": {
13 |     "start": "react-native-scripts start",
14 |     "eject": "react-native-scripts eject",
15 |     "android": "react-native-scripts android",
16 |     "ios": "react-native-scripts ios",
17 |     "test": "jest"
18 |   },
19 |   "jest": {
20 |     "preset": "jest-expo"
21 |   },
22 |   "dependencies": {
23 |     "expo": "^27.0.1",
24 |     "react": "16.3.1",
25 |     "react-native": "~0.55.2",
26 |     "vue-native-core": "0.0.7",
27 |     "vue-native-helper": "0.0.8",
28 |     "vue-native-router": "0.0.1-alpha.3"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/Main.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <view class="container">
  3 |     <text :style="{color: 'green', fontSize: 20}">Myyy Vue Native App</text>
  4 |     <text>{{ myInput }}</text>
  5 |     <image
  6 |       :style="{width: 50, height: 50}"
  7 |       :source="{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}"
  8 |     />
  9 |     <text-input
 10 |       :style="{height: 40, width: 150, borderColor: 'gray', borderWidth: 1}"
 11 |       v-model="myInput"
 12 |     />
 13 |     <touchable-opacity
 14 |       :on-press="handleButton"
 15 |       :style="{backgroundColor: 'red', padding: 10}"
 16 |     >
 17 |       <text :style="{color: 'white'}">My Button</text>
 18 |     </touchable-opacity>
 19 |     <!-- <button
 20 |       :on-press="handleButton"
 21 |       title="My Button"
 22 |       color="#841584"
 23 |       accessibility-label="Learn more about this purple button"
 24 |       :style="{backgroundColor: 'red'}"
 25 |     /> -->
 26 | 
 27 |     <!-- <flat-list
 28 |         :data="countries"
 29 |         :render-item="({item}) => renderList(item)"
 30 |     /> -->
 31 | 
 32 |     <view :style="{borderTopWidth: 1, borderTopColor: 'gray', width: '100%'}"></view>
 33 | 
 34 | 
 35 |     <scroll-view :style="{width: '100%'}">
 36 |     <view class="border" v-for="(post, index) in posts" :key="index">
 37 |       <touchable-opacity class="flex-container" :on-press="() => handleListTap(post)">
 38 |         <image
 39 |           :style="{width: 40, height: 40, borderRadius: 25, marginRight: 8}"
 40 |           :source="{uri: post.data.thumbnail}"
 41 |         />
 42 |         <text>{{ post.data.title }}</text>
 43 |       </touchable-opacity>
 44 |     </view>
 45 |     </scroll-view>
 46 | 
 47 |   </view>
 48 | </template>
 49 | 
 50 | <script>
 51 | 
 52 | 
 53 | export default {
 54 |   props: {
 55 |     navigation: {
 56 |       type: Object
 57 |     }
 58 |   },
 59 |   mounted() {
 60 |     fetch('https://reddit.com/r/aww.json?raw_json=1')
 61 |       .then(response => response.json())
 62 |       .then(data => {
 63 |         this.posts = data.data.children
 64 |       })
 65 |   },
 66 |   data() {
 67 |     return {
 68 |       message: 'Hello, world!',
 69 |       myInput: '',
 70 |       posts: [],
 71 |       countries: [
 72 |         { name: "Australia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/au.png" },
 73 |         { name: "Belgium", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/be.png" },
 74 |         { name: "Bulgaria", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/bg.png" },
 75 |         { name: "Canada", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ca.png" },
 76 |         { name: "Switzerland", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ch.png" },
 77 |         { name: "China", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cn.png" },
 78 |         { name: "Czech Republic", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cz.png" },
 79 |         { name: "Germany", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/de.png" },
 80 |         { name: "Spain", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/es.png" },
 81 |         { name: "Ethiopia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/et.png" },
 82 |         { name: "Croatia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hr.png" },
 83 |         { name: "Hungary", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hu.png" },
 84 |         { name: "Italy", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/it.png" },
 85 |         { name: "Jamaica", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/jm.png" },
 86 |         { name: "Romania", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ro.png" },
 87 |         { name: "Russia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ru.png" },
 88 |         { name: "United States", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/us.png" },
 89 |       ],
 90 |     }
 91 |   },
 92 |   methods: {
 93 |     handleButton() {
 94 |       this.myInput = 'Button clicked'
 95 |       this.navigation.navigate("Another");
 96 |     },
 97 |     handleListTap(post) {
 98 |       this.navigation.navigate('Another', {
 99 |         imageSrc: post.data.preview.images[0].source.url
100 |       })
101 |     }
102 |     // renderList: (item) => {
103 |     //   return (<Text>{item.name}</Text>)
104 |     // }
105 |   }
106 | }
107 | </script>
108 | 
109 | 
110 | <style>
111 | .container {
112 |   background-color: white;
113 |   align-items: center;
114 |   justify-content: center;
115 |   flex: 1;
116 | }
117 | .text-color-primary {
118 |   font-size: 20;
119 |   color: blue;
120 | }
121 | 
122 | .border {
123 |   border-bottom-width: 1;
124 |   border-color: gray;
125 |   width: 100%;
126 |   padding: 15;
127 | }
128 | 
129 | .flex-container {
130 |   flex-direction: row;
131 |   align-items: center;
132 | }
133 | </style>
134 | 


--------------------------------------------------------------------------------