Using ReactNative External library in ClojureScript Project - Syntax

Question

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

Monu · Accepted Answer · 2021-08-09 22:01:13Z

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

Collectives™ on Stack Overflow

Using ReactNative External library in ClojureScript Project - Syntax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related