Merge branch 'release/v1.2.1'

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.3.0](https://github.com/fashionstudio/react-native-web-app/compare/v1.1.7...v1.3.0) (2021-09-18)
+
+
+### Features
+
+* support custom offline screen options and component ([f8badc3](https://github.com/fashionstudio/react-native-web-app/commit/f8badc3497e59b914f095bb8a4a294d98f447ec4))
+
+
+### Bug Fixes
+
+* **version:** rename ([d0d30f9](https://github.com/fashionstudio/react-native-web-app/commit/d0d30f9b963e9416bc812c1ad2c02d75d26f0217))
+* **version:** rename ([2a041ef](https://github.com/fashionstudio/react-native-web-app/commit/2a041ef106a3cea00c384930f5c1c014638e6958))
+
 ## [1.2.0](https://github.com/fashionstudio/react-native-web-app/compare/v1.1.6...v1.2.0) (2021-09-16)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-web-app",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Easily create apps using web views",
   "author": "Johann Buscail <[email protected]> (https://github.com/johannb75)",
   "license": "Apache-2.0",
@@ -82,4 +82,4 @@
     "react-native-webview": "^11.13.0",
     "react-navigation": "^4.4.4"
   }
-}
+}

src/Main.tsx

@@ -12,7 +12,10 @@ import { StructureContext } from "./helpers/context";
 const CustomWebView: React.FC<ICustomWebViewProps> = require("./components/webview").default;
 
 export const Main: React.FC = () => {
-	const props = useContext(StructureContext);
+	const {
+		offlineScreenComponent: OfflineScreenComponent = NoInternet,
+		...props
+	} = useContext(StructureContext);
 
 	const [loading, setLoading] = useState<boolean>(true);
 	const [webviewUrl, setWebviewUrl] = useState<string>(props.siteUrl);
@@ -41,7 +44,7 @@ export const Main: React.FC = () => {
 		return <Loading />;
 
 	if (!isConnected)
-		return <NoInternet />;
+		return <OfflineScreenComponent />;
 
 	return (
 		<CustomWebView

src/components/NoInternet.tsx

@@ -16,33 +16,32 @@ const styles = StyleSheet.create({
 	},
 	btnText: {
 		fontSize: 15,
-		color: "white",
 		textAlign: "center",
 	},
 });
 
 const NoInternet: React.FC = () => {
-	const {
-		fontName: fontFamily,
-		offlineText,
-		themeColor,
-	} = useContext(StructureContext);
+	const { offlineScreenOptions: offlineScreen } = useContext(StructureContext);
+
+	const { refreshButton, fontName: fontFamily, message } = offlineScreen!;
 
 	return (
-		<SafeAreaView
-			style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
-		>
+		<SafeAreaView style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
 			<Text style={{ fontFamily, fontSize: 18 }}>
-				{offlineText?.message}
+				{message}
 			</Text>
 			<TouchableOpacity
-				style={[
-					styles.button,
-					{ backgroundColor: themeColor },
-				]}
+				style={[styles.button, {
+					backgroundColor: refreshButton?.backgroundColor,
+				}]}
 			>
-				<Text style={[{ ...styles.btnText }, { fontFamily }]}>
-					{offlineText?.message}
+				<Text
+					style={[styles.btnText, {
+						fontFamily,
+						color: refreshButton?.textColor,
+					}]}
+				>
+					{refreshButton?.text}
 				</Text>
 			</TouchableOpacity>
 		</SafeAreaView>

src/helpers/default.ts

@@ -1,4 +1,5 @@
 import { IAppProps } from "../types";
+import NoInternet from "../components/NoInternet";
 
 export const defaultProps: IAppProps = {
 	siteUrl: "",
@@ -11,10 +12,15 @@ export const defaultProps: IAppProps = {
 	onCustomEvent: () => {},
 
 	customJSInjection: "",
-	fontName: "custom",
-	offlineText: {
+
+	offlineScreenOptions: {
 		message: "Вы не подключены к Интернету.",
-		refreshButton: "Обновить",
+		fontName: "custom",
+		refreshButton: {
+			text: "Обновить",
+			textColor: "white",
+			backgroundColor: "#583d72",
+		},
 	},
-	themeColor: "#583d72",
+	offlineScreenComponent: NoInternet,
 };

src/types.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ExpoPushToken } from "expo-notifications";
 import { StructureError } from "./helpers/errors";
 
@@ -10,6 +11,42 @@ export type TOnPushRegistered = (values: {
 /** Handle Custom Events */
 export type TOnCustomEvent<T = any> = (event: T, data: any) => void;
 
+export interface IOfflineScreen {
+	/**
+	 * Custom fonts name.\
+	 * Default value: **custom**
+	 * */
+	fontName?: string;
+
+	/**
+	 * The message to show the user.\
+	 * Default value: **Вы не подключены к Интернету.**
+	 * */
+	message?: string;
+
+	/** All options for the refresh button. */
+	refreshButton?: {
+		/**
+		 * Custom refresh button text.\
+		 * Default value: **Обновить**
+		 */
+		text?: string;
+
+		/**
+		 * Custom button text color.\
+		 * Default value: **##ffffff**
+		 */
+		textColor?: string;
+
+		/**
+		 * Custom refresh button background color.\
+		 * Default value: **#583d72**
+		 */
+		backgroundColor?: string;
+	};
+
+}
+
 export interface IAppProps<T = any> {
 	/** Website url */
 	siteUrl: string;
@@ -20,32 +57,11 @@ export interface IAppProps<T = any> {
 	 * */
 	paymentPattern?: string | RegExp;
 
-	/**
-	 * Custom fonts name.\
-	 * Default value: **custom**
-	 * */
-	fontName?: string;
-
-	/**
-	 * Theme color.\
-	 * Default value: **#583d72**
-	 */
-	themeColor?: string;
+	/** Custom options for the offline screen */
+	offlineScreenOptions?: IOfflineScreen;
 
-	/**
-	 * Custom text to show when the user is offline.\
-	 * **Default:**
-	 * ```json
-	 * {
-	 *		"message": "Вы не подключены к Интернету.",
-	 *		"refreshButton": "Обновить",
-	 * }
-	 * ```
-	 */
-	offlineText?: {
-		message?: string;
-		refreshButton?: string;
-	}
+	/** Custom component for the offline screen */
+	offlineScreenComponent?: React.ComponentType;
 
 	/** Custom injected javascript when the site is loading */
 	customJSInjection?: string;