Confine to view instead of modal about react-native-expanding-circle-transition HOT 20 CLOSED

@alexbrillant not really, i don't think absolute positioning would be needed, i think what you are looking for is z-index maybe? i am planning to work on a pr soon, hopefully in the next couple of days it will be ready and we can further discuss the mechanism of which we can implement this.

from react-native-expanding-circle-transition.

same here, this very odd, i'll dig deeper and come back when i find something.

from react-native-expanding-circle-transition.

Hello @sonaye! Thanks for the feedback. I think this is a great idea. I sent you a collaboration invite. You can submit a pull request if you like. I will work on this as soon as possible(I am in class right now)

from react-native-expanding-circle-transition.

awesome! i'll see what i can do

from react-native-expanding-circle-transition.

@sonaye I don't know how to implement this. All the positions would need to be absolute for this to work ? How can I mask where the animation should not go over ? If you have any ideal please tell me. Thanks

from react-native-expanding-circle-transition.

@sonaye I got it. It's working. We can add a prop called zIndex and remove the modal like you said(only keep the animated view). The animated view should be absolutely positioned because otherwise it impacts the other views while animating. Also, maybe we could add a modal boolean prop so that the user can decide if he wants it over everything. Tell me what you think. I can code it myself but it is your ideal so I can let you do it if you want. Thanks !

from react-native-expanding-circle-transition.

@sonaye I added a zIndex prop in 1.1.7 ! It let's you control what goes over it. I haven't added the children prop yet.

from react-native-expanding-circle-transition.

I don't plan on adding a children prop.

from react-native-expanding-circle-transition.

I think z-index does the trick, although it's a little bit of work to change all the elements in a view to have a proper z-index, this makes the component lees easier to use, but it works, hence, no need for a children prop.

i think the size of the area of which the animation expands to should be controlled though, say that you wish the expansion to happen in half of the screen for example, or under the nav bar only, something like that.

from react-native-expanding-circle-transition.

I couldn't however test the new feature properly. here is how the animation works out of the box without touching any elements in the view:

Notice how touchables and tab bars by default have a higher z-index value (> 100).

But when changing the z-index of only the text label under the nav bar for example, the animation breaks down:

How did you test this? do you have any working code where you specify certain z-indexs for the animation and for other elements in a view?

from react-native-expanding-circle-transition.

@sonaye I didn't experience any issue myself. Here is a working exemple:
https://gist.github.com/alexbrillant/847d9b8d960fc41dc64ab183ece5ec88
I think the default value should be higher thanks for pointing that out.

Can you send me the relevant code so I can help/reproduce your problem?

from react-native-expanding-circle-transition.

Oh, i think i didn't point out what i was trying to achieve correctly form the beginning, i am trying to have the transition animate behind the components not in front of them, that's why i proposed having a children prop in the first place, does this make sense? so, the "Circle Transition" text and the tab bar are working properly in my example. I'll test your code, and see what can I share with you to reproduce the issue.

from react-native-expanding-circle-transition.

When assigning zIndex = 101 for the text with a random key value as shown in my example (under job details), the animation fails. The text should go in front of the animation with this value, that's the expected behavior.

from react-native-expanding-circle-transition.

I am not getting any animation with your exact code. what rn version are you using, ios or android? can you provide a gif?

from react-native-expanding-circle-transition.

from react-native-expanding-circle-transition.

1.1.7?

from react-native-expanding-circle-transition.

Make sure you import the package and not the file directly(like I did by mistake inside the gist).
import CircleTransition from 'react-native-expanding-circle-transition'
And yes v1.1.7

{
  "name": "Exemples",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2",
    "react-native-expanding-circle-transition": "^1.1.7"
  },
  "devDependencies": {
    "babel-jest": "18.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "18.1.0",
    "react-test-renderer": "15.4.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

from react-native-expanding-circle-transition.

i did that yeah, perhaps you didn't push some latest modifications that you have made on the code? strange that we are not getting the same result.

from react-native-expanding-circle-transition.

No, I am using the package itself now and it is still working.
Here is the update gist(that imports the package react-native-expanding-circle-transition 1.1.7):
https://gist.github.com/alexbrillant/847d9b8d960fc41dc64ab183ece5ec88

from react-native-expanding-circle-transition.

What is your version of react native?
Here is mine :

➜  Exemples react-native -v
react-native-cli: 2.0.1
react-native: 0.41.2

from react-native-expanding-circle-transition.