This is my code:
<View onLayout={(event) => {
console.log('Inside');
this.props.setDropZoneValue(event.nativeEvent.layout);
}}
style={styles.borderView}>
......
</View>
On android this is coming in many times here and it is supposed to enter only 1 time. Works perfect on ios.
I'm working on react with redux
The line:
This.props.setDropZoneValue(event.nativeEvent.layout);
It is an action that modifies the reducer and therefore causes the view to be rendered again and re-enters the onLayout and is resulting in an infinite loop
Anyone know any reason for this to happen only on android?
Related
I am developing a webapp using quasar and there I used AmCharts with Axios for the API.
When data is received from the API, 5~6 charts are then rendered on the page.
The problem is there is a significant delay until the charts to be displayed after the component mounted.
I'd like to show a loading spinner during this time.
How should I detect all components are finished rendering?
Or is there some other way around for me to overcome this problem?
nextTick() is called when the DOM is fully updated (that means, components are rendered again).
You could try this in your charts component, a watcher that checks when the API is fetched, provided you already have a loader component that shows only if a show variable is set to true:
watch:{
values(newVal){
this.nextTick().then(()=>{
this.show= true;
});
}
}
I'd like to enable layout animation for some components but it once it is activated, all components being rendered are affected by layout animation. For example, I have
<container>
<waterfall/>
<menu/>
</container>
I only wish to use layout animation for the component menu but the animation is applied to the waterfall rendering which already has its own animation code.
Is this possible with react native?
I ran into a similar problem, here's how I solved it with layoutanimation:
Explanation
Keep a state variable in the container component that is passed as a prop to menu: <menu reload={this.state.doSomethingInMenu}>
In the container component, use setTimeout to set the menu variable so control is passed back to the DOM and changes will render (without animation). After setTimeout is ran, the variable will update and the menu props will change, causing it to reload.
In the menu component, check to see if that variable has been updated to the value you're expecting. If it has, call LayoutAnimation.configureNext. This will cause the next rendering (just the menu changes) to be animated.
Code Overview
container component
getInitialState: function() {
return { doSomethingInMenu: false };
},
// Do something that causes the change
// Then call setTimeout to change the state variable
setTimeout(() => {
this.setState({ doSomethingInMenu: true });
},750)
<menu reload={this.state.doSomethingInMenu} />
menu component
componentWillReceiveProps: function(nextProps) {
if (nextProps.reload) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
// Set the menu state variable that causes the update
this.setState({field: value})
}
},
If the solution above doesn't work, try changing it from LayoutAnimation to Animated, this one allows you to have more control on the animations.
You can check react-native-reanimated Transitions https://github.com/kmagiera/react-native-reanimated#transitions-
It works similarly as LayoutAnimations but gives more control on how animations will perform
I am trying to get angular formly and angular ui bootstrap typeahead playing nice. What I want is to have my select list populated from an http get request, and each time there is a change to the select field it should fire a function to get a new list of options.
typeahead="address for address in getLocation($viewValue)"
I'm not sure I did the jsbin right, but here we go.
JsBin of my problem
Here is a plunker with the typeahead working alone.
dynamic typeahead works here
I can't even get the getLocation function to fire. I have tried vm.getLocation, but no dice.
Help would be very appreciated!
Thanks. ;-)
Async select options
Watchers Example
Initially the options should be an empty array, and passed in with as shown above. Then you need to add a watcher that updates the $scope.options.templateOptions.options as its called.
But, I am still having trouble getting the typeahead to answer functions. In the typeahead docs you can use a callback to know when it is selected.
typeahead-on-select='onSelect($item, $model, $label)'
My onSelect function in the controller is never called.
Here is a working example...I combined the Async formly example with the UI Bootstrap example...notice it now becomes item.question for item instead of item for item...
Unsure why that is, I checked and its the same format the Async example is coming back as...tried all kinds of ways to get it to display the full JSON object but no luck...
if I set it to item for item, the whole JSON object shows in the model but the search returns [object Object], otherwise its only the single line which I have set to the label, which I guess is the same way it displays normally, so that's OK...
Anyway, it works
http://plnkr.co/IjuJ0HPGCKfZAOrK0u3z?p=preview
app.run(function(formlyConfig) {
formlyConfig.setType({
name: 'typeahead',
template: '<input type="text" ng-model="model[options.templateOptions.label]" uib-typeahead="item.question for item in to.options | filter:$viewValue | limitTo:15" class="form-control">',
wrapper: ['bootstrapLabel', 'bootstrapHasError'],
});
});
I have a screen in my react-native app where I am showing details of a record. It's a pretty simple screen where on the left column, I have a label describing the item and on the right, I have the value of the item. For one of the values, I have to render a ListView and I am not able to properly align it. Below is the sample app on rnplay with the symptoms:
Sample app on rnplay
Please run on iOS. Here ComponentListView is a reusable component that I am using to render ListView and it takes a component and data as it props and render each entry in the data using the passed in component. Here the list is BackupList and the component to render in each row is BackupSummary. If you run the app, you will observe that the backups are not aligned properly. I ran it in the Inspector on the simulator and looks like the ListView starts from where Varun Accepted is seen. I am not sure why. Right now there is just one item in the this.props.backupContacts but there could be more. I have tried many different flexbox properties such as alignItems, justifyContent, alignSelf in order to get it to work with no success.
Please let me know if you know how to fix it.
Put your ListView inside a View and apply css on View, something like this
<View style={{display:'flex', flexDirection:'row', justifyContent:'center'}}>
<ListView/>
</View>
I'm quite new to react and trying to wrap my head around the semantics.
I am building a map based application and the primary parts of the site are the map, the navbar and a search menu which pops up over the map and allows you to select a search which is populated from an ajax request.
Here are some questions which come to mind:
Where should I complete my ajax requests, should that all be contained in the map component? If so, how do I pass the parameters for the request, if the answer is pass it to a function in map then how do I call the function from inside my search menu component?
My app is currently organised like so:
export default class App extends React.Component {
toggleSearchMenu() {
this.refs.searchMenu.toggleVisible();
}
render() {
return (
<div className="pure-g">
<Nav>
<NavButton onClick={() => this.toggleSearchMenu()}>Searches</NavButton>
</Nav>
<Map lat="53.15" lng="-0.5" zoom="9" />
<SearchMenu ref="searchMenu" />
</div>
);
}
}
As you can see, I have resulted to showing and hiding the menu from a function within my app component which doesn't feel right somehow?
As you know, React is only responsible for rendering the views, but it doesn't define how to structure the actual logic of your app. Facebook suggests to use the Flux architecture for that. This site and video should get you on the right track: https://facebook.github.io/react/blog/2014/05/06/flux.html
Basically, you want all actions to enter the same "pipeline", no matter where they come from. Logic and some state is kept in "stores" (sort of a hybrid between a Model and a Controller) and finally components listen to changes in those stores and then re-render themselves.