Handle iPad split view sizing

standardnotes · Oct 29, 2018 · 1e5f861 · 1e5f861
1 parent 1ad739f
commit 1e5f861
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/src/screens/Compose.js b/src/screens/Compose.js
@@ -329,12 +329,6 @@ export default class Compose extends Abstract {
     this.scrollViewContentWidth = width;
   }
 
-  onLayout = () => {
-    // Called on rotation events, amongst other things.
-    const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window');
-    this.setState({deviceWidth: deviceWidth});
-  }
-
   render() {
     if(this.state.lockContent) {
       return (<LockedView />);
@@ -348,17 +342,24 @@ export default class Compose extends Abstract {
     */
 
     var noteEditor = ComponentManager.get().editorForNote(this.note);
-    const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window');
-    var scrollViewWidth = noteEditor ? deviceWidth * 2.0 : deviceWidth;
+    // const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window');
+
+    let windowWidth = this.state.windowWidth || Dimensions.get('window').width;
+    var scrollViewWidth = noteEditor ? windowWidth * 2.0 : windowWidth;
     var shouldDisplayEditor = noteEditor != null;
 
     if(noteEditor && this.state.currentPage == 1) {
       shouldDisplayEditor = false;
     }
 
     return (
-      <View style={[this.styles.container, GlobalStyles.styles().container]}
-        onLayout={this.onLayout}>
+      <View
+        style={[this.styles.container, GlobalStyles.styles().container]}
+        onLayout={(e) => {
+          let width = e.nativeEvent.layout.width;
+          this.setState({windowWidth: width})
+        }}
+      >
 
         {this.note.locked &&
           <View style={this.styles.lockedContainer}>
@@ -400,7 +401,7 @@ export default class Compose extends Abstract {
 
           {/* Place an empty container before the webview so that the plain editor does not flex grow to occupy all space. */}
           {(noteEditor != null && !shouldDisplayEditor) &&
-            <View style={[this.styles.noteTextContainer, {width: deviceWidth}]} />
+            <View style={[this.styles.noteTextContainer, {width: windowWidth}]} />
           }
 
           {shouldDisplayEditor &&
@@ -434,7 +435,7 @@ export default class Compose extends Abstract {
           }
 
           {!shouldDisplayEditor && Platform.OS == "ios" &&
-            <TextView style={[GlobalStyles.stylesForKey("noteText"), {paddingBottom: 10, width: deviceWidth}]}
+            <TextView style={[GlobalStyles.stylesForKey("noteText"), {paddingBottom: 10, width: windowWidth}]}
               ref={(ref) => this.input = ref}
               autoFocus={false}
               value={this.note.text}

diff --git a/src/screens/Webview.js b/src/screens/Webview.js
@@ -196,7 +196,7 @@ export default class Webview extends Abstract {
     let bottomPadding = -34; // For some reason iOS inserts padding on bottom
 
     return (
-      <View style={[GlobalStyles.styles().flexContainer]}>
+      <View style={[GlobalStyles.styles().flexContainer, this.props.style]}>
         <WebView
            style={GlobalStyles.styles().flexContainer, {backgroundColor: "transparent"}}
            source={{uri: url}}