react-nativeclojurescriptreagentclojurescript-javascript-interop

Using ReactNative External library in ClojureScript Project - Syntax


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


Solution

  • 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