Is it possible to create a vertical ViewPagerAndroid on React Native, or is there a workaround for Android that ends up with a similar UI maybe using ScrollView?
This currently isn't offered out of the box since ViewPagerAndroid implements only horizontal scrolling, and scroll snapping is implemented only on iOS. These are two approaches I would suggest exploring:
Give the illusion of a vertical pager by using the transform style property to rotate the ViewPagerAndroid by 90 degrees, and then transform each child 90 degrees in the other direction so their net rotation is zero. This is the approach we used in InvertibleScrollView and it works well for some use cases. You might find the same technique useful with ViewPagerAndroid.
Implement scroll snapping on Android. On iOS, React Native already offers an API for specifying how a ScrollView should snap at intermediate points, such as at the boundary of each page in a pager. On Android you could subclass ReactScrollView and implement the same behavior natively. This would require more work than rotating the pager, but is a more robust solution.
Related
First and most important: I am by no means a developer. We hired an agency to develop an APP for us, and i was given by a developed solution that i am not convinced if it is the best solution, So i would like to ask you guysfor advice.
Unfortunatelly i cannot put pictures nor links to code for the app, but i will do my best to explain myself:
The problems i encountered are mainly two:
All items appear to have fixed sizes applyed to them: When testing the app on different devices, the size of the elements is not responsive at all. In fact on small devices (Moto G5) There are elements that fall behind the bottom navigation bar making them unaccessible.
Lot of stuff fall below that said bottom navigation bar.
My question is the following:
Is react native responsive?
In web development there is a lot of flexibility when it comes to responsiveness with CSS and JS. Is React native any different? or there is a way to prepare the layout so it fits most of the common sizes without losing acces to interactions?
Hope i explained myself correctly. and again, sorry for not asking a technical specific question.
React Native is designed to be responsive, but it requires a different approach compared to web development. In web development, you can use CSS and JavaScript to make your website responsive, but in React Native, you use a different set of tools.
We have many ways to make the app responsive with the device's large screen and small screen.
Use the Dimensions API: React Native provides the Dimensions API, which allows you to get the dimensions of the screen at runtime. You can use this information to adjust the layout of your app based on the size of the screen.
Use third-party libraries ex: react-native-size-matters, react-native-responsive-screen, ...
Use Flexbox: React Native uses Flexbox for layout, just like web development. Flexbox is a powerful tool for creating responsive layouts that adapt to different screen sizes. You can use the flex property to adjust the size and position of elements on the screen.
In terms of your specific issue with elements falling behind the bottom navigation bar, it's likely that the layout is not taking the height of the navigation bar into account. You can use the Dimensions API to get the height of the navigation bar and adjust the layout accordingly.
I am very new to programming and I am currently using react native to make android applications. Now I am just testing out my code in my own physical smartphone. I want to know if it is more apt to use '%' unit in dimensions to properly scale apps in different phone sizes.
It depends upon your UI like how your UI is look like, But general approach is use react native default view property like flex, flexbox which have different property as per your UI so it will scale your UI in any point upto 99% of devices. Some of devices may very depend on resolution and screen height so for that you can use % in width and height but remember only specific condition not every where .
General View style you can refer this
https://reactnative.dev/docs/layout-props
https://reactnative.dev/docs/image-style-props
https://reactnative.dev/docs/shadow-props
https://reactnative.dev/docs/text-style-props
https://reactnative.dev/docs/view-style-props
For simple login screen UI you can refer this example so you can get idea how react native UI we can create generalize
https://code.tutsplus.com/tutorials/common-react-native-app-layouts-login-page--cms-27639
I'm looking for a solution, if possible a library or a custom component, for React Native, without Expo.
I need to create a video frame that is movable in the screen, up and down, and cover the content. I also need to make it possible to click on the content behind it.
Another difficulty is that I need it to stay up on all screens during navigation.
I first tried to use reanimated-bottom-sheet with some increments, but the content behind the bottom is not clickable. Also, to make it available on all screens I needed to put in at the same level as React Navigation's BottomTabNavigator and it covers the tab bar too even with a zIndex.
I also tried to use modals, but I'm relatively new to React Native and couldn't find how to make the background touchable as well as making it movable.
I guess I need to make a view with absolute positionning and learn Reanimated, unless you have a simpler idea?
Thanks
If i make my application screen on nexus4 emulator screen and wanted to see it on small screen phones, would it be necessary to use scrollview instead of View in react-native.
In some cases yes, because scaling everything according to the screen size will make the app elements look extremely tiny on some devices and text will be hard to read. I had a similar issue where I scaled every screen according to the device resolution and customers complained about not being able to read on small devices.
What I did was wrap such screens in a ScrollView, then put a View inside it with a minHeight: screenHeight then put elements with flexbox and fixed size inside it. This way it would fit most screens perfectly and on smaller ones it would still look good enough. You should experiment a little to see what works best for your app.
In Objective-C, we can use MKPolygon to add a polygon to the mapview. How can I add polygons to map view using React Native? Is it possible? I think technically it is possible. I probably need to go the source code of react native.
It might be, but the MapView that comes with React Native is lacking for Android, and it seems crippled for iOS. I only saw the overlay property, which should work for polygons, and it even has a fillColor property, which would imply that you could. However, It's not clear from the docs what to do to tell the overlay that you want a polygon instead of a polyline.
I'd suggest this much more capable replacement MapView for React Native: https://github.com/lelandrichardson/react-native-maps
I'm halfway expecting the React Native maintainers to take notice of it, and integrate it if they find out about it.