Comments (9)
I've created a sample project to demonstrate the issue I'm having with laying out a card that's been nested:
before the updates the card used to be centered in the screen. Please look at the Card
in the Components
folder.
the relevant code looks like this:
// Creates a card wrapper with shadow
let card = Node<UIView>(key: state.id) { (view, layout, size) in
let componentSize = self.getSize()
view.layer.shadowColor = UIColor.black.cgColor
view.layer.shadowOpacity = 0.5
view.layer.shadowOffset = CGSize.init(width: 2, height: 2)
view.layer.shadowRadius = 2
layout.width = componentSize.width
layout.height = componentSize.width * CardSize.Proportion
layout.position = .absolute // This allows the card to be layered on top of the background
layout.alignSelf = .center // The card is not centering properly after the framework update
}
I'm using layout.position = .absolute
to create layered components.
the layout.alignSelf = .center
is not working anymore. I can apply a top margin but this should be working.
from render.
It seems this is happening to me too. I was using:
layout.alighSelf = .center
to center a card in the middle of the screen after setting its position property like this:
layout.position = .absolute
after the update the card sticks to the top of the screen instead of centered in the middle of the screen like before. The only thing that seems to work is to set a top margin on the card.
from render.
Thank you guys for the feedback - 4.0 went to a huge (but necessary) refactoring.
Could you attach some code that reproduce the issue? i'm an unable to reproduce it myself.
from render.
I'm setting up a simple app separate from my main project to see if I can reproduce the problems I'm having. The main project is getting to complicated to produce simple example code. I'll post code when I have something.
Thanks Alex!
from render.
I concur, my views now are getting stuck in the upper left hand corner instead of being centered. It's almost as if the Yoga formatting is being ignored if nested?
from render.
Thank you very much for the sample code!
So few observations:
- Children components should be added using the 'ComponentNode' function - that does more than just get the rendered node - especially if the component has a state - I will cover this in the new documentation!
- I think the issue might be related to poor yoga support of .absolute layouts. I will try to investigate this - for the time being the same effect can be created by having the card as subview of the background right?
@msafder are you also using .absolute layouts?
from render.
Update: position .absolute seems to be working fine - will push the example soon in the repo.
@jewilhel I can fix the sample prj you provided by simply adding layout.justifyContent = .center
in LayoutContainer.render
from render.
Ah, yes I see now. I was using layout.alignContent = .center
instead of the correct layout.justifyContent = .center
in my LayoutContainer
Thanks for spotting the error.
from render.
As for your suggestion of using the ComponentNode
function. I really wanted to do that, but in my larger project that I'm working on, I'm passing in a variety of component types into my card, not just the Feature
and Titlebar
components you saw in my example code. The problem is I have to explicitly define the ComponentViewType
that will be used in the ComponentNode
function, but In my case I don't know that until runtime. I was passing a pre-rendred node of type NodeType
because I don't have to know anything about it up front.
from render.
Related Issues (20)
- What happened to ComponentCollectionViewCell? HOT 1
- Classic Version does not compile on clean CocoaPods install HOT 2
- No control over a ComponentView's contentView HOT 1
- UICollectionView support? HOT 2
- Updating a panning view fails to HOT 4
- RenderNeutrino issue with cacaopod headers(device) HOT 1
- Question: why is .flexibleHeight a default for non-scrolling UIComponentViewControllers? HOT 2
- Question: optimisation of the render cycle for stateless components HOT 3
- Carthage support broken since version 5.2
- AppKit Support? HOT 3
- Struct vs Class for UIProps/UIState HOT 1
- Use of _kvcKeyPathString for the identifier in AnyKeyPath extension HOT 2
- REQUEST: Simple Example of how to use CollectionViews with Render Neutrino?
- Write documentation.
- Is Render cross-platform?
- Build List component.
- Ensure RenderInspector works with Neutrino.
- Build more examples in the catalog.
- Port Documentation. HOT 5
- Neutrino: table component layout performance HOT 5
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 render.