CH13 - Render Expo-App using React On Rails

app/controllers/expo_controller.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class ExpoController < ApplicationController
+  layout "expo"
+
+  def index
+    @expo_props = { foo: "This is a prop sent from Rails Application" }
+  end
+
+  def hello_world
+    @expo_props = { foo: "This is a prop sent from Rails Application" }
+  end
+
+  def navigation
+    @expo_props = { foo: "This is a prop sent to Expo Navigation App" }
+  end
+
+  def helmet
+    @expo_props = { foo: "This is a prop sent to Expo Helmet App" }
+  end
+end

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/.expo-shared/assets.json

@@ -0,0 +1,6 @@
+{
+  "e997a5256149a4b76e6bfd6cbf519c5e5a0f1d278a3d8fa1253022b03c90473b": true,
+  "af683c96e0ffd2cf81287651c9433fa44debc1220ca7cb431fe482747f34a505": true,
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/.gitignore

@@ -0,0 +1,13 @@
+node_modules/
+.expo/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/App.tsx

@@ -0,0 +1,30 @@
+import { StatusBar } from 'expo-status-bar'
+import * as React from 'react'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+
+import useCachedResources from './hooks/useCachedResources'
+import useColorScheme from './hooks/useColorScheme'
+import Navigation from './navigation'
+import WebWrapper from './components/WebWrapper'
+import {Platform } from 'react-native'
+
+const App = () => {
+  const isLoadingComplete = useCachedResources()
+  const colorScheme = useColorScheme()
+  const isWeb = Platform.OS === 'web'
+
+  if (!isLoadingComplete && !isWeb) {
+    return null
+  }
+
+  const Wrapper = isWeb ? WebWrapper : SafeAreaProvider
+
+  return (
+    <Wrapper>
+      <Navigation colorScheme={isWeb ? 'dark' : colorScheme} />
+      <StatusBar />
+    </Wrapper>
+  )
+}
+
+export default App

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/ServerApp.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { renderToString } from 'react-dom/server'
+import { Helmet } from 'react-helmet'
+import ClientApp from './App'
+import { ServerContainer } from '@react-navigation/native'
+
+export default (
+  props: any,
+  railsContext: { pathname: string; search: string }
+) => {
+  const ref = React.createRef()
+
+  const componentHtml = renderToString(
+    <ServerContainer
+      // @ts-ignore
+      ref={ref}
+      location={{
+        pathname: railsContext.pathname,
+        search: railsContext.search || ''
+      }}
+    >
+      <ClientApp />
+    </ServerContainer>
+  )
+
+  const componentWithWrapper = `
+    <div id="root" style="display: flex; min-height: 100vh">
+    ${componentHtml}
+    </div>
+`
+
+  // @ts-ignore
+  const options = ref.current?.getCurrentOptions()
+  const helmet = Helmet.renderStatic()
+
+  const renderedHtml = {
+    componentHtml: componentWithWrapper,
+    meta: helmet.meta.toString(),
+    title: `<title>${options?.title}</title>`
+  }
+
+  return { renderedHtml }
+}

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/app.json

@@ -0,0 +1,34 @@
+{
+  "expo": {
+    "name": "expo-with-helmet-and-navigation",
+    "slug": "expo-with-helmet-and-navigation",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/images/favicon.png"
+    }
+  }
+}

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
+  };
+};

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/components/EditScreenInfo.tsx

