A minimalistic ClojureScript interface to React.js
zendevil 2021-03-15T10:56:58.026100Z

I’m trying to convert the following react native to reagent code:

const MyText = ({ weight, style, ...props }) => {
  return <Text style={[{ fontFamily : "Montserrat-Regular" }, style]}
  {...props} />

zendevil 2021-03-15T10:57:16.026400Z

This is what I have so far:

(defn text [{:keys [style weight] :as props}]
  [:> Text (merge (dissoc props :style) {:style [style {:fontFamily "Montserrat-Regular"}]})])

zendevil 2021-03-15T10:57:54.027100Z

But the problem is that the fontFamily style isn’t being applied to the component

juhoteperi 2021-03-15T11:00:04.027800Z

@ps Is this on ReactNative? I think it supports arrays in style attribute, but React-DOM doesn't support them.

zendevil 2021-03-15T11:00:18.028Z

yes it’s react native

juhoteperi 2021-03-15T11:02:01.029300Z

Not sure why it doesn't work.

(defn text [{:keys [style weight] :as props}]
  [:> Text (assoc props :style (assoc style :fontFamily "Montserrat-Regular"))])
Would be the simplest and avoids the need to use array to merge styles.

zendevil 2021-03-15T11:03:48.029900Z

@juhoteperi I tried your snippet, but the fontFamily isn’t being applied to the component

juhoteperi 2021-03-15T11:06:06.031Z

Markup seems fine. I don't remember if devtools allows you to validate resulting RN element tree and properties. Might something else, like is the font available?

zendevil 2021-03-15T11:07:24.031500Z

@juhoteperi when I use the fontFamily directly in the style map, the font does show

zendevil 2021-03-15T11:09:17.031900Z

This is working:

[:> Text {:style {:fontFamily "Montserrat-Regular"
                  :marginLeft "12%" :fontWeight :bold :fontSize 25 :color :gray}}

zendevil 2021-03-15T11:11:02.032600Z

when I use the custom component, it’s not like the text shows with the default font. The text doesn’t show at all

juhoteperi 2021-03-15T11:13:18.033Z

you custom component doesn't take or use children elements currently

juhoteperi 2021-03-15T11:13:58.033700Z

If you want to use it like [text "foobar"] you need something like (defn text [props & children] (into [:> Text {...}] children))

zendevil 2021-03-15T11:17:15.034200Z

@juhoteperi thanks. It works now. But is this the most elegant way to do this?

juhoteperi 2021-03-15T11:29:26.035700Z

Yes, I'd say so. React example didn't deal with the children directly because in React children are part of the props object (if you call createElement with additional children, they are just stored to props object children property). Reagent handles them differently to provide more "Clojurey" way to declare components using functions.


Hi . How to know which reagent works with react-native: “react-native”: “0.63.4" ?

p-himik 2021-03-15T14:29:27.036300Z

Reagent works with particular versions of React. React Native works with particular versions of React. You just have to correspond the two by e.g. checking package.json of the relevant version of RN.

dima 2021-03-15T14:38:17.037200Z

Hello. Re-posting here reagent ratom related question from #re-frame channel


Does shadowcljs ignore

cljsjs/react 17.0.1-0
cljsjs/react-dom 17.0.1-0
cljsjs/react-dom-server 17.0.1-0
as in ?

p-himik 2021-03-15T16:12:57.038300Z

It does. You have to install the right NPM packages.

zendevil 2021-03-15T16:30:35.039500Z

Hi, I’m trying to use this library: It contains the following example to use a custom Input Component:

import React from 'react';
import { Text, View, Image } from 'react-native';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { Input } from 'react-native-elements';


const GooglePlacesInput = () => {
  return (
        language: 'en', // language of the results
      onPress={(data, details) => console.log(data, details)}
        InputComp: Input,
        leftIcon: { type: 'font-awesome', name: 'chevron-left' },
        errorStyle: { color: 'red' },

export default GooglePlacesInput;

zendevil 2021-03-15T16:31:37.040600Z

For which I have the following:

[:> GooglePlacesAutocomplete
     {:placeholder "Search For Event Address"
      :onPress (fn [data details]
                 (dispatch [:set-address data navigation])
                 (js/console.log "data" data "details" details))
      ;;:currentLocation true
      ;;:currentLocationLabel "Current Location"
      :query {:key "mykey"
              :language :en}
      :textInputProps {:InputComp 
                        (fn [] [text-input {:style {:backgroundColor "#AC1815"
                                                    :borderRadius 10
                                                    :width "70%"
                                                    :fontFamily "Montserrat-Regular"
                                                    :height 50
                                                    :color :white
                                                    :fontWeight :bold
                                                    :paddingLeft 8
                                                    :paddingRight 8}}]))

So basically I’m using
(fn [] [text-input {:style {:backgroundColor "#AC1815"
                                                    :borderRadius 10
                                                    :width "70%"
                                                    :fontFamily "Montserrat-Regular"
                                                    :height 50
                                                    :color :white
                                                    :fontWeight :bold
                                                    :paddingLeft 8
                                                    :paddingRight 8}}])
as the textComp. However, this is giving me the following error:

zendevil 2021-03-15T16:31:57.040800Z

zendevil 2021-03-15T16:32:06.041400Z

How to use a custom text component in this library?

p-himik 2021-03-15T16:33:09.042Z

Your usage of as-element is incorrect. Use it within the function and wrap the [text-input ...] hiccup vector with it.

zendevil 2021-03-15T16:39:50.042700Z

@p-himik this seems to give the correct result, but I also get a new warning now:

zendevil 2021-03-15T16:39:59.042800Z

p-himik 2021-03-15T16:48:26.043200Z

No idea.