Clojurians Log v2

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} />
}

This is what I have so far:

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

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

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

yes it’s react native

Not sure why it doesn't work.

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

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

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?

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

This is working:

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

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

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

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

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

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" ?

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.

Hello. Re-posting here reagent ratom related question from #re-frame channel https://clojurians.slack.com/archives/C073DKH9P/p1615817216216500

Does shadowcljs ignore

Dependencies
cljsjs/react 17.0.1-0
cljsjs/react-dom 17.0.1-0
cljsjs/react-dom-server 17.0.1-0

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

https://shadow-cljs.github.io/docs/UsersGuide.html#_missing_js_dependency

Hi, I’m trying to use this library: https://github.com/FaridSafi/react-native-google-places-autocomplete#readme 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 GOOGLE_PLACES_API_KEY = 'YOUR_GOOGLE_API_KEY';

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

export default GooglePlacesInput;

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 
                       (as-element
                        (fn [] [text-input {:style {:backgroundColor "#AC1815"
                                                    :borderRadius 10
                                                    :width "70%"
                                                    :fontFamily "Montserrat-Regular"
                                                    :height 50
                                                    :color :white
                                                    :fontWeight :bold
                                                    :paddingLeft 8
                                                    :paddingRight 8}}]))

                       }
      }]

(fn [] [text-input {:style {:backgroundColor "#AC1815"
                                                    :borderRadius 10
                                                    :width "70%"
                                                    :fontFamily "Montserrat-Regular"
                                                    :height 50
                                                    :color :white
                                                    :fontWeight :bold
                                                    :paddingLeft 8
                                                    :paddingRight 8}}])

How to use a custom text component in this library?

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

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

No idea.