Does react-native not support javascript's Map()? The following code is returning an empty object:
const x = new Map()
x.set(1, 'a')
x.set(2, 'b')
console.log(x)
react-native only supports a subset of Javascript functionality as listed here. This may explain the reason for the unexpected behaviour.
To achieve this what you're requiring in your react-native app, you could use an object to map key/value pairs in a similar way like so:
const x = {};
x[1] = 'a';
x[2] = 'b';
console.log(x);
Related
I have a vector of strings and I want to use each element of that vector with require like that
for(var i = 0; i< happy_songs.melodies.length;++i)
{
var track = '../resources/'
track += happy_songs.melodies[i]
console.log(track)
var song = require(`../resources/${happy_songs.melodies[i]}`)
}
I have tried several syntax approaches but none of them worked, always having a syntax error at the require.
Is there any alternative solution to require which can do the job I want ?
PS: I don't know if this matters but those lines of code are used in an async function.
Hi you can use a aux var as:
var songSource= [path1,path2,...] and use the index as interator to use dinamically
I am trying to create a 3D model in React-Native using Three.js, for that I have to use an image for texture but TextureLoader() function using 'document' and 'canvas' object creation logic, which can't be used in react-native.
so, how can I use an image as texture in react-native using three.js ?
Short summary: the Textureloader didnt work because it required an imageloader which required the inaccesible DOM.
Apparantly there's a THREE.Texture function which i used like this:
let texture = new THREE.Texture(
url //URL = a base 64 JPEG string in this case
);
var img = new Image(128, 128);
img.src = url;
texture.normal = img;
As you can see i used an Image constructor, this is from React Native and is imported like this:
import { Image } from 'react-native';
In the react native documentation it will explain how it can be used, it supports base64 encoded JPEG.
and finally map the texture to the material:
material.map = texture;
Note: i havent tried to show the end result in my webglview yet, but in the element inspector it seems to show proper THREEjs objects.
(Note: this is not the answer)
EDIT: made the code a bit shorter and use DOMParser, still doesnt work because:
"image.addEventListener is not a function"
Which implies the image object which is created in this method doesnt seem to be able to be used in THREEjs,..
var DOMParser = require('react-native-html-parser').DOMParser;
var myDomParser = new DOMParser();
window.document = {};
window.document.createElementNS = (x,y) => {
if (y === "img") {
let doc = myDomParser.parseFromString("<html><head></head><body><img class='image' src=''></img></body></html>");
return doc.getElementsByAttribute("class", "image")[0];
}
}
Edit: be careful with this, because it also overrides the other createElemensNS variants in which they create canvas or other things.
I want to use events to communicate between native ios/android and my react native app.
I see two ways to do this: DeviceEventEmitter and NativeAppEventEmitter, which seem to be fairly identical.
What's the difference between them? Why should I pick one over the other?
Both DeviceEventEmitterand NativeAppEventEmitter are deprecated, you should use NativeEventEmitter instead.
I've found I need to use both when developing cross-platform native extensions that need to send events from Java/Obj-C to JavaScript.
On iOS you send events to JS like this:
[self.bridge.eventDispatcher sendAppEventWithName:#"myProgressEvent" body:#{
#"progress": #( (float)loaded / (float)total )
}];
.. which you pick up in JS using NativeAppEventEmitter.
In Java you send events to JS with:
WritableMap map = Arguments.createMap();
map.putDouble("progress", progress);
getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("myProgressEvent", map);
.. which you pick up in JS using DeviceEventEmitter
It's not ideal, as your JS code needs to then choose the right
emitter for the events to be received.
E.g.
const emitter = Platform.OS == 'ios' ? NativeAppEventEmitter : DeviceEventEmitter;
emitter.addListener("myProgressEvent", (e:Event)=>{
console.log("myProgressEvent " + JSON.stringify(e));
if (!e) {
return;
}
this.setState({progress: e.progress});
});
Using lodash i want to find a team whose id is 3229. I tried following but it is not returning anything.
var team = _.chain(data.teams)
.flatten("divisionTeams")
.find({"id":3229})
.value();
Here is my plunker code.
http://plnkr.co/edit/UDwzRkX3zkYjyf8UwO7I
For the Json data please see the file data.js in Plunker.
Please note i cannot change the json data since i am calling a test api.
flatten doesn't take that argument, see docs. You need to either map or pluck the divisionTeams.
_.chain(data.teams)
.pluck('divisionTeams')
.flatten()
.find({id: 3232})
.value();
So if the requirements are to only use flatten, find, and lodash, that's going to be difficult. But using a for loop to get the division teams might be what you're asking.
var teams = [];
for(var e of data.teams) {
teams.push(e.divisionTeams);
}
var blah = _.flatten(teams, true);
console.log(_.find(blah, function(item) { return item.id == 3222; }));
Update I think I might have it figured out. I was using an old bacon.js version, which might have been part of the problem. I'll update later as I figure out if I have it. Here's the partially working version: http://cdpn.io/yfxDA
I'm trying to call a function every time an element loses focus (an input but in the below example I'm using a div).
This is what I tried:
var $on = $('div')
$on.asEventStream('focusout').subscribe(alert('no!'))
and
var $on = $('div')
$on.asEventStream('focusout').onValue(alert('no!'))
They both work the first time but then stop working. Is there a way to get this to work?
Eventually I would like to merge focusin/focusout and perform a side-effect.
It looks like I just needed the most up to date version of the software. Here's what the code looks like now:
var $on = $('div')
var $h = $('div input')
var d = 'contains'
$h.val(d)
var f = function(arg){
return ($h.val() === d) ? '' : d
}
$on.asEventStream('focusout').merge($on.asEventStream('focusin')).toProperty().assign($h, 'val', f)
I works just fine with the latest version:
http://codepen.io/anon/pen/xLHyq