Merge branch 'release/1.1.0'

.editorconfig

@@ -3,3 +3,4 @@ root = true
 [*.{js,jsx,ts,tsx,css,less,scss,html,json,gql}]
 indent_style = space
 indent_size = 2
+tab_size=2

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+    "[typescript]": {
+        "editor.codeActionsOnSave": {
+            "source.organizeImports": true
+        }
+    },
+    "[typescriptreact]": {
+        "editor.codeActionsOnSave": {
+            "source.organizeImports": true
+        }
+    }
+}

android/app/src/main/java/com/reactnativestylo/MainActivity.java

@@ -4,6 +4,8 @@
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.ReactRootView;
 
+import android.os.Bundle;
+
 public class MainActivity extends ReactActivity {
 
   /**
@@ -37,4 +39,9 @@ protected ReactRootView createRootView() {
       return reactRootView;
     }
   }
+
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(null);
+  }
 }

app/components/delayed-mount.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+const DelayedMount: React.FC<{ delay?: number }> = ({ delay, children }) => {
+  const refWait = useRef<{
+    timer: NodeJS.Timeout | null | undefined;
+    clear: () => void;
+  }>({
+    timer: null,
+    clear: () => {
+      if (refWait.current.timer) {
+        clearInterval(refWait.current.timer);
+        refWait.current.timer = null;
+      }
+    },
+  });
+
+  const [mount, setMount] = useState(false);
+
+  useEffect(() => {
+    refWait.current.timer = setTimeout(() => {
+      refWait.current.clear();
+      setMount(true);
+    }, delay ?? 500);
+  });
+
+  useEffect(() => refWait.current.clear, []);
+
+  return mount ? <React.Fragment>{children}</React.Fragment> : null;
+};
+
+export default DelayedMount;

app/components/showcase-screen-layout.tsx

@@ -1,49 +1,78 @@
-import React from 'react';
+import { useNavigation } from '@react-navigation/native';
+import React, { useRef } from 'react';
 import { StyleSheet } from 'react-native';
-
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Stylish from '../stylo/stylish';
+import DelayedMount from './delayed-mount';
+import ThemeSwitch from './theme-switch';
+
+export const Screen: React.FC<{ transparent?: boolean }> = ({ children, transparent }) => {
+  const safeAreaInsets = useSafeAreaInsets();
+  const styles = useRef(
+    StyleSheet.create({
+      safeAreaHeader: { height: safeAreaInsets.top },
+    })
+  ).current;
+
+  return (
+    <Stylish.View styleNames={['Screen']} style={transparent ? { backgroundColor: 'transparent' } : {}}>
+      <Stylish.View style={styles.safeAreaHeader} />
+      {children}
+    </Stylish.View>
+  );
+};
+
+export const ScreenHeader: React.FC<{
+  title: string;
+  onNavigateBack?: () => void;
+}> = ({ title, onNavigateBack }) => {
+  const navigation = useNavigation();
 
-const styles = StyleSheet.create({
-  scrollView: { flex: 1 },
-  headerTitle: { marginBottom: 0 },
-});
+  const navigateBack = () => {
+    if (onNavigateBack) {
+      onNavigateBack();
+    } else {
+      navigation.goBack();
+    }
+  }
 
-const ShowcaseScreenLayout: React.FC<{
-  transparent?: boolean;
-  onGoBack: () => void;
-  renderTitle: () => string;
-  renderBody: () => React.ReactNode;
-}> = ({ transparent, renderTitle, renderBody }) => (
-  <Stylish.View
-    styleNames={
-      transparent ? ['Screen'] : ['Screen', 'BackgroundColor.Primary1']
-    }>
-    <Stylish.SafeAreaView />
-    <Stylish.View
-      styleNames={['Screen.Header', 'Padding.Top', 'Padding.Bottom']}>
-      {/* <Stylish.View styleNames={['Screen.Header.Left', 'Padding.Left']}>
+  return (
+    <Stylish.View styleNames={['Screen.Header']}>
+      <Stylish.View styleNames={['Screen.Header.Left', 'Padding']}>
         <Stylish.TouchableOpacity
-          styleNames={['Button', 'Button.Circle', 'BackgroundColor.White']}
-          onPress={() => onGoBack()}>
-          <Stylish.Icon.AntDesign
-            name="left"
-            styleNames={['Button.Icon', 'Button.Circle.Icon']}
-          />
+          styleNames={['Button', 'Button.Circle', 'BackgroundColor.Alpha8']}
+          onPress={() => navigateBack()}>
+          <Stylish.Icon.AntDesign name="left" styleNames={['Button.Circle.Icon']} />
         </Stylish.TouchableOpacity>
-      </Stylish.View> */}
-      <Stylish.View
-        styleNames={['Screen.Header.Body', 'Padding.Left', 'Padding.Right']}>
-        <Stylish.Text styleNames={['H3']} style={styles.headerTitle}>
-          {renderTitle()}
+      </Stylish.View>
+      <Stylish.View styleNames={['Screen.Header.Body', 'Padding.Top', 'Padding.Bottom', 'Padding.Right']}>
+        <Stylish.Text styleNames={['Bold.Semi', 'Large']}>
+          {title}
         </Stylish.Text>
       </Stylish.View>
+      <Stylish.View styleNames={['Screen.Header.Right', 'Padding.Right']}>
+        <ThemeSwitch />
+      </Stylish.View>
     </Stylish.View>
-    <Stylish.View styleNames={['Screen.Body']}>
-      <Stylish.ScrollView style={styles.scrollView}>
-        <Stylish.View styleNames={['Padding']}>{renderBody()}</Stylish.View>
-      </Stylish.ScrollView>
-    </Stylish.View>
-  </Stylish.View>
-);
+  );
+};
 
-export default ShowcaseScreenLayout;
+export const ScreenBody: React.FC = ({ children }) => {
+  const safeAreaInsets = useSafeAreaInsets();
+  const styles = useRef(
+    StyleSheet.create({
+      safeAreaFooter: { height: safeAreaInsets.bottom },
+    })
+  ).current;
+
+  return (
+    <DelayedMount>
+      <Stylish.ScrollView styleNames={['Flex.1']}>
+        <Stylish.View styleNames={['Screen.Body', 'Padding']}>
+          {children}
+        </Stylish.View>
+        <Stylish.View style={styles.safeAreaFooter} />
+      </Stylish.ScrollView>
+    </DelayedMount>
+  );
+};

app/components/theme-switch.tsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import { StyleSheet, Switch } from 'react-native';
+import { useVariables } from '../stylo/stylers';
+import { Text, View } from '../stylo/stylish';
+import { ThemeSwitchContext } from '../theme-switch-provider';
+
+const style = StyleSheet.create({
+  switch: { transform: [{ scaleX: .75 }, { scaleY: .75 }] },
+});
+
+const ThemeSwitch: React.FC = () => {
+  const [colorSuccess, colorGrey1] = useVariables(['Color.Success4', 'Color.Grey1']);
+  const { onSwitchTheme, onGetTheme } = useContext(ThemeSwitchContext);
+
+  const theme = onGetTheme();
+
+  return (
+    <View styleNames={['Flex.Row', 'Flex.AlignItems.Center']}>
+      <Switch
+        style={style.switch}
+        onChange={() => {
+          onSwitchTheme(theme === 'Dark' ? 'Light' : 'Dark');
+        }}
+        trackColor={{ false: colorGrey1.toString(), true: colorSuccess.toString() }}
+        value={theme === 'Dark'} />
+      <Text>Dark</Text>
+    </View>
+  );
+};
+
+export default ThemeSwitch;