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);
Related
Trying to bubble a function I made in Swift file to the main App.tsx
HelloWorld.swift
#objc(HelloWorldModule)
class HelloWorldModule: NSObject {
#objc
func ShowMessage()->Void
{
print("hello world")
}
}
HelloWorld.m
#import <React/RCTBridgeModule.h>
#interface RCT_EXTERN_MODULE(HelloWorldModule, NSObject)
RCT_EXTERN_METHOD(ShowMessage)
#end
App.tsx. -- the main app from react native
import React, { useEffect, useRef, useState } from 'react';
import { Alert, Button, Image, NativeModules } from 'react-native';
import styled from 'styled-components/native';
console.log(NativeModules.HelloWorldModule);
NativeModules.HelloWorldModule.ShowMessage();
Goal:
Trying to get the terminal log to output "hello world" from App.tsx
Actual Output:
LOG {"ShowMessage": [Function nonPromiseMethodWrapper], "getConstants": [Function anonymous]}
WARN Module HelloWorldModule requires main queue setup since it overrides `init` but doesn't
implement `requiresMainQueueSetup`. In a future release React Native will default to initializing
all native modules on a background thread unless explicitly opted-out of.
I am programming an app in Ionic and using hammer.js for the pan gesture (for the moment, only this one). In the browser (chrome and safari) this is working fine, also on Android device, but I just discovered that pan gesture is not working on iOS (neither real device nor emulator). After a long while research, I don't find the way to make it work. Neither pan nor panend work (click does).
Note: The events are (should be) launched from a custom component, not a page itself.
I have seen other with similar problems, but no solution that works for me. Here is finally stated that hammerjs it not so compatible with iOS, but here says it it. This guy seems to have a similar problem, but found no solution.
I have also try adding to my app.module.ts the following code and the provider {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}. No success.
import * as Hammer from 'hammerjs';
import {HammerGestureConfig, HAMMER_GESTURE_CONFIG} from '#angular/platform-browser';
export class MyHammerConfig extends HammerGestureConfig {
overrides = <any> {
'pan': {
enable: true,
direction: Hammer.DIRECTION_HORIZONTAL
}
};
}
Hier is (an extract of) my code:
export class SeekbarQuantizedComponent implements OnInit, OnChanges {
private stepsPositions: number[]; // Will have the position of the different steps (in %)
private progress = 0; // The progress of the progressbar in %
[...]
onClick($event: MouseEvent) {
const clickX = $event.offsetX * 100 / this.background.nativeElement.offsetWidth;
this.setProgress(clickX);
this.valueSelected.emit(this.selectedPosition);
}
onPan($event) {
this.setProgress(100 * ($event.changedPointers[0].offsetX / this.background.nativeElement.offsetWidth));
}
onPanEnd($event) {
this.setProgress(100 * ($event.changedPointers[0].offsetX / this.background.nativeElement.offsetWidth));
this.valueSelected.emit(this.selectedPosition);
}
[...]
}
The html:
<div #background class="progress-outer"
(click)="onClick($event)"
(pan)="onPan($event)"
(panend)="onPanEnd($event)">
<div class="progress-inner"
[style.width]="progress + '%'">
{{text}}
</div>
</div>
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';
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
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.