fix: layout issues iOS / cleanup legacy code

example/package.json

@@ -16,6 +16,7 @@
     "react": "16.13.1",
     "react-native": "0.63.4",
     "react-native-gesture-handler": "^1.10.3",
+    "react-native-keyboard-aware-scroll-view": "^0.9.4",
     "react-native-paper": "^4.8.1",
     "react-native-reanimated": "^2.1.0",
     "react-native-safe-area-context": "^3.2.0",

example/src/Layout.tsx

@@ -12,15 +12,15 @@ export default function Layout() {
 
   return (
     <SafeAreaView style={styles.safeAreaViewContainer}>
+      <Rive
+        alignment={alignment}
+        autoplay={true}
+        style={styles.animation}
+        fit={fit}
+        resourceName={resourceName}
+      />
       <ScrollView contentContainerStyle={styles.container}>
-        <Rive
-          alignment={alignment}
-          autoplay={true}
-          style={styles.animation}
-          fit={fit}
-          resourceName={resourceName}
-        />
-        <View style={styles.row}>
+        <View style={styles.pickersWrapper}>
           <View style={styles.pickerWrapper}>
             <Picker
               selectedValue={fit}
@@ -77,12 +77,11 @@ const styles = StyleSheet.create({
     borderColor: 'black',
     borderRadius: 5,
     alignItems: 'center',
-    height: 50,
-    minWidth: '50%',
     margin: 16,
   },
-  row: {
+  pickersWrapper: {
     flex: 1,
     padding: 16,
+    alignSelf: 'stretch',
   },
 });

example/src/StateTrigger.tsx

@@ -1,7 +1,8 @@
 import React, { useRef, useState } from 'react';
-import { View, SafeAreaView, ScrollView, StyleSheet } from 'react-native';
+import { View, SafeAreaView, StyleSheet } from 'react-native';
 import Rive, { Fit, RiveRef } from 'rive-react-native';
 import { Button, TextInput } from 'react-native-paper';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
 export default function StateTrigger() {
   const riveRef = useRef<RiveRef>(null);
@@ -20,7 +21,7 @@ export default function StateTrigger() {
 
   return (
     <SafeAreaView style={styles.safeAreaViewContainer}>
-      <ScrollView contentContainerStyle={styles.container}>
+      <KeyboardAwareScrollView contentContainerStyle={styles.container}>
         <Rive
           ref={riveRef}
           autoplay={true}
@@ -29,10 +30,10 @@ export default function StateTrigger() {
           resourceName={'ui_swipe_left_to_delete'}
         />
         <View style={[styles.fill, styles.fullWidth]}>
-          <View style={[styles.row, styles.fill]}>
+          <View style={[styles.row, styles.controlsWrapper]}>
             <TextInput
               onChangeText={setThreshold}
-              style={styles.fill}
+              style={styles.thresholdInput}
               label="Swipe Threshold"
               keyboardType="decimal-pad"
               value={threshold.toString()}
@@ -50,7 +51,7 @@ export default function StateTrigger() {
             Trigger Delete
           </Button>
         </View>
-      </ScrollView>
+      </KeyboardAwareScrollView>
     </SafeAreaView>
   );
 }
@@ -63,8 +64,8 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    marginBottom: 150,
   },
+
   box: {
     width: '100%',
     height: 400,
@@ -73,6 +74,12 @@ const styles = StyleSheet.create({
   fill: {
     flex: 1,
   },
+  controlsWrapper: {
+    maxHeight: 150,
+  },
+  thresholdInput: {
+    flex: 1,
+  },
   fullWidth: {
     minWidth: 300,
   },

example/yarn.lock

@@ -3678,11 +3678,19 @@ react-native-gesture-handler@^1.10.3:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
-react-native-iphone-x-helper@^1.3.0, react-native-iphone-x-helper@^1.3.1:
+react-native-iphone-x-helper@^1.0.3, react-native-iphone-x-helper@^1.3.0, react-native-iphone-x-helper@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
   integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
 
+react-native-keyboard-aware-scroll-view@^0.9.4:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.9.4.tgz#83b356062123070c4b75f57d34dd276b9dd5796a"
+  integrity sha512-9Q8lxGvUdEnyL2Q0/VZdcEjHUGjm1lOAMd/3bNnhknoA7RqjJDaRGOQDhOAjVW1iwrKUct+B1old87nIsiX6iw==
+  dependencies:
+    prop-types "^15.6.2"
+    react-native-iphone-x-helper "^1.0.3"
+
 react-native-paper@^4.8.1:
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.8.1.tgz#ade4e552e2aaecfc3096c8aebda37bd99facf63f"

ios/RiveReactNativeView.swift

@@ -212,21 +212,5 @@ class RiveReactNativeView: UIView, PlayDelegate, PauseDelegate, StopDelegate, Lo
     func setBooleanState(stateMachineName: String, inputName: String, value: Bool) {
         riveView.setBooleanState(stateMachineName, inputName: inputName, value: value)
     }
-
-
-
-    //    func updateArtboard(_ artboard: RiveArtboard) {
-    //        self.artboard = artboard;
-    //    }
-
-    //    override func draw(_ rect: CGRect) {
-    //        guard let context = UIGraphicsGetCurrentContext(), let artboard = self.artboard else {
-    //            return
-    //        }
-    //        let renderer = RiveRenderer(context: context);
-    //        renderer.align(with: rect, withContentRect: artboard.bounds(), with: Alignment.Center, with: Fit.Contain)
-    //        artboard.draw(renderer)
-    //    }
-
 }
 

ios/RiveReactNativeViewManager.swift

@@ -59,134 +59,3 @@ class RiveReactNativeViewManager: RCTViewManager {
     }
 
 }
-
-//class ContainerView: UIView {
-//
-//    @objc var resourceName: String? {
-//        didSet {
-//            if let _ = resourceName, !resourceName!.isEmpty {
-//                startRive()
-//            }
-//        }
-//    }
-//    let resourceExt = "riv"
-//    var artboard: RiveArtboard?
-//    var instance: RiveLinearAnimationInstance?
-//    var displayLink: CADisplayLink?
-//    var lastTime: CFTimeInterval = 0
-//    let rView = MyRiveView()
-//
-//    override init(frame: CGRect) {
-//        super.init(frame: frame)
-//        setupView()
-//    }
-//
-//    required init?(coder aDecoder: NSCoder) {
-//        super.init(coder: aDecoder)
-//        fatalError("init(coder:) has not been implemented")
-//    }
-//
-//    func setupView() {
-//        self.addSubview(rView)
-//    }
-//
-//    override func reactSetFrame(_ frame: CGRect) {
-//        super.reactSetFrame(frame)
-//        rView.reactSetFrame(frame)
-//    }
-//
-//    func startRive() {
-//        guard let name = self.resourceName else {
-//            fatalError("No resource name specified")
-//        }
-//        guard let url = Bundle.main.url(forResource: name, withExtension: resourceExt) else {
-//            fatalError("Failed to locate \(name) in bundle.")
-//        }
-//        guard var data = try? Data(contentsOf: url) else {
-//            fatalError("Failed to load \(url) from bundle.")
-//        }
-//
-//        // Import the data into a RiveFile
-//        let bytes = [UInt8](data)
-//
-//        data.withUnsafeMutableBytes{(riveBytes:UnsafeMutableRawBufferPointer) in
-//            guard let rawPointer = riveBytes.baseAddress else {
-//                fatalError("File pointer is messed up")
-//            }
-//            let pointer = rawPointer.bindMemory(to: UInt8.self, capacity: bytes.count)
-//
-//            guard let riveFile = RiveFile(bytes:pointer, byteLength: UInt64(bytes.count)) else {
-//                fatalError("Failed to import \(url).")
-//            }
-//
-//            let artboard = riveFile.artboard()
-//
-//            self.artboard = artboard
-//            // update the artboard in the view
-//            rView.updateArtboard(artboard)
-//
-//            if (artboard.animationCount() == 0) {
-//                fatalError("No animations in the file.")
-//            }
-//
-//            // Fetch an animation
-//            let animation = artboard.animation(at: 0)
-//            self.instance = animation.instance()
-//
-//            // Advance the artboard, this will ensure the first
-//            // frame is displayed when the artboard is drawn
-//            artboard.advance(by: 0)
-//
-//            // Start the animation loop
-//            runTimer()
-//        }
-//    }
-//
-//    // Starts the animation timer
-//    func runTimer() {
-//        displayLink = CADisplayLink(target: self, selector: #selector(tick));
-//        displayLink?.add(to: .main, forMode: .default)
-//    }
-//
-//    // Stops the animation timer
-//    func stopTimer() {
-//        displayLink?.remove(from: .main, forMode: .default)
-//    }
-//
-//    // Animates a frame
-//    @objc func tick() {
-//        guard let displayLink = displayLink, let artboard = artboard else {
-//            // Something's gone wrong, clean up and bug out
-//            stopTimer()
-//            return
-//        }
-//
-//        let timestamp = displayLink.timestamp
-//        // last time needs to be set on the first tick
-//        if (lastTime == 0) {
-//            lastTime = timestamp
-//        }
-//        // Calculate the time elapsed between ticks
-//        let elapsedTime = timestamp - lastTime;
-//        lastTime = timestamp;
-//
-//        // Advance the animation instance and the artboard
-//        instance!.advance(by: elapsedTime) // advance the animation
-//        instance!.apply(to: artboard)      // apply to the artboard
-//
-//        artboard.advance(by: elapsedTime) // advance the artboard
-//
-//        // Trigger a redraw
-//        rView.setNeedsDisplay()
-//    }
-//
-//    @objc func play() {
-//        runTimer()
-//    }
-//
-//    @objc func pause() {
-//        stopTimer()
-//    }
-//
-//
-//}