geekyants / vue-native-website Goto Github PK

There's no mention on sending SMS at
https://vue-native.io/docs/device-apis.html

Would you please mention either how to do it, or say it's not possible?

Thanks

When I tried to run the code, It gave me this error

Creating_ react native app vueNative project
Create react-native vueNative project
/usr/local/lib/node_modules/vue-native-cli/src/index.js:140
  process.chdir(projectName);
          ^

Error: ENOENT: no such file or directory, chdir 'vueNative'
    at handleAndAddVueNativePackageDependencySync (/usr/local/lib/node_modules/vue-native-cli/src/index.js:140:11)
    at createNormalNativeApp (/usr/local/lib/node_modules/vue-native-cli/src/index.js:90:3)
    at init (/usr/local/lib/node_modules/vue-native-cli/src/index.js:78:7)
    at Command.<anonymous> (/usr/local/lib/node_modules/vue-native-cli/src/index.js:59:7)
    at Command.listener (/usr/local/lib/node_modules/vue-native-cli/node_modules/commander/index.js:315:8)
    at Command.emit (events.js:182:13)
    at Command.parseArgs (/usr/local/lib/node_modules/vue-native-cli/node_modules/commander/index.js:651:12)
    at Command.parse (/usr/local/lib/node_modules/vue-native-cli/node_modules/commander/index.js:474:21)
    at Object.<anonymous> (/usr/local/lib/node_modules/vue-native-cli/src/index.js:63:9)
    at Module._compile (internal/modules/cjs/loader.js:702:30)

After implement the WebView is nothing display.

At this point you will need to manually change the app.json that has been generated inside the new project directory. To make the packager recognize .vue files, a sourceExts field under packagerOpts.

This information is out of date.

Following the instructions on this page to create a new project using the vue-native init <projectName> command, the new project was not created. This was attempted on a Windows 10 machine which has Expo CLI and Vue Native CLI installed. Below is what was entered in the Git Bash terminal along with the result. The new project was to be named helloWorld but nothing was created in the destination folder. What needs to be changed for the project to be created?

jason.black@MARIGOLD MINGW64 /z/files/development/vue_native/code/sandbox
$ vue-native init helloWorld
Using globally installed expo-cli 3.7.1

Creating Vue Native project helloWorld

- Creating project with expo-cli

[18:28:18] --name: argument is required in non-interactive mode.
√ Created project with expo-cli

(node:14736) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, chdir 'Z:\files\development\vue_native\code\sandbox' -> 'helloWorld'
    at process.chdir (internal/process/main_thread_only.js:29:13)
    at installPackages (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\src\index.js:182:11)
    at createExpoProject (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\src\index.js:123:3)
    at init (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\src\index.js:101:5)
    at Command.<anonymous> (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\src\index.js:69:7)
    at Command.listener (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\node_modules\commander\index.js:315:8)
    at Command.emit (events.js:210:5)
    at Command.parseArgs (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\node_modules\commander\index.js:651:12)
    at Command.parse (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\node_modules\commander\index.js:474:21)
    at Object.<anonymous> (C:\Users\jason.black\AppData\Roaming\npm\node_modules\vue-native-cli\src\index.js:81:9)
(node:14736) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:14736) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

• Update commands (like command line options of CLI, such as --no-expo)
• Add note to address GeekyAnts/vue-native-core#194

I tried to display image in my vue-native App, and maybe found a mistake in this document.

I got SyntaxError from this part.

         <image 
           :source="{require('/vue-native/img/favicon.png')}" 
         /> 

Removing { and } solved the error.

         <image 
           :source="require('/vue-native/img/favicon.png')"
         /> 

here my package.json

{
"name": "empty-project-template",
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"expo": "^30.0.1",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
"vue-native-core": "0.0.8",
"vue-native-helper": "0.0.9",
"vue-native-router": "0.0.1-alpha.3"
},
"devDependencies": {
"vue-native-scripts": "0.0.14"
}
}

im using router but i cannot get navigat into my next screen
props is undefined

here my script

App.vue

