zeljkox / react-native-loading-placeholder Goto Github PK

View Code? Open in Web Editor NEW

176.0 176.0 17.0 513 KB

React Native Loading Placeholder

License: MIT License

JavaScript 100.00%

loader placeholder react-native skeletor

react-native-loading-placeholder's Introduction

Hi there 👋

I'm a Full-Stack Developer working in Novi Sad, Serbia.

Started as a web developer and used many frameworks as they were most popular from Vanilla JS, jQuery, Backbone.js, Angular.js to React.js.

Early React Native adopter. Shipped 4 apps to the stores.

Improving DevOps knowledge by learning Terraform/Kubernetes/AWS.

Improving system design knowledge.

Excited about serverless.

I am working with 3rd party teams in order to guide them on they road for better React.js/React Native development.

Feel free to ping me about software development or Consulting.

🔭 I’m currently working on serverless project by using Node.js, AWS services and Serverless Framework
Languages/tools: JavaScript, TypeScript, React.js, React Native, Node.js, Spring Boot, SQL, Solidity...
🌱 I’m currently learning about servereless technologies: Lambda, Api Gateway, DynamoDB, AppSync, Cognito, Step Functions, CDK
AWS SAA-C02 Certified
💬 Ask me about anything, I am happy to help.
📫 How to reach me: https://twitter.com/Zeljko_Markovic

react-native-loading-placeholder's People

Contributors

Stargazers

Watchers

Forkers

tiberiumihai ferrannp jonatansalas sonnn geminilove torst suretarget rncomponent smartkarma nmkhoa muhammadumairghufran dwaynesworld petekp karthik-durai matthiasleitner

react-native-loading-placeholder's Issues

Blocks Fetch request if loading.

CRNA error

Doesn't work with create-react-native-app that uses Expo.
The issue seems to coming from react-native-linear-gradient which has native dependencies.
#157 might help.

Publish to npm

Hey guys,

This is a great library! Thanks for all the hard work.

Would you mind publishing your latest changes to npm?

Thank you!

Can't Use By Native Base

Hi , i Use Native Base in My App ,How i Can Use "react-native-loading-placeholder" ?

For placeholders placed next to each other a row, individual animation isn't running.

I have 3 cards that placed horizontally in a row. Now when the animation happens, it happens from left to right of the screen. Instead animation should happen from left to right of each card placeholder.

Animation not looping

<PlaceholderContainer
   style={styles.placeholderContainer}
   animatedComponent={<Gradient />}
   duration={1000}
   delay={1000}
>

I have used the same example, but the animation runs one time and doesn't run again.

Cool project but needs documentation

EOM

Animation direction

Do you have a prop to change animation direction? I did the following because I didn't see any.

type PlaceholderContainerProps = { duration: number, delay: number, style: Object, animatedComponent: React.Element<*>, loader: Function, replace: boolean, rtl: boolean };

and

_setAnimationPositions = (): void => {
    const {
      ContainerComponent,
      AnimatedComponent,
      isContainerComponentMeasured,
      isAnimatedComponentMeasured
    } = this.state;
    const {rtl} = this.props;
    if (!isContainerComponentMeasured || !isAnimatedComponentMeasured) {
      return;
    }
    const startPosition = rtl ? (ContainerComponent.x + ContainerComponent.width + AnimatedComponent.width) : -(ContainerComponent.x + AnimatedComponent.width);
    const stopPosition = rtl ? -(ContainerComponent.x + AnimatedComponent.width) : (ContainerComponent.x + ContainerComponent.width + AnimatedComponent.width);
    this.setState(
      () => ({
        startPosition,
        stopPosition
      }),
      () => {
        this.position.setValue(startPosition);
        this._startAndRepeat();
      }
    );

  };

I don't know whether this is right but got my job done

How to ensure multiple PlaceHolderContainers animate in sync?

Thanks for a cool project! I just pulled this into my own app and copy/pasted a couple of your example components in a row:

<PlaceholderContainer
  style={styles.placeholderContainer}
  animatedComponent={<Gradient />}
  duration={1000}
  delay={1000}
  key={`loading-ui-placeholder-${id}`}
>
  <View style={{ flexDirection: 'row' }}>
    <Placeholder style={[styles.placeholder, { width: 50, height: 50 }]} />
    <View
      style={{
        flexDirection: 'column',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Placeholder
        style={[
          styles.placeholder,
          {
            width: '50%',
            height: 10,
          },
        ]}
      />
      <Placeholder
        style={[
          styles.placeholder,
          {
            width: '35%',
            height: 7,
          },
        ]}
      />
    </View>
  </View>

  <Placeholder
    style={[styles.placeholder, { marginTop: 20, width: '80%' }]}
  />
  <Placeholder style={[styles.placeholder, { width: '90%' }]} />
  <Placeholder style={[styles.placeholder, { width: '50%' }]} />
</PlaceholderContainer>

Obviously, just one of these animates nicely with no problems. After putting two in a row, they begin to animate simultaneously, but after several cycles become out of sync, and look strange next to each other. I can upload a gif if necessary but I think it's pretty self explanatory.

Is there any way we can provide the animation lifecycle directly, instead of passing these millisecond props? It seems something is offsetting animation.

Not running smoothly on Android

Hey!

I'm using this library for the same purpose.
On iOS it looks really great, but on Android it doesn't look good - the gradient looses shape, and it looks like a gray line with a trail that's moving.

Did anyone encounter this issue too?

Thanks!

This is how it looks on an Android device:

This is on iPhone: