I am trying to develop a react-native book-searching app and have found this online as a helper tool: https://www.appcoda.com/react-native-introduction/
However, the site is from 2015, so some of the syntax is not properly updated.
I've run into the following issue:
The code that they tell me to use is as follows:
'use strict';
var React = require('react-native');
var Books = require('./Books');
var Search = require('./Search');
var {
AppRegistry,
TabBarIOS,
Component
} = React;
When I used that, I arrived at an Error Message telling me to use
import React, { Component } from 'react';
instead of
import React from 'react-native';
In my attempt to update it to the latest version of React, I arrived at:
'use strict';
import React, { Component } from 'react';
var Books = require('./Books');
var Search = require('./Search');
var {
AppRegistry,
TabBarIOS
} = React;
This is still causing multiple errors. Can someone explain how to properly do what I am trying to do?
You're trying to import AppRegistry and TabBarIOS from React instead of react-native and some syntax errors. Change:
var {
AppRegistry,
TabBarIOS
} = React;
to
import {
AppRegistry,
TabBarIOS
} from 'react-native';
Related
I'm trying to use youtube component in my react-native app. But it keeps giving me an error "element type is invalid: expected a string or a class/function but got: object. Check the render method of xx"
I installed react-native-youtube and my package.json seems to be ok.
"dependencies": {
"react": "15.2.1",
"react-native": "0.30.0",
"react-native-tabbar-navigator": "^0.3.0",
"react-native-youtube": "^0.7.2"
}
}
And my Main.js code looks like the below.
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
TouchableHighlight,
ActivityIndicator,
Image
} from 'react-native';
var YouTube = require('react-native-youtube');
Class Main extends Component {
render() {
return (
<View style={styles.container}>
<YouTube
ref="youtubePlayer"
videoId="KVZ-P-ZI6W4"
play={true}
hidden={false}
playsInline={true}
loop={false}
onReady={(e)=>{this.setState({isReady: true})}}
onChangeState={(e)=>{this.setState({status: e.state})}}
onChangeQuality={(e)=>{this.setState({quality: e.quality})}}
onError={(e)=>{this.setState({error: e.error})}}
onProgress={(e)=>{this.setState({currentTime: e.currentTime, duration: e.duration})}}
style={{alignSelf: 'stretch', height: 300, backgroundColor: 'black', marginVertical: 10}}/>
</View>
);
}
}
I really have no idea why this error happens. Please share any ideas you have!! (:
Best
Use import YouTube from 'react-native-youtube'; instead of var YouTube = require('react-native-youtube');
Also, you have Class in your code starting with uppercase instead of class
My project is giving this warning, which I found after trying to debug why my native view component was no longer showing. This is something that has been working previously, however, the Xcode project has been rebuilt recently. I'm using CocoaPods to integrate RN in my app.
I'm wondering if something has changed or if I have correct versions in my package.json:
"react": "^0.14.8",
"react-native": "^0.22.0",
The code accessing the custom native component:
import React from 'react-native'
var {
View,
StyleSheet,
NavigatorIOS,
Component,
Text,
requireNativeComponent,
} = React;
class JuceComponent extends Component {
render() {
return <ReactJuceView {...this.props} />;
}
}
JuceComponent.propTypes = {
// props to send to Juce Component
}
var ReactJuceView = requireNativeComponent('ReactJuceView', JuceComponent);
I'm working on a react native app with a meteor backend. I know to tie these two together I have to use the node package ddp-client for the app to connect. https://www.npmjs.com/package/ddp-client
But what is the best practice for going about this. Should I:
Define the DDPClient and connect in index.ios.js where i keep connected and find some way to issue requests from the main app component? (I wouldnt know how to do this however but it would be a start.)
Only connect through dpp on each component that I need this for and issue a request each time?
Really any real example would help. Most of the code I find online are single page examples with not much else. Or just a push in the right direction.
p.s. The app is a marketplace. Thanks!
'use strict';
var React = require('react-native');
var {
AppRegistry,
NavigatorIOS,
StyleSheet,
StatusBarIOS,
} = React;
var DDPClient = require("ddp-client");
class AppWrapper extends React.Component{
componentDidMount() {
var ddpClient = new DDPClient({url: 'ws://localhost:3000/websocket'});
ddpClient.connect(function(error, wasReconnect) {
if (error) {
console.log('DDP connection error!');
return;
}
if (wasReconnect) {
console.log('Reestablishment of a connection.');
}
console.log('connected!');
});
}
render(){
return(
<NavigatorIOS
barTintColor='black'
titleTextColor='white'
tintColor='white'
style={styles.container}
translucent={false}
initialRoute={{
backButtonTitle: ' ',
component: Homeios,
title: 'hombro',
}}
/>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
},
});
AppRegistry.registerComponent('someApp', () => AppWrapper);
You can use react-native-meteor package in your react native app which is pretty easy. https://www.npmjs.com/package/react-native-meteor check this link for documentation it has many awesome functions including Accounts package ready to use.
I am developing an IOS app in Flash CS6. I'm trying to load an external swf. The preloader loads the external swf. The loading itself seems to work. After loading the external swf, I add its movieclips to the stage. But strangely, on iOS devices, the movieclips are not added to stage.
Here's the code for the preloader:
package {
import flash.display.MovieClip;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.display.Bitmap;
import flash.utils.getDefinitionByName;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.net.URLRequest;
import flash.system.LoaderContext;
import flash.system.ApplicationDomain;
public class Test extends MovieClip {
private var lobbyBgAssetsLoader:Loader = new Loader() ;
private var ldrContext:LoaderContext;
public function Test() {
var urlStr:String = "cards.swf";
lobbyBgAssetsLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, LobbyBgAssetsswfLoaded);
lobbyBgAssetsLoader.load(new URLRequest(urlStr));
ldrContext = new LoaderContext(false,ApplicationDomain.currentDomain,null);
}
private function LobbyBgAssetsswfLoaded(e:Event):void
{
txt.text = "loaded complete test ";
var logoSmall:Bitmap = new Bitmap();
var classDefinition:Class = lobbyBgAssetsLoader.contentLoaderInfo.applicationDomain.getDefinition("cardBg") as Class;
txt.text = "after load ";
var img:MovieClip = new classDefinition() as MovieClip;
this.addChild(img);
}
}
}
All actionscript gets converted into native Obj-C code when you compile your app for iOS. So even if your app is able to load an SWF file from the internet, the actionscript inside will not be converted to Obj-C.
Apple does not allow the actual flash player inside an iOS app, so an app cannot play back SWF content.
package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flare.basic.Scene3D;
import flare.basic.Viewer3D;
import flare.core.Pivot3D;
import flare.basic.Scene3D;
import flare.basic.Viewer3D;
import flare.core.Pivot3D;
[SWF(frameRate = 60, width = 800, height = 450, backgroundColor = 0x000000)]
/**
* Starting the project.
*/
public class MyFirstApp extends Sprite
{
private var scene:Scene3D;
private var planet:Pivot3D;
private var astronaut:Pivot3D;
public function MyFirstApp()
{
trace("Hello Flare3D");
}
}
}
I am trying to get Flare3D to work in an ActionScript Mobile Project in Flash Builder.When I run the project I am recieving an error message that says ... " VerifyError: Error #1014: Class mx.core::ByteArrayAsset could not be found. " All I have in this code is three Vairables, I have removed all other code and still I recieve this message. I have added Flare3D into the ActionScript BulderPath. My Goal is to take the Yellow Planet Tutorial and run it on iOS Air Simulator. http://www.flare3d.com/demos/yellowplanet/.... If I dont include the 3 variables I get the trace statement to execute with no error message. How does adding three variable cause this error, or rather what am I overlooking here?
Fixed error mx.core::ByteArrayAsset by adding the Flex SDK into my Actionscript Mobile project. By using Scene3D this must be linked to the project.