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

Question

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

rahuljiresal opened this issue 8 years ago · 12 comments

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>

Answer 1 · 2016-06-14T09:56:45.000Z

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>

Answer 2 · 2016-06-14T17:03:55.000Z

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>

Answer 3 · 2016-06-15T12:11:12.000Z

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

Answer 4 · 2016-06-15T17:23:58.000Z

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.

Answer 5 · 2016-09-11T22:52:35.000Z

Hi @oblador any plans to work on this?

Answer 6 · 2017-09-14T10:21:18.000Z

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?

Answer 7 · 2017-09-14T11:09:18.000Z

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.

Answer 8 · 2017-09-14T11:55:08.000Z

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.

Answer 9 · 2017-09-14T13:59:08.000Z

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

Answer 10 · 2017-10-24T15:47:59.000Z

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

Answer 11 · 2017-12-03T00:02:40.000Z

@AugustoAleGon did you ever get anywhere with this?

Answer 12 · 2018-04-08T23:51:17.000Z

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?