<template>
    <app-navigation></app-navigation>
</template>
<script>
    import { StackNavigator } from "vue-native-router";
    import Home from "./src/screens/home.vue";
    import Camera from "./src/screens/camera.vue";
    const AppNavigation = StackNavigator(
        {
            Home,Camera
        },
        {
            initialRouteName: 'Home'
        }
    );
    export default {
        components: { AppNavigation }
    }
</script>

my navigation triger

<template>
    <view class="container">
        <button title="Ambil Foto" :on-press="goToCamera" />
    </view>
</template>
<script>
    export default {
        props: {
            navigation: {
                type: Object
            }
        },
        methods:{
             goToCamera: ()=>{
                this.navigation.navigate("Camera");
            }
        }
    };
</script>

error message : undefined is not an object (evaluating '_this.navigation.navigate')

thanks

this code not working

<template>
    <view style = {styles.container}>
        <switch
            :on-value-change = "handleChange"
            :value = "value"/>
    </view>
</template>

<script> export default { data: function() { return { value: false } }, methods: { handleChange: () => { this.value = !this.value } } } </script>

$emit is now functional. This section needs to be removed:

https://vue-native.io/docs/FAQ.html#Support-for-emit-for-communication-from-child-to-parent

GeekyAnts/vue-native-core#25 (comment)

Hi,
I just happened on this new repo while browsing the native base repos for starter template (wanted something without typescript and mobx to use with vue-react, so i could write my web and mobile apps with vue). Is this an indication of something in the offing for vue with respect to nativebase ?

On this page of the Vue Native Getting Started guide the instructions are to create a .vue file and copy/paste the lines of code below.

In a newly created hello-world project I created a new file called test.vue and copied/pasted the code into it, as per the instructions. This file is currently stored at the same level in the project's file structure as App.vue, app.json etc. However, when the hello-world app is refreshed on my phone, it still shows the content that project's App.vue file.

Can more specific instructions be given as to what the new .vue file should be named, where it should be placed in the project's file structure and any other pertinent details to get it to display on the phone?

node npm版本都是最新的，按照步骤安装至vue-native init 报错：
Error: ENOENT: no such file or directory, uv_chdir

when I was going to install vue native app and after wrote vue-native init APP-NAME, I was told to install expo-cli then I write "Y" but it was really slow then stopped so I install expo-cli first then install vue app and it worked,

so the issue is expo-cli installation in vue-native installation not working for me,

thanks

Hi , I am looking for some examples of how to use the react native elements directly inside vue-native code. For example I would like to use the DatePicker .
The documentation has no examples of how to embed react-native elements inside vue-native. This would help massively for all such components.

Also, could I ask if it is possible to add the DatePicker into vue-native as it is such an important component for any form input.

Hi,
How can i use .env ? I need to make global variable for my project
Have nice day,

Is this possible? You can also use VuePress for documentation!

I am following the docs and I am on conditional part.

<view>
  <text v-if="seen">Now you see me</text>
  <button :on-press="seen = !seen">Click to Toggle</button>
</view>

when i paste this into my code i get the error of:
Invariant Violation: The title prop of a Button must be a string

so i wrote a v-bind:title="something" and set that in the data but then i get the error of
console.error: "[Vue warn]: You may have an infinite update loop in a component render function (found in <Anonymous>)"

I do something wrong or the docs are outdated?

I would like to use bootstrap-vue in my new project, this is my first time of trying vue-native. I can't seem to tell which is the entry file or root file from where I could do something like this as instructed on bootstrap-vue's docs page:

import Vue from "vue";
import BootstrapVue from "bootstrap-vue";

Vue.use(BootstrapVue);

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Other Options

I've also tried importing a custom stylesheet, but this wouldn't work. It throws and unable to resolve path to the imported file.

Please how may I use bootstrap with a vue-native project?

Thanks