@@ -0,0 +1,80 @@
+import * as WebBrowser from 'expo-web-browser';
+import React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+import Colors from '../constants/Colors';
+import { MonoText } from './StyledText';
+import { Text, View } from './Themed';
+
+export default function EditScreenInfo({ path }: { path: string }) {
+  return (
+    <View>
+      <View style={styles.getStartedContainer}>
+        <Text
+          style={styles.getStartedText}
+          lightColor="rgba(0,0,0,0.8)"
+          darkColor="rgba(255,255,255,0.8)">
+          Open up the code for this screen:
+        </Text>
+
+        <View
+          style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
+          darkColor="rgba(255,255,255,0.05)"
+          lightColor="rgba(0,0,0,0.05)">
+          <MonoText>{path}</MonoText>
+        </View>
+
+        <Text
+          style={styles.getStartedText}
+          lightColor="rgba(0,0,0,0.8)"
+          darkColor="rgba(255,255,255,0.8)">
+          Change any of the text, save the file, and your app will automatically update.
+        </Text>
+      </View>
+
+      <View style={styles.helpContainer}>
+        <TouchableOpacity onPress={handleHelpPress} style={styles.helpLink}>
+          <Text style={styles.helpLinkText} lightColor={Colors.light.tint}>
+            Tap here if your app doesn't automatically update after making changes
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+function handleHelpPress() {
+  WebBrowser.openBrowserAsync(
+    'https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet'
+  );
+}
+
+const styles = StyleSheet.create({
+  getStartedContainer: {
+    alignItems: 'center',
+    marginHorizontal: 50,
+  },
+  homeScreenFilename: {
+    marginVertical: 7,
+  },
+  codeHighlightContainer: {
+    borderRadius: 3,
+    paddingHorizontal: 4,
+  },
+  getStartedText: {
+    fontSize: 17,
+    lineHeight: 24,
+    textAlign: 'center',
+  },
+  helpContainer: {
+    marginTop: 15,
+    marginHorizontal: 20,
+    alignItems: 'center',
+  },
+  helpLink: {
+    paddingVertical: 15,
+  },
+  helpLinkText: {
+    textAlign: 'center',
+  },
+});

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/components/StyledText.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import { Text, TextProps } from './Themed';
+
+export function MonoText(props: TextProps) {
+  return <Text {...props} style={[props.style, { fontFamily: 'space-mono' }]} />;
+}

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/components/Themed.tsx

@@ -0,0 +1,46 @@
+/**
+ * Learn more about Light and Dark modes:
+ * https://docs.expo.io/guides/color-schemes/
+ */
+
+import * as React from 'react';
+import { Text as DefaultText, View as DefaultView } from 'react-native';
+
+import Colors from '../constants/Colors';
+import useColorScheme from '../hooks/useColorScheme';
+
+export function useThemeColor(
+  props: { light?: string; dark?: string },
+  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
+) {
+  const theme = useColorScheme();
+  const colorFromProps = props[theme];
+
+  if (colorFromProps) {
+    return colorFromProps;
+  } else {
+    return Colors[theme][colorName];
+  }
+}
+
+type ThemeProps = {
+  lightColor?: string;
+  darkColor?: string;
+};
+
+export type TextProps = ThemeProps & DefaultText['props'];
+export type ViewProps = ThemeProps & DefaultView['props'];
+
+export function Text(props: TextProps) {
+  const { style, lightColor, darkColor, ...otherProps } = props;
+  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
+
+  return <DefaultText style={[{ color }, style]} {...otherProps} />;
+}
+
+export function View(props: ViewProps) {
+  const { style, lightColor, darkColor, ...otherProps } = props;
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
+
+  return <DefaultView style={[{ backgroundColor }, style]} {...otherProps} />;
+}

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/components/WebWrapper.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { Dimensions, View } from 'react-native'
+
+type props = {
+  children: React.ReactNode
+}
+
+const WebWrapper = ({ children }: props) => (
+  <View
+    // @ts-ignore: These Style are web specific & are not in React native Prop Types
+    style={{
+      minWidth: 500,
+      minHeight: 600
+    }}
+  >
+    {children}
+  </View>
+)
+
+export default WebWrapper

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/components/__tests__/StyledText-test.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import renderer from 'react-test-renderer';
+
+import { MonoText } from '../StyledText';
+
+it(`renders correctly`, () => {
+  const tree = renderer.create(<MonoText>Snapshot test!</MonoText>).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/constants/Colors.ts

@@ -0,0 +1,19 @@
+const tintColorLight = '#2f95dc';
+const tintColorDark = '#fff';
+
+export default {
+  light: {
+    text: '#000',
+    background: '#fff',
+    tint: tintColorLight,
+    tabIconDefault: '#ccc',
+    tabIconSelected: tintColorLight,
+  },
+  dark: {
+    text: '#fff',
+    background: '#000',
+    tint: tintColorDark,
+    tabIconDefault: '#ccc',
+    tabIconSelected: tintColorDark,
+  },
+};

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/constants/Layout.ts

@@ -0,0 +1,12 @@
+import { Dimensions } from 'react-native';
+
+const width = Dimensions.get('window').width;
+const height = Dimensions.get('window').height;
+
+export default {
+  window: {
+    width,
+    height,
+  },
+  isSmallDevice: width < 375,
+};

app/javascript/bundles/expo-with-react-helmet-and-react-navigation/hooks/useCachedResources.ts

@@ -0,0 +1,33 @@
+// import { Ionicons } from '@expo/vector-icons';
+// import * as Font from 'expo-font';
+// import * as SplashScreen from 'expo-splash-screen';
+import * as React from 'react';
+
+export default function useCachedResources() {
+  const [isLoadingComplete, setLoadingComplete] = React.useState(false);
+
+  // Load any resources or data that we need prior to rendering the app
+  React.useEffect(() => {
+    async function loadResourcesAndDataAsync() {
+      try {
+        // SplashScreen.preventAutoHideAsync();
+
+        // Load fonts
+        // await Font.loadAsync({
+        //   // ...Ionicons.font,
+        //   'space-mono': require('../assets/fonts/SpaceMono-Regular.ttf'),
+        // });
+      } catch (e) {
+        // We might want to provide this error information to an error reporting service
+        console.warn(e);
+      } finally {
+        setLoadingComplete(true);
+        // SplashScreen.hideAsync();
+      }
+    }
+
+    loadResourcesAndDataAsync();
+  }, []);
+
+  return isLoadingComplete;
+}