xotahal / react-native-motion Goto Github PK

Animate it! Easily!

License: MIT License

JavaScript 100.00%

react-native-motion's Introduction

React Native Motion

Change your application from the left one to the right one! Animate it! Easily! Animated Transition Article or Animated Graph Article

Getting Started

$ yarn add react-native-motion

Usage of SharedElement

We need to specify source and destination for shared element. This library then will move the shared element from source position to destination position.

class Main extends Component {
  render() {
    return (
      <SharedElementRenderer>
        <App />
      </SharedElementRenderer>
    );
  }
}

// List items page with source of SharedElement
import { SharedElement } from 'react-native-motion';

class ListPage extends Component {
  render() {
    return (
      <SharedElement id="source">
        <View>{listItemNode}</View>
      </SharedElement>
    );
  }
}

// Detail page with a destination shared element
import { SharedElement } from 'react-native-motion';

class DetailPage extends Component {
  render() {
    return (
      <SharedElement sourceId="source">
        <View>{listItemNode}</View>
      </SharedElement>
    );
  }
}

Playground for react-native-motion library

react-native-motion-playground repository
expo app

Author

Let me help you with animations in React Native 🤙
Facebook Group about animation in React Native
Publication about animation in React Native 🚗
Personal Medium Account about programming 😍
Subscribe a blog 📝
Follow me on Twitter 🐦

Jiri Otahal

react-native-motion's People

Contributors

Stargazers

Watchers

Forkers

thoth-nexlesoft lhq220 saccerwin rajarahul12 quadsurf iketutg victorm-fj ktpm489 robsonmobile luyx2412 averykimball palashgupta98 aekkapong18 872409 michaelfarrow trendingtechnology danielmorena jasonthename letranloc ryanfu hanqingzhen reactvisually caiyangjieto elcorders grafflinz ikigai-pt loverdeveloper hamzatanjicherkaoui adkandari tangzonglin ishonke lekan009 tobiaskusnaman guaranta xiaodai thilagavathi1 rncomponent lucascharrier inspireui veedeo zukye pockeysoft iamnodejs007 jaguar2k vedkaps flumiie harrybaa deboajagbe zabakala 4m-world sunflowergj moiragod kalichaudhary zhaoqiyin aungtuntun chauvv deviantnasir luyentap wushubing victor-light xchinjo crysp sakurawood niuyueyang themakerman wellmonge linabell trickyc0d3r hhy5277 mallickhruday cham74 suresh44t antoinefotso rosswilliams hayanisaid mjunaidi lihaodeveloper hyacinthehamon baugarten carlosmanotas dellwatson agungriyanto njqter dev-0x1 millarm flashfoxter ky0-nguyen satnglove react-native-animated kishangujarati saonam lichengtao1989 zhpeng8775 meztr kapilsipl olegpanfyorov danielmoreno510 hawkqing lqsang191295 alex-pro27

react-native-motion's Issues

Where Can we get the complete documentation of the package?

This package's git hub page doesn't provide any documentation except the sample code. Can you please provide the complete list of props that can be used with package. Thank you!

compatibility with recyclerlistview

