Doesn't work for <Text> inside <View>

[rahuljiresal]

This works with

<Shimmer>
    <Text>Hello</Text>
</Shimmer>

But for any other kind of views, it does not work. For example, if I have a bunch of texts inside a View, it won't work.

<Shimmer>
    <View>
         <Text>Hello</Text>
         <Text>Hello</Text>
         <Text>Hello</Text>
    </View
</Shimmer>

[oblador]

Hi, you're right it doesn't work and I'm not sure why. For the time being do something like this instead:

<Shimmer>
  <Text>Hello{'\n'}Hello{'\n'}Hello</Text>
</Shimmer>

[rahuljiresal]

Haha I wish. I was actually trying to do the following.. and then tested with the earlier example I gave (because it is simpler)..

I realized that a <View/> is something that is not shimmering. It works well with <Image/> but not if it is inside a View.

<Shimmer>
    <View>
        <View key={i} style={{ flex: 1, flexDirection: 'row', marginTop: 8, marginBottom: 8 }}>
            <View style={{ height: 40, width: 40, backgroundColor: color }} />
            <View style={{ flex: 1, flexDirection: 'column', marginLeft: 8 }}>
            <View style={{ flex: 1, height: 16, backgroundColor: color, marginBottom: 4, marginRight: 200 }} / 
            <View style={{ flex: 1, height: 16, backgroundColor: color, marginBottom: 4, marginRight: 80 }} />
        </View>
    </View>
</Shimmer>

[oblador]

Hmm, that kinda looks like something you could easily solve with an image, no?

[rahuljiresal]

Yes. I could. That is a very ugly solution though. Especially in my case because I need to have multiple of those views inside Shimmer to support all iPhone and iPad screen sizes and orientations.

[rturk]

Hi @oblador any plans to work on this?

[MrLoh]

Is this package still maintained? Would love to use the shimmering for a skeleton view. But it'd be quite useless without support for views. Maybe I could allocate some time to look into the issue in the next month. Does it work properly on Android, or is it broken on both iOS and Android?

[oblador]

It is maintained, although this library is merely a wrapper for native libraries from Facebook which as far as I gather has this limitation. I'd be grateful if you spent some time to investigate it further and would merge a fix.

[MrLoh]

Why do you think the Facebook library has that limitation? I haven't used it, but I thought it's what Facebook build for the paper app and is still using for the loading animation in its app today, in those skeletons views it's certainly not Text that's shimmering.

[oblador]

Because it has problems with nested views in general. You can acheive that effect with an image too.

[AugustoAleGon]

Hello @oblador. Thanks for your amazing libraries like react-native-vector-icons and react-native-shimmer. I am currently facing an issue with the shimmer. It just doesn't work with Multiples components inside the Shimmer. In iOS works perfect. I am gonna try to check what caused this problem

[MrLoh]

@AugustoAleGon did you ever get anywhere with this?

[bennyhobart]

I think if this is a limitation of the native libraries we're binding to we can easily work around it by walking the node tree and wrapping all leaf nodes (children who have no children which are views) in the native component

Otherwise we could ask the native library authors if they could?