oblador/react-native-shimmer

Shimmer not working on iOS

Opened this issue ยท 8 comments

I am currently working with
"react-native": "0.61.3" and "react-native-shimmer": "^0.6.0".

I have a Shimmer with a nested flatlist inside. For android it works like a charm but for iOS it is not working. Sometimes you can see only a flicker once when it renders, then just no animation, change or opacity, nothing.

<Shimmer >
          <FlatList .../> //Deleted it for simplicity purposes 
</Shimmer>

Any updates on this?

Temporary workaround, set "animating" as false initially and change from false to true with a time out on componentDidMount or useEffect callbacks. It works

@pragadeeshk can you give example code

@jindalankush28 hope this helps

export default Component = () => {
    const [loading, setLoading] = useState(false)

    useEffect(()=>{
        setTimeout(()=>{
            setLoading(true)
        }, 200)
    }, [])

    return (
        <ShimmerView loading={loading}>
                //View to shimmer
        </ShimmerView>
    )
}

now it stopped working on android as well ๐Ÿ˜‚

@jindalankush28 Please share your code snippet.

const SpecialityContentLoader = () => {
const [visible, setVisibile] = useState(false);

useEffect(() => {
setTimeout(() => {
setVisibile(true);
}, 10);
}, []);
return (
<FlatList
numColumns={3}
columnWrapperStyle={{
flex: 1,
justifyContent: 'flex-start',
}}
data={[{id: 1}, {id: 2}, {id: 3}]}
renderItem={({item}) => {
return (
<View
key={item.id}
style={{
...
}}>
<TouchableOpacity onPress={() => null}>
//shimmer component
<View
style={{
borderTopRightRadius: 5,
borderTopLeftRadius: 5,
height: 72,
width: 110,
backgroundColor: color.LOADER,
}}
/>



);
}}
/>
);
};
@pragadeeshk
its working on ios but not on android with ur method

@jindalankush28 Try increasing the timeout from 10 to at least 200. Also I don't see your ShimmerView component in the code. I hope you are setting loading={visible} as property for your ShimmerView