Develop Reference

'LikeView' has no propType 'RCTFBLikeView.onLayout' of native type 'boolean' if you haven't changed this

LikeView has no propType for native prop RCTFBLikeView.onLayout of native type boolean
If you haven't changed this prop yourself, this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away.
Not sure why I am getting this error. I'm not using LikeView at all in the android app. I've tried running npm start --reset-cache.
Also iOS version of the app runs no problem. This only occurs for android.
Any suggestions welcomed.
Thanks!

I figured out that the problem is (as RN points out) a mismatch between the native props and the JS ones on the props that every view uses. Namely:
renderToHardwareTextureAndroid
onLayout
accessibilityLiveRegion
accessibilityComponentType
importantForAccessibility
accessibilityLabel
testID
Since I am not using any of the views that the package uses, namely:
FBLikeView
FBLoginButton
FBSendButton
FBShareButton
I tried to set this props as 'native only', so that they are not bound to the JavaScript side. In every component (in the example, FBShareButton.js), I replaced:
const RCTFBShareButton = requireNativeComponent(
'RCTFBShareButton',
ShareButton,
);
with
const RCTFBShareButton = requireNativeComponent(
'RCTFBShareButton',
ShareButton,
{
nativeOnly: {
onChange: true,
onLayout: true,
testID: true,
importantForAccessibility: true,
accessibilityLiveRegion: true,
accessibilityComponentType: true,
accessibilityLabel: true,
renderToHardwareTextureAndroid: true,
}
},
);
I am now going to check if the views are getting rendered properly and edit my post later, but if you just want to be able to compile your app in order to continue development (as it is my case at the moment), that should let you do so.
Edit
I successfully rendered the LoginButton component using the example in the README with my changes.
Edit 2
I made a pull request with my changes to the package. I don't like the solution, but it might raise FB's attention. In the meantime, you can just use my fork. In your package.json, just replace the fbsdk line with this:
"react-native-fbsdk": "git+https://github.com/motius/react-native-fbsdk.git#fix-views"
This other pull request might be a better solution, actually.

Similar to the solution suggested by #martinarroyo, I figured that it has to do with some components that are not synced between the native code and the js code.
If you are not using these components, instead of adding the nativeOnly property in every js file you use it, I commented out the exports from the react-native-fbsdk index.js as follows:
//native components
// exports.LikeView = require('./FBLikeView');
// exports.LoginButton = require('./FBLoginButton');
// exports.SendButton = require('./FBSendButton');
// exports.ShareButton = require('./FBShareButton');
Obviously this is just a workaround but that should get you through that error

You can downgrade react-native-fbsdk to 0.5.1 to avoid this issue until a fix has been merged into a new version.

So after countless experimentation and banging my head on the table, i think the solution was the versioning of the dependency.
Here's a list of things I attempted and the one I think that resolved the issue is marked with an * because I'm not 100% sure if it was this step that resolved it.
removing node_modules folder and reinstalling it.
doing the react-native-git-upgrade as #matt suggested
reinstalled react-native-fbsdk multiple times following the instructions and double checking the code.
changing the buildToolsVersion & targetSdkVersion to 25.
5**. ultimately running react-native uninstall react-native-fbsdk followed by react-native install react-native-fbsdk#0.5.0.
Note* number 5 was attempted throughout the past two days..yet only now it worked...So I don't know what black magic it is that caused it to work just now...
The issue with number 5 is that prior to yesterday the fbsdk dependency version was 0.5.0 and as of yesterday, it was upgraded to 0.6.0. SO I am not sure why even though I reinstalled it yesterday too, it did not fix the bug.
If someone who is more familiar with this can provide an explanation as to why this occurred I would be inclined to learn.

React native + Appium, how to find an element

I'm trying (for too long...) to get appium working with react native, but can't seem to find any element.
I'm using an emulator, Nexus 6, android 6.0, ubuntu, appium 1.6.0, RN 0.39.2.
I'm trying to get the most basic example to work:
// foo.js
render () {
return (
<Text>foo</Text>
)
}
// spec.js
// ... some setup ...
driver
.elementByAccessibilityId('foo')
.click()
and I'm getting...
1) should be able to find 'Buttons' and click it
0 passing (13s)
1 failing
1) Android find and click should be able to find 'Buttons' and click it:
Error: [elementByAccessibilityId("foo")] Error response status: 7, , NoSuchElement - An element could not be located on the page using the given search parameters. Selenium error: An element could not be located on the page using the given search parameters.
I also tried setting:
<Text accessible accessibilityLabel={ 'foo' }>foo</Text>
same response ...
any ideas?

