Create New Component By Extracting Screen Code from Draftbit Custom Screen

This post is a request for information about how to add to or modify an existing Draftbit project after exporting it to a source directory on my Mac. The export has been done successfully, and I can run the code on my phone using Expo. Below I outline my n00b tale of woe. Any help would be appreciated. :slight_smile:

I have a Draftbit screen, FeedingDetailsScreen, which contains data on a Feeding Plan (amongst many other things). I would like to extract the code for Feeding Plan into a new component, FeedingPlanView, which would be implemented in FeedingDetailsScreen by importing the component and then instantiating it as a tag:

I have implemented FeedingPlanView using the same pattern as a Draftbit screen, only I have replaced the ScreenContainer wrapping tag with a simple Container tag:

import {React} from 'react';
import {
    Icon,
    withTheme,
    Container
  } from '@draftbit/ui';
  import { StyleSheet, Text, View } from 'react-native';
  
const FeedingPlanView = props => {
    const { theme } = props;

    return (
        <Container>
            <View>
                <View
                    style={StyleSheet.flatten([
                        styles.viewJO,
                        { borderColor: theme.colors.light },
                        ])}
                    accessible={true}
                    importantForAccessibility="auto"
                    hitSlop={{}}
                    pointerEvents="auto"
                >
                      :
                      :
                </View>
            </View>
        </Container>
    );
};

When I try to run this code I always get this error when trying to instantiate the FeedingPlanView tag.

TypeError: undefined is not an object (evaluating ‘_react.React.createElement’)

This error is located at:
in RootErrorBoundary (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)

  • node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
  • node_modules/react-native/Libraries/LogBox/LogBox.js:59:8 in errorImpl
  • node_modules/react-native/Libraries/LogBox/LogBox.js:33:4 in console.error
  • node_modules/expo/build/environment/react-native-logs.fx.js:27:4 in error
  • node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
  • node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
  • node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
  • node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
  • node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
  • node_modules/regenerator-runtime/runtime.js:293:29 in invoke
  • node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
  • node_modules/regenerator-runtime/runtime.js:154:27 in invoke
  • node_modules/regenerator-runtime/runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
  • node_modules/react-native/node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
  • node_modules/react-native/node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
  • node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
  • node_modules/react-native/Libraries/Core/Timers/JSTimers.js:181:14 in _callImmediatesPass
  • node_modules/react-native/Libraries/Core/Timers/JSTimers.js:441:30 in callImmediates
  • node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:387:6 in __callImmediates
  • node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in __guard$argument_0
  • node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
  • node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:4 in flushedQueue
  • [native code]:null in flushedQueue
  • [native code]:null in invokeCallbackAndReturnFlushedQueue

NOTE: I have also tried implementing the extracted component as a class which extends Component. Still get a similar error.