Comments (12)
@jeremybarbet :
What do you think you can add the following feature.
from react-native-modalize.
Are you talking about the modal that "merges" with the status bar?
If so, it would definitely be a good addition, I'm not sure how it would work, maybe a boolean, that you can either pass at true or not, to get this behavior.
I'm quite busy lately, I'll add it to the backlog, but I won't be able to work on that in the coming days.
from react-native-modalize.
Hey,
- I think you forget the alpha channel:
rgba (0,0,0,0)
. - That's a good idea to have gradient as a background. I'll add it on the backlog of the project
from react-native-modalize.
@jeremybarbet :
1)I tried both with rgb and rgba, it does not work, it only works with "#color".
If you do not believe me, see here: https://snack.expo.io/SkSxTKk7N
3)The ability to choose whether to set the opacity and transparency of everything else to better understand, look at the image.
from react-native-modalize.
@jeremybarbet : You could take a look at this example, I used your lib, I wanted to ask you if it's normal to get this result: https://snack.expo.io/ryqbRGbXN
a) As you can see I put handlePosition = "inside"
, inside I put a View
with a Text
inside, but overlap, I could use a marginTop
inside, but in my opinion it should not happen that it should overlap the borderRadius
.
b) As you can see by setting an opacity in modalize__content
, it would be advisable to remove elevation: 4
, it makes a strange effect.
c) Inside Modalize.tsx, I suggest you put in line 680
and 716
, {borderRadius: 0}
, as I put it, if the user sets it by mistake or otherwise, both have a strange effect.
d) It would be interesting also the possibility not to put a handlePosition for example handlePosition = "none"
e) there is a way to know at all times the exact height of the Modalize, I do not know a props that returns at any moment the height as soon as it moves?
Let me know what you think?
from react-native-modalize.
@jeremybarbet :
1)I tried both with rgb and rgba, it does not work, it only works with "#color".
If you do not believe me, see here: https://snack.expo.io/SkSxTKk7N3)The ability to choose whether to set the opacity and transparency of everything else to better understand, look at the image.
-
You did a typo on the snack link, it's
rgb
orrgba
. -
You can definetly define a transparency to the background of the modal if you want by doing
style={{ opacity: 0.6 }}
(cf: there is an example of custom style on this exemple: https://github.com/jeremybarbet/react-native-modalize/blob/master/examples-shared/src/components/modals/CustomStyle.tsx)
About the gaussian blur, I would need to add a dependencie to make it works. It's not a bad idea, i'll add it on the backlog.
@jeremybarbet : You could take a look at this example, I used your lib, I wanted to ask you if it's normal to get this result: https://snack.expo.io/ryqbRGbXN
a) As you can see I put
handlePosition = "inside"
, inside I put aView
with aText
inside, but overlap, I could use amarginTop
inside, but in my opinion it should not happen that it should overlap theborderRadius
.b) As you can see by setting an opacity in
modalize__content
, it would be advisable to removeelevation: 4
, it makes a strange effect.c) Inside Modalize.tsx, I suggest you put in line
680
and716
,{borderRadius: 0}
, as I put it, if the user sets it by mistake or otherwise, both have a strange effect.d) It would be interesting also the possibility not to put a handlePosition for example
handlePosition = "none"
e) there is a way to know at all times the exact height of the Modalize, I do not know a props that returns at any moment the height as soon as it moves?
Let me know what you think?
a) I still don't know what behavior developers expect the most: no style at all and they have to do it by themselves, already a padding but won't it be annoying for some people?
b) you can overwrite modalize__content's style by doing
style={{ elevation: 0 }}
c) You can do the same by doing
style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }}
and
overlayStyle={{ borderRadius: 0 }}
d) There is a prop for that: withHandle
https://jeremybarbet.github.io/react-native-modalize/#/PROPSMETHODS?id=withhandle
e) Why do you want the heigh of the modal, can you give me more context about it? You can try doing this, but I haven't try if it works:
this.modalize.current.measure((x, y, width, height, px, py) =>
console.log(x, y, width, height, px, py);
);
from react-native-modalize.
@jeremybarbet :
Look at this example I think you'll understand better: https://snack.expo.io/ryjXUYZQN
What I wanted to do is give the possibility that in addition to having the modelize only backgroundColor give the possibility to have:
- an image as background
- a color gradient as background
- the blur effect as a background
For example for the gradient, I was thinking of using rn-gradients
which is done in js but for performance issues it does not seem to be good.
So I was trying the usual gradient: react-native-linear-gradient
that on expo can not be installed but has its own version, however.
The effect for the gradient in my opinion must be so, starting from the initial position of the height set, when changing the position of the modelize, must also vary the height of the gradient, otherwise some colors I speak of the final parts will not be visible.
So at each move of the modalize to stabilize the gradient must update, then via a setState ();
I was thinking of using something like this: https://stackoverflow.com/a/50684433
But I'm not able to figure out where the correct position is, if it works and the performance is not too low.
P.Š.
One problem I've noticed is that if I set HeaderComponent, and swap to the other where HeaderComponent is located, it will not let me do that?
is it a normal behavior?
Let me know what you think.
from react-native-modalize.
Yes none of this features are supports yet. I want a stable version before adding new feature as such, even though I added it in the backlog.
P.Š.
One problem I've noticed is that if I set HeaderComponent, and swap to the other where HeaderComponent is located, it will not let me do that?
is it a normal behavior?
I didn't understand your question
from react-native-modalize.
@jeremybarbet : You have the last example that I posted to expo.io, take it, now you do as if you had to climb up to make sure that modalize take the whole screen, you have to take but from where there is HeaderComponent in its entirety or try to take it from the handle. He can not get up. I do not know if I explained myself well.
from react-native-modalize.
Yes, I'm aware of this, this is related to: #23
from react-native-modalize.
I'm talking about that, I think something like that can be good, like boolean.
from react-native-modalize.
I'll close this issue. All your ideas have been added to the backlog and I will work on it in the future when I have time.
from react-native-modalize.
Related Issues (20)
- Renderer Error on close if HeaderComponent uses redux selector
- Smoother animations for alwaysOpen props HOT 1
- avoidKeyboardLikeIOS not working well on android HOT 2
- Can't scroll with adjustToContentHeight (android 10) HOT 2
- new modalize on top of previous modalize HOT 1
- TextInput with iOS hardware keyboard not working
- How to disable android back button when modalize is opened
- Determine current modal height and/or current position
- panGestureAnimatedValue doesn't change with <Modalize>.open()
- Drag event is not available when model up-down.
- Rerender "renderItem" + "keyExtractor" HOT 1
- Left hand swipe up not working
- scroll not working with HeaderComponent on android HOT 5
- how to open the modal when a success API response comes? in the then callback
- Text Flickering While Typing HOT 2
- Handle is visible above a plain view
- Modal Jumping height after opening if I'm closing it with pan gesture HOT 9
- [Error][On Android only] Open the modal and touch two fingers to close the modal HOT 2
- Error: Warning: This synthetic event is reused for performance reasons HOT 1
- Modal Size HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-modalize.