Fork me on GitHub
Michaël Salihi16:03:29

Hi, I just translate the React Native BottomNavigation eg. in CLJS Reagent + Shadow-CLJS and it works well. • In React-native:

import * as React from 'react';
import { BottomNavigation, Text } from 'react-native-paper';

const MusicRoute = () => <Text>Music</Text>;

const AlbumsRoute = () => <Text>Albums</Text>;

const RecentsRoute = () => <Text>Recents</Text>;

export default class MyComponent extends React.Component {
  state = {
    index: 0,
    routes: [
      { key: 'music', title: 'Music', icon: 'queue-music' },
      { key: 'albums', title: 'Albums', icon: 'album' },
      { key: 'recents', title: 'Recents', icon: 'history' },

  _handleIndexChange = index => this.setState({ index });

  _renderScene = BottomNavigation.SceneMap({
    music: MusicRoute,
    albums: AlbumsRoute,
    recents: RecentsRoute,

  render() {
    return (
• In CLJS:
(ns myapp
  (:require ["react-native-paper" :refer [BottomNavigation Text]]
            [reagent.core :as r]
            [shadow.expo :as expo]))

(def app-state (r/atom {:index 0
                        :routes [{:key "music" :title "Music" :icon "library-music"}
                                 {:key "albums" :title "Albums" :icon "album"}
                                 {:key "recents" :title "Recents" :icon "history"}]}))

(defn music-route []
  [:> Text "Music"])

(defn albums-route []
  [:> Text "Albums"])

(defn recents-route []
  [:> Text "Recents"])

(def render-scene (.SceneMap BottomNavigation #js {:music (r/reactify-component music-route)
                                                   :albums (r/reactify-component albums-route)
                                                   :recents (r/reactify-component recents-route)}))

(defn bottom-navigation []
  [:> BottomNavigation {:navigation-state @app-state
                        :on-index-change #(swap! app-state assoc :index %)
                        :render-scene render-scene}])

(defn start
  {:dev/after-load true}
  (expo/render-root (r/as-element [bottom-navigation])))

(defn init []
I was just wondering if it was necessary to use reagent/adapt-react-class and then reactify-component or was there a solution to consume the Text component directly?


Yes, you have to use those functions.

Michaël Salihi17:03:35

Perfect, thx for the confirmation.