This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2021-03-15
Channels
- # announcements (8)
- # asami (10)
- # babashka (16)
- # beginners (86)
- # calva (22)
- # chlorine-clover (9)
- # circleci (20)
- # clj-kondo (13)
- # cljs-dev (20)
- # cljsrn (3)
- # clojure (144)
- # clojure-australia (10)
- # clojure-europe (126)
- # clojure-italy (5)
- # clojure-nl (8)
- # clojure-norway (4)
- # clojure-serbia (9)
- # clojure-uk (7)
- # clojurescript (14)
- # cursive (20)
- # data-science (1)
- # datomic (20)
- # figwheel-main (5)
- # fulcro (23)
- # graalvm (7)
- # graphql (25)
- # honeysql (15)
- # hugsql (3)
- # jobs (2)
- # lambdaisland (2)
- # leiningen (4)
- # lsp (102)
- # malli (3)
- # off-topic (51)
- # overtone (5)
- # pathom (27)
- # portal (11)
- # quil (1)
- # re-frame (19)
- # reagent (31)
- # remote-jobs (1)
- # reveal (3)
- # rewrite-clj (56)
- # shadow-cljs (45)
- # startup-in-a-month (1)
- # tools-deps (9)
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"))])
Would be the simplest and avoids the need to use array to merge styles.@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.
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.
Reagent should also be quite backwards compatible with React versions, even if current default is 17, it should work fine with 16.
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
as in https://clojars.org/reagent ?Hello. Re-posting here reagent ratom related question from #re-frame channel https://clojurians.slack.com/archives/C073DKH9P/p1615817216216500
General question: what happens to those undisposed subscriptions? Should they be always disposed when watching subscription gets disposed?
Reagent should also be quite backwards compatible with React versions, even if current default is 17, it should work fine with 16.
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}}]))
}
}]
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: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: