React Native Refresh Control Custom Animation - react-native

**Please check the video to understand.**https://youtube.com/shorts/JKQxK9tTDvM
RED: HEADER, BLUE DOT: A View or Icon, GREY: Item inside FlatList,
Refresh Control Height: Space between header and first item.
I want when pull-to-refresh FlatList the Blue dot move(Animated translateX) right depending on how much pull with min translateX=0 and max translateX = WINDOWS_WIDTH-BLUE_DOT_WIDTH (Middle of Header).
min translateX=0 is the X position before pull.
When start pull Blue dot move right.
When Refresh Control Height=0 --> BLUE dot position translateX=0,
When Refresh Control Height=MAX --> BLUE dot position translateX=MIDDLE and start refreshing.
When translateX=MIDDLE the means that Refresh Control get the height to start refresh and the blue dote start Loading
After Loading...the blue dot stop refresh and move left depending of Refresh Control Height.
When Refresh Control Height=MAX --> BLUE dot position translateX=MIDDLE,
When Refresh Control Height=0 --> BLUE dot position translateX=0,
DRAFT CODE:
https://snack.expo.dev/#stefanosalexandrou/authentic-watermelon

Related

Animate NSTextField Alignment

I'm trying to emulate the functionality of the Safari url text field (using NSTextField). I'd like the current text to be displayed centered, but when the user clicks on it the text should highlight and slide to the left. I've got the highlighting working but I'm not sure how to go about animating the text over to the left. Is it possible to animate the Alignment property or would I need to do some sort of custom drawing where I animate the position that the text is drawn?
Unfortunately this (Is there a way to animate changing a UILabel's textAlignment?) won't work, since a text field draws a background and border so animating the frame isn't an option.

Autolayout form login in Xcode 8

I have a problem in managing the autolayout of a form of login with these elements
Form login
The elements are an ImageView on the top, two textFields and two buttons in the middle and another button on the bottom.
Does anyone have any advice?
Connect username field to be centered horizontal in container and vertical space between UIImage and leading ,trailing constraints to the view(left and right ,give value to look similar like in photo if you dont have strict size) after just connect all other fields with username field to be equal width and height ,centered horizontal and vertical space between them.Try to make vertical space like in image ,play litle bit try diferent values that match like in form on photo.
"Continue without registration" set center horizontaly and vertical space to bottom layout (vertical space = 16 ,for example)

UIButtons Alignment

I am trying to implement like word cloud in my app.
The image shown is like word cloud with left alignment.
What I did was, for placing the buttons I am checking whether the width of the text is greater than total width of the screen, if it is greater place the button in next row i.e increment the y position, if it is not just place the buttons. Everything is working fine. But what I want now is , i want to move the buttons alignment, like, I want to start the first button from center of the screen. Please help me to do this...

How to align the bottom of a UIView with the bottom of the screen always

I want a background image to always be aligned with the bottom of the screen regardless of screen size, iOS Version, or Personal Hotspot messages etc. But none of the interface builder alignment options seem to work in every case.
I have 2 different sized images to fit 3.5' and 4' retina which change via code but their alignment is always thrown off by 'Personal Hotspot' and other messages changing the size of the parent view.
My images are the size of the screen and should fill the whole screen always. There is a black area where tab bar and status bar will overlay.
There are buttons aligned with the background and everything gets thrown out by messages that resize the parent view.
I want the bottom of the UIImageView to be aligned with the bottom of the screen always.
have you tried the contentMode property?
theImageView.contentMode = UIViewContentModeBottom;
There is also a menu item for this in interface builder if you prefer to set it there.
then if you are using auto layout, simply add a bottom space constraint from your image view to the bottom layout guide.
If you're not using auto layout, a fixed bottom margin on the autoresizing mask should do the trick.

fixed div box at bottom left corner

I want my green div box in fixed position at the bottom left corner of the page. But it is overlapping on the left navigation. I want green div box start its fixed position after the left navigation items end. Following is the code I have uploaded.
http://jsfiddle.net/awaises/remqf/
It is working fine in big screen resolution but in small resolution, green box is overlapping on the left navigation. Is there any possibility to restrict the green box after navigation end with 50 pixel gap and when we scroll down the page it is also fixed at bottom left corner in every resolution?
Could you give the impression of a gap above the green box by adding a top 50px border? http://jsfiddle.net/Y3qWu/