I'm beginner in React Native and I want to ask one question. Every time I press reload in Expo and reload my project my MapView set the image with search and TextInput on top start. But it always random (I place pictures for that). I don't have idea what can I do to solve this. I googled, I try to change code to absolute, I try change flex but it don't work. Please can you help me with this?
It would be nice if you made your code available so we could understand how you set things up.
But from what you said, if by what I understood the problem is the positioning, you could try to use the absolute positioning. Here is the react documentation.
https://facebook.github.io/react-native/docs/layout-props#position
You can set absolute positioning at the top.
For example:
const styles = StyleSheet.create({
view: {
position: 'absolute',
top: 40,
}
})
In the link below, you have an example of use.
https://unbug.gitbooks.io/react-native-training/content/32_absolute_&_relative.html
I hope this helps you.
Hugs.
Related
What I have
I'm trying to create a header animation with Native Stack Navigator. The animation consists of changing the background color from transparent to light gray when the user scrolls down.
The problem
Although the animation works as expected on iOS, on Android the headerTransparent property is causing some issues as the animation is not displayed when the user scrolls down in Android.
Demo
I create a reproducible Snack to easily check the issue. if you run the application on Android and remove the headeTransparent property you will see that the animation now works.
The issue you're experiencing may be related to the way the animation is being set up. One potential problem is that you are setting the background color of the header using the 'interpolateColor' function, which may not work correctly on Android. Another issue may be that you are using the useAnimatedStyle hook to create the style for the header background, which may not work as expected on Android.
One solution that you may try is to use the useNativeDriver option when creating the animation.
const animateHeaderStyle = useAnimatedStyle(() => ({
backgroundColor: interpolateColor(
translationY.value,
[0, 200],
['transparent', 'lightgray'],
'RGB',
),
height: headerHeight,
}), [translationY], {useNativeDriver: true});
For a Project I'm workin on, I need to create a component in which users can add entries to an array which lives in state, and a SectionList to display those entries. Also, I need the SectionList to scroll down to the latest entry right after it is entered. Please check out this snack for an example
The list itself displays all entries and updates after a new entry was added, but once the list contains more than the screen can display, it can only scroll down to the second last, and I really need to scroll to the last.
I tried numerous things, containing awaiting setState, defining contentContainerStyle, converting the whole thing to a VirtualizedList and ScrollView, everything I can think of, but I simply can't get it to scroll to the last entry.
Question: How can I get my SectionList to scroll to the last item, which is currently out of bounds of the SectionList component?
UPDATE
I know that this issue is caused by the SectionList not containing the item yet when scrollToLocation is called. The key to the solution seems to be to await the re-render of the list
UPDATE 2
SetState has a callback that does not solve this issue either. However, the solution in this comment works. The problem with it is that it only works in .js files, and I am working with .tsx files all over my project. How could I overcome this?
Apparently this is a bug in React-Native 0.59.6.
On android, when working in the completion block of setState, one needs to set a timeout of 0.2 seconds and after that, SectionList will scroll all the way down. However, the item that is supposed to be there isn't rendered yet and sometimes appears 0.5 seconds later, resulting in a really clunky feel.
I have posted an issue Here, and hope it will be fixed soon
I think the issue is much simpler than that and related to your style.
You ask the list to have height: Dimensions.get('window').height - 50 but this line does nothing since you cannot fix the height of the SectionList.
So you can remove it and add a margin instead:
list: {
top: 50,
marginBottom: 50,
},
I am trying to set half of the button over(above) the bottom edge of the card and half below the card. Can somebody help me?
It would help if you could share some more information, maybe some code you've tried, however use position: "absolute" in the style of the button.
I am using bootstrap Clock Picker plugin.
When I use picker in modal, it is not auto adjusting when it is in bottom of the modal. so that I am not able to view the picker completely. When it is in the bottom of the page, it should come on top of the text field automatically.
Please help.
I am not able to fix.
Please suggest.
Thanks in Advance.
use this code to fix your issue.
sometimes when you are multiple layers of Div or any Tags. then this type of issue comes or some CSS code of an Element always force to come in top or Front. then that case this example will very helpful. In some solutions to this problem, I saw some developers used different codes like they are finding DIV Class name and setting Z-index. that also works.
.popover {
z-index: 215000000 !important;
}
When you use clock picker in modal then you will be not able to view it because of the z-index of the modal, you have to give z-index to clockpicker also as below, please add this below style in your css.
.clockpicker-popover {
z-index: 999999;
}
I'm interested in using a slide-out vertical navigation in an app using react-native. Is there a trick to this, or is it just a matter of creating a View and adding CSS that makes it respond to a button-tap or a swipe motion?
I've gone through the UIExplorer example in the Github repo, and did not see this style of navigation within it. I am new to react (and react-native, of course). I'm not having trouble with the tutorials I've gone through, just curious if there's a "React Way" to do this, or if I ought to just hack along until I get something working. Thanks.
I work on the <Navigator> component for React Native, and I think it might fit your needs.
Check out the documentation here: http://facebook.github.io/react-native/docs/navigator.html
And the example code in UIExplorer: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/Navigator/NavigatorExample.js
The navigator is still a work in progress, so feedback is welcome! (you can file an issue on Github and tag me, #ericvicenti)