diff --git a/src/App.native.tsx b/src/App.native.tsx
index 9750e7e7e1..1291c3140a 100644
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import {View} from 'react-native'
+import {observer} from 'mobx-react-lite'
 import Animated, {useAnimatedScrollHandler} from 'react-native-reanimated'
 
 export default function App() {
@@ -9,13 +10,16 @@ export default function App() {
     return () => clearInterval(id)
   }, [])
 
-  // props to pass into children render functions
-  const onScroll = useAnimatedScrollHandler({
-    onScroll(e) {
+  const handler = useAnimatedScrollHandler({
+    onScroll() {
       console.log(x)
     },
   })
 
+  return <Child onScroll={handler} />
+}
+
+const Child = observer(function ({onScroll}) {
   return (
     <View style={{flex: 1, flexDirection: 'row'}}>
       <Animated.FlatList
@@ -25,13 +29,6 @@ export default function App() {
           paddingTop: 1000,
         }}
       />
-      <Animated.FlatList
-        onScroll={onScroll}
-        style={{flex: 1, backgroundColor: 'blue'}}
-        contentContainerStyle={{
-          paddingTop: 1000,
-        }}
-      />
     </View>
   )
-}
+})