I'm finding problems after running re-natal init <string> for certain strings. The project directory is generated, but at runtime, the packager complains of a conflict. For example, using "Modal" as in "re-natal init Modal". Multiple strings lead to this difficulty -- from a freshly generated re-natal project directory, cd-ing to node_modules/react-native/Libraries and running the following gives some more examples: find | grep js$ | xargs -n1 basename -s .js | sort # does anyone else see this?

@gonbe77 I guess the package names needs to be unique?

i.e. the name set in package.json

don't pick a name that exists in npm?

but in general, there is no way to predict what names will end up in that directory in the future, right?

true but isn't that a problem shared by react-native init, create-react-app etc.?

blame npm, I say

lol -- well, that isn't going to address this instance of one of the two hard problems of comp sci...

which one - cache invalidation or off by one errors?

ha ha ha -- i thought one of the two was 'naming'

😉

the background of this is that i've been making a collection of simple re-natal demos -- when i use CamelCase as suggested in the README.md i tend to run into this more, whereas using all lower-case seems to be somewhat safer

aha

I guess it depends on the name that ends up in package.json? Can you name a few broken/non-broken examples

i just tested: utf8 (has conflict), YellowBox (has conflict), utf9 (no conflict)

yes, i think the name in package.json is relevant

Maybe add a check against the npm registry in re-natal before scaffolding the project (making sure the name is unique)

that is helpful for now, but if there are updates to react native, and new names are added, will this not be a problem for some existing projects?

well I guess not calling your project utf8 is just common sense 🙂

does npm complain about a dupe?

sorry if i wasn't clear, i see a message after react-native start -- Loading dependency graph...jest-haste-map: @providesModule naming collision: Duplicate module name: utf8 Paths: ... utf8/package.json collides with ... utf8.js This warning is caused by a @providesModule declaration with the same name across two different files.

i did not understand what you meant about npm complaining about a dupe.

yeah that's what I meant

i guess as there are only 385 relevant strings at the moment, it's not likely to be a significant problem 🙂

Hi, im currently using cljs for react-native app and having some issue in the interop of HighOrderComponent. The library i want to use is : https://github.com/okgrow/react-native-joyride My code:

(def JoyRide (js/require "react-native-joyride"))
(def Joy (.joyride JoyRide))
(def JoyrideStep  (r/adapt-react-class (.-name (.-JoyrideStep JoyRide))))
(def JoyrideText  (r/adapt-react-class (.-name (.joyridable JoyRide (r/reactify-component (clj->js (.-Text ReactNative)))))))

(defn joyride-page []
  (.log js/console JoyrideStep JoyrideText)
  [JoyrideStep (clj->js {:text  "Hey! This is the first step of the tour!"
                         :order 1
                         :name "openApp"})
   [JoyrideText "Welcome to the demo of joyride library"]])

(defn m-joyride-page []
  (let [m (-> joyride-page
              r/reactify-component
              Joy
              r/adapt-react-class)]
    [m]))

[Invariant Violation: Expected a component class, got [object Object].]

{
  "class": null,
  "id": null,
  "name": "JoyrideStep",
}  {
  "class": null,
  "id": null,
  "name": "",
}

@sachinharpalani how would you use that component in JS?

@pesterhazy sorry i didnt get you?

suppose you wrote this in JS, how would you use Joy?

@pesterhazy im using cljs (expo+re-frame)

@pesterhazy this is the code im refering :

