Improved example project

Author: jdnichollsc

example/ios/example.xcodeproj/project.pbxproj

@@ -501,6 +501,7 @@
 				PRODUCT_NAME = example;
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -525,6 +526,7 @@
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = example;
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;

example/ios/example.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

example/src/App.tsx

@@ -11,10 +11,14 @@ import {
   TextInput,
   View,
   Button,
+  SafeAreaView,
   StatusBarStyle,
+  useColorScheme,
+  ScrollView,
 } from 'react-native';
 import {openLink, tryDeepLinking} from './utils';
 import {InAppBrowser} from 'react-native-inappbrowser-reborn';
+import {Colors} from 'react-native/Libraries/NewAppScreen';
 
 const instructions = Platform.select({
   ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
@@ -35,26 +39,40 @@ const App = () => {
     await openLink(url, statusBarStyle);
   }, [url, statusBarStyle]);
 
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+    flex: 1,
+    height: '100%',
+  };
+
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={backgroundStyle}>
       <StatusBar barStyle={statusBarStyle} />
-      <Text style={styles.welcome}>
-        {'Welcome InAppBrowser\nfor React Native!'}
-      </Text>
-      <Text style={styles.instructions}>Type the url</Text>
-      <TextInput
-        style={styles.urlInput}
-        onChangeText={text => setUrl(text)}
-        value={url}
-      />
-      <View style={styles.openButton}>
-        <Button title="Open link" onPress={onOpenLink} />
-      </View>
-      <View style={styles.openButton}>
-        <Button title="Try deep linking" onPress={tryDeepLinking} />
-      </View>
-      <Text style={styles.instructions}>{instructions}</Text>
-    </View>
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        contentContainerStyle={backgroundStyle}>
+        <View style={styles.container}>
+          <Text style={styles.welcome}>
+            {'Welcome InAppBrowser\nfor React Native!'}
+          </Text>
+          <Text style={styles.instructions}>Type the url</Text>
+          <TextInput
+            style={styles.urlInput}
+            onChangeText={text => setUrl(text)}
+            value={url}
+          />
+          <View style={styles.openButton}>
+            <Button title="Open link" onPress={onOpenLink} />
+          </View>
+          <View style={styles.openButton}>
+            <Button title="Try deep linking" onPress={tryDeepLinking} />
+          </View>
+          <Text style={styles.instructions}>{instructions}</Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
   );
 };
 
@@ -65,6 +83,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
     padding: 30,
+    height: '100%',
   },
   welcome: {
     fontSize: 20,

example/src/utils.ts

@@ -4,6 +4,7 @@ import {
   StatusBar,
   Linking,
   StatusBarStyle,
+  Dimensions,
 } from 'react-native';
 import {InAppBrowser} from 'react-native-inappbrowser-reborn';
 
@@ -16,6 +17,7 @@ export const openLink = async (
   animated = true,
 ) => {
   try {
+    const {width, height} = Dimensions.get('window');
     if (await InAppBrowser.isAvailable()) {
       // A delay to change the StatusBar when the browser is opened
       const delay = animated && Platform.OS === 'ios' ? 400 : 0;
@@ -27,10 +29,14 @@ export const openLink = async (
         preferredControlTintColor: 'white',
         readerMode: true,
         animated,
-        modalPresentationStyle: 'fullScreen',
+        modalPresentationStyle: 'formSheet',
         modalTransitionStyle: 'flipHorizontal',
         modalEnabled: true,
         enableBarCollapsing: true,
+        formSheetPreferredContentSize: {
+          width: width - width / 6,
+          height: height - height / 6,
+        },
         // Android Properties
         showTitle: true,
         toolbarColor: '#6200EE',

example/tsconfig.json

@@ -2,6 +2,7 @@
 {
   "extends": "@tsconfig/react-native/tsconfig.json",     /* Recommended React Native TSConfig base */
   "compilerOptions": {
+    "jsx": "react",
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
 
     /* Completeness */