add re-usable message screen template

src/assets/index.tsx

@@ -5,6 +5,7 @@ export const images = {
   addressBookInactive: require('./images/addressBookInactive.png'),
   settings: require('./images/settings.png'),
   settingsInactive: require('./images/settingsInactive.png'),
+  success: require('./images/bvWalletIconSuccess.png'),
   dashboardNoWallet: require('./images/bvWalletIconNoCards.png'),
   addressBookNoContacts: require('./images/addressBookNoContacts.png'),
 };

src/navigators/RootNavigator.tsx

@@ -1,10 +1,12 @@
 import { createStackNavigator } from 'react-navigation';
 
 import { MainTabNavigator } from './MainTabNavigator';
+import { MessageScreen } from 'screens';
 
 export const RootNavigator = createStackNavigator(
   {
     MainTabNavigator,
+    Message: MessageScreen,
   },
   {
     headerMode: 'none',

src/screens/MessageScreen.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Image, FastImageSource } from 'components/Image';
+import { ButtonProps } from 'react-native-elements';
+import { Text, View, StyleSheet } from 'react-native';
+import { useNavigationParam } from 'react-navigation-hooks';
+import { Button } from 'components/Button';
+
+import { typography, palette } from 'styles';
+
+export const MessageScreen = () => {
+  const title: string = useNavigationParam('title');
+  const source: FastImageSource = useNavigationParam('source');
+  const description: string = useNavigationParam('description');
+  const button: ButtonProps | undefined = useNavigationParam('button');
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{title}</Text>
+      <Image source={source} style={styles.image} resizeMode="contain" />
+      <Text style={styles.description}>{description}</Text>
+      {button && <Button {...button} />}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 50,
+  },
+  title: { ...typography.headline4 },
+  image: {
+    height: 172,
+    width: '100%',
+    marginTop: 40,
+    marginBottom: 40,
+  },
+  description: {
+    ...typography.caption,
+    color: palette.textGrey,
+    textAlign: 'center',
+    lineHeight: 19,
+    marginBottom: 97,
+  },
+});

src/screens/index.tsx

@@ -1 +1,2 @@
 export { AddressBookScreen } from './AddressBookScreen';
+export { MessageScreen } from './MessageScreen';

src/services/NavigationService.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export const navigationRef: any = React.createRef();
+
+export function navigate(name: string, params?: any) {
+  // eslint-disable-next-line prettier/prettier
+  navigationRef.current?.navigate(name, params);
+}