couter & expo screens

src/screens/CounterScreen.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+    SafeAreaView,
+    Text,
+    View,
+    StyleSheet,
+    Platform,
+} from 'react-native';
+import { observer } from 'mobx-react';
+import Icon from 'react-native-vector-icons/AntDesign';
+import { NavigationFunctionComponent } from 'react-native-navigation';
+import { useNavigationButtonPress } from 'react-native-navigation-hooks/dist/hooks';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+import { useStores } from '../store';
+import Constants from '../utils/constants';
+import { ButtonIcon } from '../components/Button';
+
+const CounterScreen: NavigationFunctionComponent = observer(({
+  componentId,
+}) => {
+  const { counter } = useStores();
+
+  useNavigationButtonPress(counter.decrement, componentId, Constants.CounterScreen.decButtonId);
+  useNavigationButtonPress(counter.increment, componentId, Constants.CounterScreen.incButtonId);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.counterContainer}>
+        <ButtonIcon icon={'minuscircleo'} onPress={counter.decrement} />
+        <Text style={styles.text}>
+          { counter.value }
+        </Text>
+        <ButtonIcon icon={'pluscircleo'} onPress={counter.increment} />
+      </View>
+    </SafeAreaView>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  counterContainer: {
+    padding: 8,
+    flexDirection: 'row',
+    width: '80%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 80,
+    margin: 8,
+    textAlign: 'center',
+  },
+});
+
+CounterScreen.options = props => ({
+  topBar: {
+    leftButtons: Platform.OS === 'ios' ? [{
+        id: Constants.CounterScreen.decButtonId,
+        text: Constants.CounterScreen.decButtonTitle,
+      }] : [],
+    rightButtons: Platform.OS === 'ios' ? [{
+        id: Constants.CounterScreen.incButtonId,
+        text: Constants.CounterScreen.incButtonTitle,
+      }] : [{
+        id: Constants.CounterScreen.incButtonId,
+        text: Constants.CounterScreen.incButtonTitle,
+      }, {
+        id: Constants.CounterScreen.decButtonId,
+        text: Constants.CounterScreen.decButtonTitle,
+      }],
+    title: {
+      text: 'Counter',
+    },
+  },
+});
+
+export default CounterScreen;

src/screens/ExpoScreen.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+    SafeAreaView,
+    Text,
+    View,
+    StyleSheet,
+} from 'react-native';
+import { observer } from 'mobx-react';
+import { NavigationFunctionComponent } from 'react-native-navigation';
+import { useNavigationComponentDidAppear } from 'react-native-navigation-hooks/dist/hooks';
+
+// EXPO modules
+import { Constants as ExpoConstants } from 'react-native-unimodules';
+import * as Network from 'expo-network';
+
+import Constants from '../utils/constants';
+import { useStores } from '../store';
+import Reanimated2 from '../components/Reanimated2';
+
+
+const ExpoScreen: NavigationFunctionComponent = observer(({
+  componentId,
+}) => {
+  const { ui } = useStores();
+
+  useNavigationComponentDidAppear(() => {
+    getNetworkType();
+  }, componentId);
+
+  const getNetworkType = async () => {
+    try {
+      const networkState = await Network.getNetworkStateAsync();
+
+      ui.networkType = networkState.type;
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.section}>
+        <Text style={styles.header}>
+          { 'From Expo SDK' }
+        </Text>
+        <Text style={styles.text}>Device ID: {ExpoConstants.deviceId}</Text>
+        <Text style={styles.text}>Network type: {ui.networkType}</Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.header}>
+          { 'Reanimated 2' }
+        </Text>
+
+        <Reanimated2 />
+      </View>
+    </SafeAreaView>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  section: {
+    padding: 16,
+  },
+  header: {
+    fontSize: 32,
+    fontWeight: 'bold',
+  },
+  text: {
+    fontSize: 22,
+    margin: 8,
+  }
+});
+
+ExpoScreen.options = props => ({
+  topBar: {
+    title: {
+      text: 'Expo',
+    },
+  },
+});
+
+export default ExpoScreen;