im having problens trying to implement it with recyclerlistview (https://github.com/Flipkart/recyclerlistview)

when i filter the recyclerlistview, it thows an exception in sharedelement because he cant obtain the x and y of it ( ref? )

Request document

Request how to use,
The use case doesn't work。

Lack of documentation.

I want to display the text/view in the center of the screen and then animate it to the top of the screen. How to achieve this in this library?

Update Expo SDK

Hi,

I wanted to preview the Expo version, but it appears you need to update the SDK version.

would also be useful for future visitors

Is it possible to apply extra scale during the transition?

Just wondering if there's any way to override the transition and add scaling to it without directly changing the code in the library, thanks!

Check the render method of `Static Renderer`

Hello man,
I want to use this beautiful library with components of NativeBase, but I have a lot of issues, check the code please:

<Content style={Style.content}
  showsVerticalScrollIndicator={true}>
  <List
    dataArray={this.state.categories}
    renderRow={(category, sectionId, index) =>
      <TranslateY duration={250}>
        <CategoryItem
          navigation={navigation}
          category={category}
          index={index}
        />
      </TranslateY>
  }/>
</Content>

Let me know what you think

Thanks in advance!

Use React Navigation During Transition

Is it possible if you could do this with react navigation?

list not updated when updating props

Hi, i implement this lib in market app, the user can change the price of the product.
i am displaying the price in ListItem component
when i pass the newPrice to ListItem component the price not changing.

the render function

render(){
   const {newPrice} = this.props;
   console.log(newPrice) // it shows the new price
   return(
     <Text>{newPrice}</Text> // shows the old price even after user update the price
   );
}

in the console it shows the updated price but in the screen the price is not updated

Can we use it with react native navigation

Thanks for this awesome library. Can we use this library with react-native-navigation?

Could this work with shared elements that cannot be cloned, e.g. video?

What if the shared element is a video view that is actively playing a video with sound. It might be streaming a live video. You can't clone it because the clone would not be at the same point in the stream and there could be some stuttering or buffering etc. How should we handle this?

Shake — Perform animation only when the new value is truthy.

Shake is an ideal animation for presenting feedback to users when there is an error in a form submission. Because errors are binary (there is either an error, or there isn't), it would be best to be able to trigger the Shake animation based on this binary value: truthy = shake, falsy = do-not-shake. But because there are other use cases for shaking, such as any change in value, the current check of value change is also pertinent and simply redundant in the truthy/falsy case.

For the above use case, in today's implementation when an error is removed, that binary trigger changes from true to false which invokes an animation when one is not expected or desired. In order to avoid that, one is required to do bookkeeping and boilerplate to trigger a Shake only when an error is introduced by, e.g., keeping a state variable that keeps track of error counts only when a fresh error introduced, but not when an error is removed.

I propose the additional check of animating only when the provided value is truthy. This makes it very easy to trigger when the triggering logic is binary such as "is there an error on this field?" or "is there an error in this form?" And, it still allows for triggering when there is an arbitrary change of value.

The only behavior regression this patch introduces is no longer triggering a Shake when the value goes from a truthy value to a non-truthy value. In my opinion, this is completely acceptable and quite intuitive.

Undefined is not a function

Getting this error undefined is not a function (near ...ref.measure...)
"react": "16.4.1"

Upgrade to RN 0.60+

Hi there! Are you planning to upgrade your library to support RN 0.60 and remove all warnings like componentWillReceiveProps should be replaced?

Dynamic size for ListItemNode

many thanks for the great library,

I got an Issue an I am not quite sure how to resolve it.

I would like that my List Page Items to have dynamic size and extend or shrink based on their content. Making them a flex object resolve this issue, however when I tap an item the transitions works, however the height of the item shrinks down to a few pixels.

Support ios/android

It is support both device ios and android ?

Duration not applied to show

react-native-motion/src/TranslateYAndOpacity.js

Line 54 in d65ed1d

duration: 500,

I'm pretty certain duration should be passed here to the "show" function, and not just on the "hide" function.

Fetching data

can 'you specify in which js page we can have the DB call for fetching the menu data?

issue

ref.measure is not a function

Warning: moveSharedElement is required

I'm getting a warning

Warning: Failed context type: The context moveSharedElement is marked as required in SharedElement, but its value is undefined.

when I use the SharedElement.. what value should I give to that property?

Invariant Violation: Element type is invalid: expected a string

Hi mate, I don't understand this issue (Works if I remove the TranslateY component), I'm using the last version of react-native 0.57.8

import { TranslateY } from 'react-native-motion'

Log:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.  Check the render method of `BarChart`.  This error is located at:     in RCTView (at View.js:45)     in View (at BarChart/index.js:21)     in BarChart (at Motion/index.js:45)     in RCTView (at View.js:45)     in View (at Motion/index.js:75)     in RCTScrollContentView (at ScrollView.js:852)     in RCTScrollView (at ScrollView.js:977)     in ScrollView (at KeyboardAwareHOC.js:508)     in KeyboardAwareScrollView (at Content.js:95)     in Content (at connectStyle.js:384)     in Styled(Content) (at Motion/index.js:74)     in RCTView (at View.js:45)     in View (at Container.js:15)     in Container (at connectStyle.js:384)     in Styled(Container) (at Motion/index.js:62)     in MotionScreen (created by SceneView)     in SceneView (at StackViewLayout.js:793)     in RCTView (at View.js:45)     in View (at createAnimatedComponent.js:153)     in AnimatedComponent (at StackViewCard.js:69)     in RCTView (at View.js:45)     in View (at createAnimatedComponent.js:153)     in AnimatedComponent (at screens.native.js:59)     in Screen (at StackViewCard.js:57)     in Card (at createPointerEventsContainer.js:27)     in Container (at StackViewLayout.js:858)     in RCTView (at View.js:45)     in View (at screens.native.js:83)     in ScreenContainer (at StackViewLayout.js:311)     in RCTView (at View.js:45)     in View (at createAnimatedComponent.js:153)     in AnimatedComponent (at StackViewLayout.js:307)     in Handler (at StackViewLayout.js:300)     in StackViewLayout (at withOrientation.js:30)     in withOrientation (at StackView.js:79)     in RCTView (at View.js:45)     in View (at Transitioner.js:215)     in Transitioner (at StackView.js:22)     in StackView (created by Navigator)     in Navigator (at createKeyboardAwareNavigator.js:12)     in KeyboardAwareNavigator (at createAppContainer.js:388)     in NavigationContainer (at App.js:25)     in RCTView (at View.js:45)     in View (at Root.js:13)     in Root (at connectStyle.js:384)     in Styled(Root) (at App.js:24)     in App (at renderApplication.js:34)     in RCTView (at View.js:45)     in View (at AppContainer.js:98)     in RCTView (at View.js:45)     in View (at AppContainer.js:115)     in AppContainer (at renderApplication.js:33)  createFiberFromTypeAndProps     index.bundle?platform=ios&dev=true&minify=false:12359:26 createFiberFromElement     index.bundle?platform=ios&dev=true&minify=false:12379:48 createChild     index.bundle?platform=ios&dev=true&minify=false:15172:56 reconcileChildrenArray     index.bundle?platform=ios&dev=true&minify=false:15401:42 reconcileChildren     index.bundle?platform=ios&dev=true&minify=false:16039:50 updateHostComponent     index.bundle?platform=ios&dev=true&minify=false:16388:26 performUnitOfWork     index.bundle?platform=ios&dev=true&minify=false:19570:27 workLoop     index.bundle?platform=ios&dev=true&minify=false:19604:47 renderRoot     index.bundle?platform=ios&dev=true&minify=false:19675:21 performWorkOnRoot     index.bundle?platform=ios&dev=true&minify=false:20393:23 performWork     index.bundle?platform=ios&dev=true&minify=false:20320:30 performSyncWork     index.bundle?platform=ios&dev=true&minify=false:20296:20 batchedUpdates$1     index.bundle?platform=ios&dev=true&minify=false:20479:28 batchedUpdates     index.bundle?platform=ios&dev=true&minify=false:10149:37 _receiveRootNodeIDEvent     index.bundle?platform=ios&dev=true&minify=false:10206:23 receiveTouches     index.bundle?platform=ios&dev=true&minify=false:10236:34 __callFunction     index.bundle?platform=ios&dev=true&minify=false:2470:49 <unknown>     index.bundle?platform=ios&dev=true&minify=false:2243:31 __guard     index.bundle?platform=ios&dev=true&minify=false:2424:15 callFunctionReturnFlushedQueue     index.bundle?platform=ios&dev=true&minify=false:2242:21

Thanks in advance,
Juan

Feature Request

Hey, just wondering if there is a possibility to add an Icon animation that takes 2 icons and spins them around? Just like we can probably have something like icon transitioner or spinner that would change the drop down to up or a search to close, and others.

Cannot read the property 'measure' of null

I am using react-native-motion along with react-router-native

I have FlatList with list of items where each item is wrapped with ShareElement like this,

  <SharedElement id={'source'}>
                <View style={cardFirstView}>
                    <View style={{width: item.imageurl ? '80%' : '100%'}}>
                        <Text type={'bold'} numberOfLines={1} ellipsizeMode={'tail'} style={equipmentName}>{displayname}</Text>
                        <Text numberOfLines={1} ellipsizeMode={'tail'} style={[locationStyle, {marginTop: 5, color: location ? "#000000" : '#7e7e7e'}]}>{location ? location : "--- Location not specified ---"}</Text>
                    </View>
                </View>
  </SharedElement>

and then i did the same with detail page as follows,

      <SharedElement sourceId={'source'}>                
            <View style={headerStyle}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <TouchableOpacity onPress={() => this.props.history.goBack()} style={{padding: 10}}>
                        <GSIcons name={'backButton'} style={{height: 20, width: 20}} color={'white'} />
                    </TouchableOpacity>
                    <Text type={'bold'} numberOfLines={1} ellipsizeMode={'tail'} style={pageTitleStyle}>{displayname}</Text>
                </View>
                <Text style={subTitleStyle}>{contractType}</Text>
            </View>
      </SharedElement>

When detail page is opened by tapping on any of the FlatList item, Following error occurs,

1.Can we use this package with 'react-native-router'?
2.If so, Please correct me if i am using the package in the wrong way.
Thank You.

Functional Use in Existing Frameworks

How would you intend to support navigation frameworks like RNN or React Nav, etc.?

lenghty FlatList (ListView) colliding with the motion animation

Hi. Your example works fine, but there is an issue when rendering the list rows. I´ve supplied a list of 24 items. But they are not rendered all. Sometimes only the first 9 items are rendered, other times only the first 20 items are rendered. The number is different. But never did I succeed in rendering all 24 items. I´ve found out that all the items (24) are available on the state but they are rendered up to the point when the onMoveToDestinationWillStart will fire as is apparent from the attachment. After this life-cycle fires, no more items get rendered. Is it, somehow, expected behavior?