I am trying to create Twitter like profile layout in React Native. Although many apps use this pattern. My current JSX setup is something like this.
Header (profile)
ViewPagerNav (custom)
ViewPager
Tab with ListView
Tab with ListView
Problem is that only bottom part scrolls. I have seen this problem for many React Native apps. Is there a solution for this?
How should my render view look like to g full get page scrolling?
There is actually a really good example of this in the F8 app. The 3 files you want to look at are here:
https://github.com/fbsamples/f8app/blob/master/js/tabs/schedule/MyScheduleView.js
https://github.com/fbsamples/f8app/blob/master/js/common/ListContainer.js
https://github.com/fbsamples/f8app/blob/master/js/common/PureListView.js
If you want to see how it works in the app it is the My F8 tab.
The basic idea is that the ListContainer keeps track of the scroll position via the handleScroll function. It passes handleScroll to all of its children renaming the function to onScroll.
The PureListView a it takes that onScroll property via the object spread operator {...this.props} and passes it into the ListView.
That is all just to keep track of the scroll. If you look in MyScheduleView.js you can see how it is mostly implemented.
Hope that helps.
Related
I'm developing a React App using different components to layout the page.
While i Work with these components I usually go back and forth changing some of their props in the code.
What I would like is that when I save the file React sees that I changed some props and rerender the component with new props.
Right now I have to update the page every time and it's really annoying.
EXAMPLE
I have this transform component
function Transform({size, children}) {
return <div style={`transform: scale(${size});`}>{children}</div>
}
And I use it in the app like this
<Interface>
<Transform size={0.25}><Grid layout={'3x4'} /></Transform>
</Interface>
When I change the size prop on the Transform component (just to test if I want the grid bigger) and save the file, React should reRender the component since one prop has changed and so it will appear differently.
How can I set my workspace like this? Any help is really appreciated thanks!
(even automatically updating the whole page would be great!)
I would just check the size in browser dev tools and change them there then once you are happy apply those to your code
IN the bottom left of the picture you see styles and then you can just type what you want.
Edit: As OP mentioned in the comment it will only be usable if you want to change some css properties.
This not exactly what I was looking for but I think it's even better!
https://previewjs.com/
Edit: I also found that this was the solution to my original problem: Hot Reload is not working in my React App
I'm planning on an academics organizer application where you can add tabs much like you can add tabs in a browser, but it's in the context of the application. Each tab has its own history, route, navigation, etc.
I thought this would be trivial to implement with vue-router but thinking about it a little more I have no idea how to map router links to tabs that can change as routes are usually just set in stone.
I also thought about creating a separate router for each tab, but that also seems a bit funny. Can someone help me out?
EDIT: It's important to note that the application is not actually a web browser. I would just like browser-like tabs, but in the context of an academics-organizer-application-thing.
You probably don't need a router to do that you can simply use v-if and v-else on a specific property that sets the active tab
First idea.
It may be better to use some existed layout framework for tabs logic. For example Golden Layout
And when tab opens you can bootstrap into this tab vue.js app with vue-router in "abstract" mode.
For state managment you can use event bus or vuex. But it has to be the only one across the whole app.
Second idea.
If bootstrapping of several vue.js apps looks like overengineering, then you could create component which implements basic functions for history / navigation. This component have to wrap the content of each your tab.
My native app support multi-language functionality like 'English' and 'Danish'. For this I have created a drop down on top of the header with two menu options, for example if click on Danish language,it will set the 'Danish' language, but the effect is not displayed, for this I have to click on current menu, then the effect of the language is seen.
So my questions is how to reload current page in react native programmatically.
Thanks in advance.
Try storing your locale in Redux and then update the UI from that state using container components.
I don't think your problem is reloading. You must change the state on click, but believe me do not write custom localization. Here is the great plugin to do it https://github.com/stefalda/ReactNativeLocalization
The correct way to cause a render of a page is by calling this.setState(). This will trigger the React lifecycle.
You don't need reload current page if you only need to change language, You can achive that with this library https://github.com/derniercri/react-native-redux-i18n
Heyo everyone,
story time - skip if you don't care
I'm just starting out with Meteor + Polymer using Synthesis by #aruntk and I'm very happy about the results and greatful for the time he's invested in this project. There's one issue I'm having though.
I've previously only changed a iron-pages object to change the content of my view. Putting that in a FlowRouter like FlowRouter.route("/", action: {ironpages.select("home");}); works just fine. However, my site is getting more complex and I want to rerender a whole section now. I'm being told to do it reactively which is (to my poor understanding) the preferred way of building Apps here.
tl;dr - skip to here if you don't care about stories
So what I did is just putting mwcLayout.render("test-layout",{"main":"yas-manual-page"}); in my Router action. However, I have to reload to make the changes visible which is not what I want.
the router action is being called when changing the URL
the mwcLayout.render() call works if I reload the page once in the initial building of the site
calling mwcLayout.render() again at a later point does not do anything
I've read up on the topic and people say it's a problem with single-page apps and not building it reactively and whatnot, but I have no idea how this is not reactive. It's reacting to the URL change.
Please, if you have a minute, share some insight with me, I'm really stuck. :slight_smile:
Have a wonderful day y'all!
disclaimer: it's a repost form the Meteor forums which suggests coming here instead.
This behavior is added as a feature of mwc layout to prevent multiple re rendering during each route change. Workarounds here are to create another mwc layout or to set third argument forceRender. From the mwc:layout docs
forceRender
In mwc:layout we dont re render the layout unless the new layout is not equal to the current layout or forceRender argument is set. This is to prevent unwanted rerendering while changing routes(even if you change a param/queryparam the route gets rerun so does the render function written inside FlowRouter action). forceRender comes in handy when you have to change the rendering while keeping the current layout.
...
<mwc-layout id="demo-landing">
<div region="header"></div>
<div region="main"></div>
</mwc-layout>
...
imports/startup/client/router.js
...
action:function(params,queryParams){
mwcLayout.render("demo-landing",{"main":"test-layout1","header":"test-header"});
}
...
Now if you try
mwcLayout.render("demo-landing",{"main":"test-layout2","header":"test-header"});
from console it wont work since layout is not changed and forceRender is not set.
This works->
mwcLayout.render("demo-landing",{"main":"test-layout","header":"test-header"},true);
I'm trying to have an app in which there are many elements spread all over the page. The highest element I could use for bootstrapping the app is the BODY element, however I do not want to do it like this.
I would like just to tell angular to bootstrap the same app over more elements which are not related in any way and share the data between it.
I've setup a plunker, however it seems that a shared service is not the right way to go
Basically, in any of the textfields you'd change the text, it should propagate to the other one as well, however this does not happen.
What I am doing wrong? Is there a better approach to this?
Thanks.