Clojurians Log v2

Hi, I just translate the React Native BottomNavigation eg. in CLJS Reagent + Shadow-CLJS and it works well. https://callstack.github.io/react-native-paper/bottom-navigation.html • 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 (
      <BottomNavigation
        navigationState={this.state}
        onIndexChange={this._handleIndexChange}
        renderScene={this._renderScene}
      />
    );
  }
}

(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 []
  (start))