SolitoImage not working on native from minimal starter project

[jcamden]

Hello! I'm new to Solito (thanks for making this!), and I've been trying to get started with the minimal starter project, but I've been really hung up on images: using SolitoImage works as expected (i.e. next/image) on Next dev server---which is cool. However, for both native platforms, it's not able to make use of react-native-fast-image:

iOS Bundling failed 4222ms
Unable to resolve "react-native-fast-image" from "../../node_modules/solito/build/image/fast/fast.js"

Could that be because react-native-fast-image is only a devDep (rather than dep) in the solito package.json? My best guess was to resolve this locally by adding this to deps in a package.json:

"react-native-fast-image": "^8.6.3",

I tried the apps/expo package (probably the best place for it), and I also tried packages/app. In either case, I can then advance to this error:

iOS Bundling complete 7466ms
 ERROR  Invariant Violation: requireNativeComponent: "FastImageView" was not found in the UIManager.

This error is located at:
    in FastImageView (created by FastImageBase)
    in RCTView (created by View)
    in View (created by FastImageBase)
    in FastImageBase (created by FastImage)
    in FastImage (created by SolitoFastImage)
    in SolitoFastImage (created by HomeScreen)
    in RCTView (created by View)
    in View (created by Dripsy.View)
    in Wrapped (created by HomeScreen)
    in HomeScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Screen)
    in MaybeFreeze (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by NativeNavigation)
    in NativeNavigation (created by App)
    in BreakpointIndexProvider (created by DripsyProvider)
    in DripsyProvider (created by Dripsy)
    in Dripsy (created by Provider)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by NavigationProvider)
    in NavigationProvider (created by Provider)
    in Provider (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in DevAppContainer (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

After looking into that a little bit, I sense that I was out of my depth, particularly with respect to how some solutions involving react-native (cocoa?)pods would relate to an expo/solito project.

Any chance you could give me some guidance on how to use images in a Solito project? Could it also make sense to provide an example in the starter projects? Really appreciate your awesome work :)

[nandorojo]

Hey, can you follow the Expo steps for the installation guide? https://solito.dev/usage/image#installation

[jcamden]

Thanks for the response! I like that there are options. I tried out the non-optimized Expo Go route. I had to modify node_modules/solito/image/expo/index.js with an additional double period in order to get out to the root:

export * from '../../build/image/expo'

I'll also try out the custom dev server approach when I can negotiate a time with my wife ;) Thanks again for this awesome work. So gonna buy you a coffee.

[jcamden]

Looks like the issue mentioned above was already addressed/fixed here and is out with 2.0.8. I will update. Also... after some Googling, it appears to be not possible and unnecessary to buy you a coffee 👍

[thiagodebastos]

Hi @jcamden did you manage to get this working with the other options other than Expo Go? I've come across the same issue and am at a loss. I managed to get rid of the error 'FastImageView" was not found in the UIManager.'. However, now I get no errors but none of the images render. I can even put a random string into SolitoImage's src prop, and get no errors. It also seems like adding a height does not affect the rendered component's height, even though modifying the height via the style prop does 😕

[nandorojo]

I’ll investigate this tomorrow, I have some ideas. The issues you’re mentioning sound unrelated to the Expo ones, but I think I know a potential fix.

[thiagodebastos]

I’ll investigate this tomorrow, I have some ideas. The issues you’re mentioning sound unrelated to the Expo ones, but I think I know a potential fix.

Thanks @nandorojo, much appreciated!

If I get any of it working I'll report back

[nandorojo]

Can you try updating to version 2.1.3?