Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shimmer not working on iOS #27

Open
Gabogg07 opened this issue May 8, 2020 · 8 comments
Open

Shimmer not working on iOS #27

Gabogg07 opened this issue May 8, 2020 · 8 comments

Comments

@Gabogg07
Copy link

Gabogg07 commented May 8, 2020

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>
@Btace13
Copy link

Btace13 commented Jun 10, 2020

Any updates on this?

@pragadeeshk
Copy link

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

@jindalankush28
Copy link

@pragadeeshk can you give example code

@pragadeeshk
Copy link

@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>
    )
}

@jindalankush28
Copy link

now it stopped working on android as well 😂

@pragadeeshk
Copy link

@jindalankush28 Please share your code snippet.

@jindalankush28
Copy link

jindalankush28 commented Nov 5, 2020

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

@pragadeeshk
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants