The situation:
I am building a tooltip that has to programmatically position itself based on an avatar component that lives in a different package.
The avatar lives in the header part of the screen and I can't colocate the tooltip to be next to it code-wise, because the tooltip needs to be dismissed once the user interacts/touches the screen.
The Problem:
is that I can't just use onLayout event on the avatar because it fades into the view and the layout event always results in { x: 0, y: 0 }, which is not accurate and doesn't reflect the actual position of the avatar.
Thanks in advance for any help or advice that you can offer!
What I tried:
Passing a callback for onLayout, but as I mentioned above it doesn't return the correct values.
Using the measure function, but it resulted in the same values as onLayout.
Using the PanResponder on that avatar and requested to respond to move events, but because the avatar doesn't move the onPanResponderMove doesn't get triggered.
Related
I have a ScrollView containing messages (most recent messages are further) in a chat application.
I limit the number of pre-loaded messages, and I dynamically load a new batch when the Scroll View is scrolled to the top. So when new messages are loaded, the current scrollPos is at 0.
The problem is that when the new messages arrive, the scrollPos stays at 0, so the user is teleported to the oldest newly loaded message.
I have tried to deal with it by manually scrolling back down to the position using the size of the content change, but this is not satisfying as the user sees a back and forth scrolling.
Can someone think of a way to do this so that the user does not see any change when the new messages appear an can simply gradually scroll up to see them.
I found a way to do it.
The idea comes from the Invertible Scroll View component: https://github.com/expo/react-native-invertible-scroll-view
I didn't use the component but implemented the idea directly on the Scroll View to have minimal changes in my code.
To explain, we translate vertically the Scroll View using the style of the Scroll View and transform: [{ scaleY: -1 }]. We do the same for the children. Then, we revert the order of the messages.
In that setup, the scrollPos() measures from the visual bottom. To trigger the loading of the new messagges, now I use
const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
const paddingToBottom = 20;
return layoutMeasurement.height + contentOffset.y >=
contentSize.height - paddingToBottom;
};
The trick is that now, when the new messages appear on top, you have nothing to do as the distance from the user's point of view to the bottom does not change.
You can use the onContentSizeChange prop to scroll to the bottom anytime it detects a change in content size.
The scrollToEnd function may differ depending on RN version.
<ScrollView
...
onContentSizeChange={() => this.scrollView.scrollToEnd({animated: true})}>
</ScrollView>
Ref: https://reactnative.dev/docs/scrollview#scrolltoend
I am using the Modal component from react-native to creat a slide up menu for users to select. The issue with this is, if you wish to dim the background and animate with 'slide', it does this ugly thing of sliding a dimmed box up the screen, instead of dimming the whole background THEN sliding the view in.
So I tried to solve for this by using two Modals. One modal for the dark background to fade in and second modal to slide in with the menu with a transparent background.
This actually works, but when this.doneDayPicker changes the state of this.state.showModalDayPicker so both modals are no longer visible, <DarkModal> still appears. I'm left with <DarkModal> permanently on the screen.
What can I change to let <DarkModal> dissapear when this.state.showModalDayPicker is changed?
return (
<DarkModal visible={this.state.showModalDayPicker}>
<GoalModalScreen
visible={this.state.showModalDayPicker}
done={this.doneDayPicker}
title='Health benefits'
height={this.state.goalModalHeight}
>
{this.flatList()}
</GoalModalScreen>
</DarkModal>
);
Initially I would say this is because there is no done property on DarkModal like goalModalScreen?
Or use a Ternary Operator
{this.state.showModalDayPicker ? <DarkModal> : undefined}
You might also setup DarkModal's own toggle in state.
{this.state.toggleDarkModal ? <DarkModal> : undefined}
When a user scrolls through a webpage, how can I trigger animate css?
Is it a matter of when v-show="element" appears, trigger x?
Using Vue 2 + animate css
I found answer from Ikbel useful
How to display and transition when scroll position reaches element position in the screen?
you can achive this with custom directive which adds binding inViewport for window scroll event to elements that you want to animate.
I added data-transition to html element that I want to animate
<div v-vpshow data-transition="flipInX"><div>
and changed binding like this
el.$onScroll = function() {
if (binding.def.inViewport(el)) {
el.classList.add('animated')
el.classList.add(el.getAttribute('data-transition'))
el.classList.remove('before-enter')
binding.def.unbind(el, binding)
}
}
I'm trying to set the initial scroll position of a ListView in react native.
Right now, I'm doing this:
componentDidMount() {
let i = this.props.images.indexOf(this.props.current);
if(i != -1) {
this.refs.listView.scrollTo({ x:i*this.props.width, y:0, animated:false });
}
}
where the images prop is the datasource for the ListView, the current prop is where I want to be initially scrolled to, and the width prop is the width of the component. (The component scrolls horizontally).
This works, but there's a delay between the initial render and the call to componentDidMount, giving me a flash of the end of end of the list before the list is scrolled.
Is there a way of setting an initial scroll position of the list? Or better way of doing this to get rid of that flash?
On iOS you can use the ScrollView#contentOffset to set the initial scroll position of a ListView, which inherits the properties of ScrollView.
If you are looking for an Android solution, the ListView.scrollTo method you are calling seems like the best bet for the general case.
That said, if I interpret your code sample correctly, you are using the ListView for a paginated, horizontal list, perhaps with the help of the pagingEnabled property? If this is the case, on Android you might look at using ViewPagerAndroid instead, and setting the initialPage property.
Im new to titanium and i'm trying to create an a indeterminate preloader (or activity indicator as it is called in titanum). The problem is that on android, the activty indicator is automatically placed in a dialog box, preventing users from interacting with the app until the dialog is dismissed.
Is there any way to just add a simple indetermindate preloader without using a dialog box in android?
Thanks.
According to Appcelerator Docs
Activity indicators must be used differently on Android and iOS:
On Android, the activity indicator is a modal dialog that blocks the UI. Calling show displays the indicator, and calling hide removes it.
One option that you can use is setting cancelable property to true which let the user to cancel the activity indicator dialog by pressing the BACK button.
Appcelerator docs says :
An activity indicator can be used to show the progress of an operation
in the UI to let the user know that some action is taking place. An
activity indicator consists of a spinning animation and an optional
text message, and is used to indicate an ongoing activity of
indeterminate length. To show progress, use Titanium.UI.ProgressBar
instead.
Titanium.App.addEventListener('show_indicator', function(e) {
showIndicator(e.title_msg, e.sub_msg);
});
function showIndicator(title_msg, sub_msg) {
var actIndG = Titanium.UI.createActivityIndicator({
style : Titanium.UI.iPhone.ActivityIndicatorStyle.BIG,
top :10
left : 130,
height : 60,
width : 60,
height : screenheigth,
width : screenwidth
});
indView.add(actIndG);
indWin.open();
}
Up vote or Mark best if it helps you.