i`ve got an issue when i was trying to use vue-native-router. In api you ask to install these modules to use it:

npm install -g react-native-reanimated react-native-gesture-handler react-native-paper

But there is react-native-screens is also needed

Documentation Geolocation Example does not function as expected.

Review of issues and code changes to address them.

Packages:

• Node v10.15.0
• NPM v6.13.0

• "dependencies": {
• "expo": "~36.0.0",
• "react": "~16.9.0",
• "react-dom": "~16.9.0",
• "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
• "react-native-web": "~0.11.7",
• "vue-native-core": "0.1.4",
• "vue-native-helper": "0.1.4"

1. Change package imports to match Expo API

• Addressed with PR:8cd66c1. Issue: expo imports #52
• Docs example imports 'Constants' which do not appear to be required for code example
• Did not seem to require 'sensors' import. Could now be built-in.
• See Expo sensor update #60

2. Condition: location access denied

• Error: "Can't find variable: 'errorMessage'
• Fix: Prefix errorMesssage with 'this' in getLocation method
• Fix: Add errorMessage field to template (otherwise no output)

3. Condition: When user denies permission for location access

• Error: "possible unhandled promise rejection"
• Cause: Code does not trap denial and falls through to getCurrentPositionAsync
• Fix: add conditional to getCurrentPositionAsync

 } else if (status.granted) {

4. Condition: User allows location access

• Error: no location display
• Fix: There are two different keys that can be used to check permission status
• Status.granted or Status.status
• Fix: Change status test so that true/false status can be used to execute code

5. Condition: No location display after status.status = true

• Error: No error message
• Fix: Actual data returned from getCurrentPositionAsync is a Coords object
• Fix: Change access to position data object

   this.location = location1.coords;
   // add <text>{{ location }}</text> to template
   OR
   this.lng = location.coords.longitude
   // requires adding lng to data
  

6. Condition: No location display after user grants permission

• Error: status.granted false
• Fix: User may have global setting of location: never
• Fix: Add example for testing global setting and add redirect
• Status: Pending

7. Revised code example
   Vue-native-geolocation

8. General Notes

• Expo app and/or Expo server frequently require restart for state reset. Probably configuration error.
• Presently getting DatePicker and TimePicker warnings for new merged packages.
• Fix: Haven't found one yet.

Please review and comment. I can attempt PR if accepted

Looks like the cli tool is now generating the app.json file correctly, so the note section here can be removed: https://vue-native.io/docs/installation.html#For-Expo-users

That is, this section:

If you end up copying that "sourceExts" line verbatim from the docs (w/o removing the last ,) you end up getting this error:

INFO
14:42
Starting Metro Bundler on port 19001.
INFO
14:42
Opening exp://127.0.0.1:19000 in iOS simulator
INFO
14:42
Tunnel ready.
ERROR
14:42
node_modules/expo/AppEntry.js: "" is not a valid identifer name
ERROR
14:42
Building JavaScript bundle: error

Just posting it here for searchability in case someone experience the same issue :-)

I have figured this out myself, but the documentation needs to be updated.

The documentation states:

At this point you will need to manually change the app.json that has been generated inside the new project directory. To make the packager recognize .vue files, a sourceExts field under packagerOpts.

{
  "expo": {
    "name": "Your app's name",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    ...
    "packagerOpts": {
     "sourceExts": ["js", "json", "ts", "tsx", "vue"],
      "config": "metro.config.js"
    }
  }
}

It then goes on to say:

Remove the Content of the App.js file and rename App.js file with App.vue.

This is misleading and backwards. Let's describe how the system actually works.

The sourceExts property in App.json is order-sensitive. You need to put the "vue" entry at the start of the list like this:

"sourceExts": ["vue", "js", "json", "ts", "tsx"],

Then, don't do some crazy delete content rename file bs. Just delete App.js. App.vue already exists by default in the initial installation - create it if necessary.

You may need to restart the Metro server process (in your shell, ctrl+c to exit the program, then npm start again). And bam, up comes the vue app.

Devs please update your docs - there appears to be a lot of out of date information. Also please run through your vue-native init function - right now it installs a react-native app by default and doesn't consider the vue file that is included in the install.

This repository is not of vuejs.org
So, README.md should be rewriten to document of vue-native.io