import React from 'react';
import { StyleSheet, Text, Image, View, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

import { joyride, joyridable, JoyrideStep } from 'react-native-joyride';

const JoyrideText = joyridable(Text);
const JoyrideImage = joyridable(Image);

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <JoyrideStep text="Hey! This is the first step of the tour!" order={1} name="openApp">
          <JoyrideText style={styles.title}>
            Welcome to the demo of
            {'\n'}
            "React Native Joyride"
            </JoyrideText>
        </JoyrideStep>
        <View style={styles.middleView}>
          <JoyrideStep text="Here goes your profile picture!" order={2} name="secondText">
            <JoyrideImage
              source={{ uri: 'https://pbs.twimg.com/profile_images/527584017189982208/l3wwN-l-_400x400.jpeg' }}
              style={styles.profilePhoto}
            />
          </JoyrideStep>
          <TouchableOpacity style={styles.button} onPress={() => this.props.start()}>
            <Text style={styles.buttonText}>START THE TUTORIAL!</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.row}>
          <JoyrideStep text="Here is an item in the corner of the screen." order={3} name="thirdText">
            <JoyrideText style={styles.tabItem}>
              <Ionicons name="ios-contact" size={40} color="#888" />
            </JoyrideText>
          </JoyrideStep>

          <Ionicons style={styles.tabItem} name="ios-game-controller-b" size={40} color="#888" />
          <Ionicons style={styles.tabItem} name="ios-globe" size={40} color="#888" />
          <Ionicons style={styles.tabItem} name="ios-navigate-outline" size={40} color="#888" />
          <Ionicons style={styles.tabItem} name="ios-rainy" size={40} color="#888" />
        </View>
      </View>
    );
  }
}

export default joyride()(App);

@pesterhazy im sorry im not familiar with js that much

@sachinharpalani there's too much stuff going on to see the problem

can you narrow it down to a minimal example that works in JS? then we can help with the translation to CLJS

@pesterhazy @sundarj @lovuikeng @binora I solved this with the below changes. Thanks for your help 🙂

(def JoyRide (js/require "react-native-joyride"))
(def Joy (.joyride JoyRide))
(def JoyrideStep  (r/adapt-react-class (.-JoyrideStep JoyRide)))
(def JoyrideText  (r/adapt-react-class (.joyridable JoyRide (clj->js (.-Text ReactNative)))))

(defn joyride-page [props]
  (let [{:keys [start visible]} (js->clj props :keywordize-keys true)]
    [view
     [JoyrideStep {:text  "Hey! This is the first step of the tour!"
                   :order 1
                   :name "first"}
      [JoyrideText "\n\n\n\nWelcome to the demo of joyride library"]]
     [JoyrideStep {:text  "Hey! This is the SECOND step of the tour!"
                   :order 2
                   :name "second"}
      [JoyrideText "\n\n\n\n\nWelcome to the demo of joyride library"]]
     [JoyrideStep {:text  "Hey! This is the tHIRD step of the tour!"
                   :order 3
                   :name "third"}
      [JoyrideText "\n\n\n\n\nWelcome to the demo of joyride library"]]
     [touchable-highlight {:on-press #(start)}
      [text {:style {:text-align "center" :font-weight "bold"}} "START TUTORIAL"]]]))

(defn m-joyride-page []
  (let [m (-> joyride-page
              r/reactify-component
              Joy
              r/adapt-react-class)]
    [m]))

(defn app-root []
[m-joyride-page]) 

@sachinharpalani nice. What's the key change?

sorry but... #cljsrn , "rn" means?

react native

oh... thank you @sundarj

@pesterhazy removed (.-name) and (r/reactify-component) while defining JoyrideStep and JoyrideText

Hi! I’m trying Re-natal and I’m following the README. > npm install -g re-natal > re-natal init FutureApp > cd future-app > react-native run-ios > /dev/null I get zsh: command not found: react-native. I’m not really familiar with all this npm stuff, but does this mean I have to alter the PATH myself?

Try npm install -g react-native

It needs to be available globally, for the react-native command to work. Alternatively, you can dig into node_modules to find your local executable, then you'd run something like ./node_modules/react-native/bin/… run-ios

ok, now I get: > Looks like you installed react-native globally, maybe you meant react-native-cli?

installing react-native-cli globally did the trick

cool, it works!

Sorry, I always forget those are separate packages

Does anyone here has a working example with playing an mp3?

If I want to run a re-natal app on my iphone, how should I proceed after connecting my iphone and executing: > re-natal use-ios-device real Should I still run: > react-native run-ios ? This opens the simulator again.

@borkdude That just sets up figwheel to run on the correct port, to actually run on the real device, either run from XCode (I usually do this) or react-native run-ios --device "Max's iPhone"