I am trying to use react-native-swipe-list-view inside clojurescript. But I am having some trouble in converting documented js code in cljs code.
Documentations:
import { SwipeRow } from 'react-native-swipe-list-view';
<SwipeRow>
<View>
</View>
</SwipeRow>
My Cljs Code:
(:require [react-native-swipe-list-view :as swipe_list])
(defn item[]
(
[swipe_list/SwipeRow
[:View]]
))
Online tool:
(def SwipeRow (.-SwipeRow (js/require "react-native-swipe-list-view")))
(defn item[]
(
[SwipeRow
[:View]]
))
None of the above worked. I am new to cljs. it will be a big help if someone can tell me how to convert the above lines of js into cljs. Thanks
Reagent Documents: Creating Reagent "Components" from React Components
Here I am going to create two reagent components, view and swipeRow. I am using different ways for both, to show two ways for importing library and creating components. You can use either.
;; Importing Reagent and React Native
(ns type_name_server_here
(:require [reagent.core :as reagent]
["react-native" :as rn]))
;; 1st Way: Importing SwipeRow
(def SwipeRowImport (.-SwipeRow (js/require "react-native-swipe-list-view")))
;; Converting it into Reagent Component
(def SwipeRow (reagent/adapt-react-class SwipeRowImport))
;; 2nd Way: Importing View from already imported react-native library and converting it into reagent component
(def view (reagent/adapt-react-class (.-View ^js rn)))
;; SwipeRow requires two children (Check out documentation)
(defn item[]
(
[SwipeRow
[view] [view]]
))
If you are using shadow-cljs, you can use this table as a reference, for converting ES6 Import statments to CLJS Require
Related
Here’s my code in which I’m trying to create multiple bottom tabs using react navigation
(defn sample-comp []
[:> View [:> Text "Sample Container!"]])
(defn root-comp []
[:> NavigationContainer
[:> SafeAreaView
(let [Tab (createBottomTabNavigator)]
[:> (.-Navigator Tab)
[:> (.-Screen Tab)
{:name "Home"
:component (r/reactify-component sample-comp)}]])]])
(defn init []
;; register error also occurs if there's a non-
;; related error in the code
(dispatch [:register-db])
(render-root "Humboi" (r/as-element [root-comp])))
but I’m getting the following error:
requireNativeComponent: “RNCSafeAreaProvider” was not found in UIManager.
How to fix this error?
I want to use a reagent component I've created in another file/namespace, say this.is.the.namespace, and it contains a component defined like so:
(defn component-name []
; stuff
)
In my entry file, I do the following:
(ns entry.point.namespace.name
(:require [this.is.the.namespace]
))
And when I include [component-name] in a component in the entry file, the component doesn't show. Why might this be?
(ns this.is.the.namespace)
(defn component-name []
[:p "Hello There"])
(ns entry.point.namespace.name
(:require [reagent.core :as reagent]
[this.is.the.namespace :as my-components]))
(reagent/render [my-components/component-name] (js/getElementById "main-div"))
Change "main-div" to id of the div that you are rendering into.
I am composing my web app as a number of Aurelia "feature" apps - although I'm not using Aurelia features as such. Consequently in my html markup I have two entry points pointing to different apps:
<!-- Top Navigation Bar -->
<div aurelia-app="topnav"></div>
<!-- Main App-->
<div aurelia-app="main"></div>
I am using webpack and everything works perfectly using the single "main" app. Webpack generates a JS file "main.bundle.js" which I include in the src tag.
Things are not so straightforward when I added the "topnav" app. In webpack I tell the plugin to use a different aureliaApp name:
new AureliaPlugin({ aureliaApp: "topnav"}),
and, as you can see my HTML entrypoint also calls "topnav". Webpack generates a JS file "topnav.bundle.js" which I also include. I have a file called "topnav.ts" which contains the aurelia Cionfigure function which ends:
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("nav")));
And a pair of files "nav.ts", "nav.html" which constitute my viewmodel and view.
When I run the app aurelia loads and the "nav" module code executes. But I then get an error - see below.
The module which it reports that it cannot find is the one entered into the HTML markup.
Should this work? Have I missed something?
I should add, everything seems to work. I can create and update properties in the viewmodel and these are bound to the view. It's just that this error is thrown.
You are doing nothing wrong, just unsupported scenario. Per official doc-wiki: https://github.com/aurelia/webpack-plugin/wiki/AureliaPlugin-options#aureliaapp
You can have only 1 auto entry module with aureliaApp configuration. To solve this, you just need to add PLATFORM.moduleName('topnav') to your main.ts (and put it on root level)
Another way to do is to bootstrap manually:
// in your index.ts
import { bootstrap } from 'aurelia-bootstrapper';
// bootstrap top nav application, with one instance of Aurelia
bootstrap(aurelia => {
// do your configuration
aurelia
.start()
.then(() => aurelia.setRoot(
PLATFORM.moduleName('topnav'),
document.querySelector('#topnav')
);
});
// bootstrap main application, with another instance of Aurelia
bootstrap(aurelia => {
// aurelia.use.standardConfiguration();
// ...
aurelia
.start()
.then(() => aurelia.setRoot(
PLATFORM.moduleName('app'),
document.querySelector('app')
)
});
We have an existing React Native project (version 0.22.2) and I'm trying to set up the Flow type checker (version 0.23) on certain files. However, Flow is giving a lot of errors for the require()s calls we're using for <Image> sources. For example, we have this code in one of our components in Header.js:
<Image source={require('./images/nav.png')} style={styles.navIcon} />
Which React Native handles fine and it works. However, Flow seems to be trying to treat the require() as a regular module require and not finding it, and giving errors like this:
Header.js:30
30: <Image source={require('./images/nav.png')} style={styles.navIcon} />
^^^^^^^^^^^^^^^^^^^^^^^^^^^ ./images/nav.png. Required module not found
How can I tell Flow to stop giving these errors? I've tried adding .*/images/.* to the [ignore] section of my .flowconfig, but that doesn't change anything.
You can use the module.name_mapper.extension option in .flowconfig. For example,
[options]
module.name_mapper.extension= 'png' -> '<PROJECT_ROOT>/ImageSourceStub.js.flow'
which will map any module name ending in .png to an ImageSourceStub module, as if instead of writing require('./foo.png') you had written require('./path/to/root/ImageSourceStub').
In ImageSourceStub.js.flow you can do
const stub = {
uri: 'stub.png'
};
export default stub; // or module.exports = stub;
so that Flow knows that require('*.png') returns a {uri: string}.
See also the Advanced Configuration docs.
I don't have a real answer besides to say that flow in React Native seems really dodgy today and it would not surprise me if flow just simply doesn't support this usage at all, but I'd love to be totally surprised!
Personally, as a work-around, I'd just add a higher level component and ignore the flow errors in that file.
// Picture.js
// (No #flow tag at top of file)
const Picture = ({ source }) => (
<Image source={require(source)} />
)
Then use <Picture source="my/path/pic.jpg" /> instead.
Had same issue, for JPG files, solved with this .flowconfig
module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
module.name_mapper='^[./a-zA-Z0-9$_-]+\.png$' -> 'RelativeImageStub'
module.name_mapper='^[./a-zA-Z0-9$_-]+\.jpg$' -> 'RelativeImageStub'
I have a Rails app with Haml views. Now I want to add AngularJS to some parts of the application, but the problem is that the Haml views are rendered server-side and the AngularJS code is not working, because it is rendered client-side.
Let's say I have just this in my index.html.haml:
!!!
%html{"ng-app" => "Test"}
%head
%script{:src => "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"}
:javascript
function Clock($scope) {
$scope.currentTime = new Date();
}
%title Welcome to AngularJS
%body
%h1 Hello, World.
%p{"ng-controller" => "Clock"}
The current time is {{currentTime | date:'h:mm:ss a'}}.
So currently, it's just printing out everything within the curly brackets without actually processing it. There are solutions but they for situations where your complete view is replaced by an AngularJS template. I want to use AngularJS mainly for small bits of functionality in my Rails app. Any ideas how to solve this?
John,
I have edited your code a bit here: http://codepen.io/anon/pen/vKiwH
%html{"ng-app"=>true}
%p{"ng-controller" => "clock"}
The current time is {{currentTime | date:'h:mm:ss a'}}.
and the javascript is:
function clock($scope) {
$scope.currentTime = new Date().getTime();
}