I ended up using this solution:
<Text accessibilityLabel={ 'FOO' } testID={ 'FOO' }>some stuff here</Text>
and then in the test:
driver
.elementByAccessibilityId('FOO')
Credit goes to #jonesdar for pointing that out here

ionic android unexpected token

I am using the Ionic Framework to build a mobile app for Android/iOS. I was able
to build the project for android (ionic build android). When I run the app, it will be only a white screen, that's because there is an error (when you use GapDebug, you can run apps on your phone and you will be able to debug, and see errors). Now if I run it on the desktop browser there really is NO error and everything is working. Below is the error that is shown in GapDebug:
Now when you check the code in service.js line 394:
There's nothing wrong with the code right? If I try to change line 394 to something like key : self.currentUser, there will be NO error and the app will work. What seems to be the problem here?

Not sure why you are making an object's attribute a list? If you want the key to be childQuestionSnapshot.key then remove the square brackets.
If you are trying to update a list of objects, you can do something similar to the below:
var test = [{key: 'thisguy'},{key: 'thatguy'},{key: 'myguy'}]
test.forEach(function(item){
item['key']='newguy'
})
console.log(test)

Do this instead
var updateObj = {};
updateObj[childQuestionSnapshot.key] = self.currentUser;
applicantRef.update(updateObj, function() {
console.log("applicant answers updated");
});

setting select to width 100% disables select function on android 5.1.x and Nexus-7 (phonegap build)

i've to work with phonegap build, cli 5.x and try to build a search form with several inputs, 3 of them are select boxes.
all works fine till i wanted to set the css of the select nodes to 100% with. If i enable this css the selection does not open any more.
My Android Device for testing that won't work is a Nexus 7 with Android 5.1.1 (Lollipop). On IOS and Android Devices with 4.x all is working fine.
The language we use is Typescript with JQuery and will be compiled to Javascript ES5 (commonJS Style).
Sample Script:
var sampleData = [{"val": 1, "text": "sample A"}, {"val": 2, "text": "sample B"}];
var myContainer $('#content-box');
var selectBox = $('<select>').attr('id', 'mySelectBox');
selectBox.append($('<option>').attr('value', 'none').html('-- none --'));
for(var index in sampleData) {
var obj = sampleData[index];
selectBox.append($('<option>').attr('value', obj['val']).html(obj['text']));
}
// code above works fine
$('select').css('width', '100%');
// this crashes the popup after compilation
// and i have to use phonegap-build
by the way, if i have extreme long content going over 100% of the screen with it works. just stretching seems to crash.
i don't work with jquery mobile, some features we build won't work with it !!!
tried external css also, same failure.
somebody has a workaround or a fix for it? somebody can confirm this solution?

Try setting an id for the element you want to modify,
then try
$('#select').css('width', '100%');
if id="select"

Phonegap window.open does not work on Android

I have an iOS/Android app built on cordova 2.6 and jqm 1.3. I need to open a link to an external website after the user clicks on a button. The code I am using is:
var ref = window.open('http://google.com','_self','location=yes');
ref.addEventListener('loadstart',function(event) {
console.log('load started');
});
ref.addEventListener('loadstop',function(event) {
console.log('load stopped');
});
ref.addEventListener('loaderror',function(event) {
console.log('load error = ' + JSON.stringify(event));
});
On iOS everything performs like I would expect. A new browser window opens with the google website loaded. But I cannot get anything to to load in Android. When I click on the button, nothing happens. I have put in console statements before and after the window.open, so I know the code is at least being executed.
My config.xml should be wide open for white listed sites:
<access origin=".*"/>;
I have tested on a Nexus 7 (android 4.2) and an android 2.2 emulator with the same results on both.
Does anyone know why window.open would not be firing correctly on android?

It looked like it was a problem with 2.6 loading plugins on Android. I upgraded to 2.7 and everything started to work.

Perhaps it's a solution to use the ChildBrowser plugin? This gives you a bit more control over the operation itself, while still preserving platform compatibility between iOS and Android.
In most cases, I use something like the following snippet to use the childbrowser to display an external page.
function openBrowser(url) {
// determine if the childbrowser plugin is available
var useChildBrowser = ('plugins' in window && window.plugins.childBrowser);
if (useChildBrowser) {
popup = window.plugins.childBrowser;
popup.showWebPage(url, { showLocationBar: false, showAddress: false });
} else {
popup = window.open(url, 'Share', "['width=600px', 'height=400px', 'resizable=0', 'fullscreen=yes']");
}
}
Note that this falls back to using window.open if the ChildBrowser plugin isn't available, so you won't break anything else with this. Could be worth a shot, perhaps?