I tried the tutorial on https://shoutem.github.io/docs/extensions/my-first-extension/using-ui-toolkit
Previewed on Shoutem emulator but details.js is not showing the image. Any solution?
details
The <Overlay> tag is taking Builder defined values, in this case Tag overlay color. Setting it to a lower opacity (30%) and possibly to black, will resolve this. The image itself does load, it's just that the default overlay value is concealing it.
Related
My goal is to view the content of the bottom page from the top of the other content page. In order to accomplish this, I used PushModalAsync to navigate and set the BackgroundColor property of the navigation page to Transparent. I can view the content on the bottom page on Android. However on the iOS platform, a black color is always displayed and I am unable to read the content of the bottom page. Why is the background color always black even when it is set to be transparent in PushModalAsync?
Note: The iOS platform displays a white screen when I change the navigation to PushAsync.
Expected Behavior:
Background color should not be black and it should be transparent when navigating using PushModalAsync
Actual Behavior:
Background color is always black even when the content page background color is set as transparent when navigating using PushModalAsync
Android Screenshot
iOS Screenshot
The issue reproducing sample is provided below:
DemoSample
If you want to do EXACTLY like that, it is not possible (it will require so much work that you can't expect someone to provide you the solution here).
On iOS that control (ViewController) is drawn that way in that presentation mode. So as long as you use that control and that mode it will work that way irrelevant if you use Xamarin or something else. As ViewControllers are most basic controls it is not realistic to replace them with something else. But you can replace presentation mode. In Xamarin.Forms you can do that this way:
<ContentPage ...
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.ModalPresentationStyle="FormSheet">
...
</ContentPage>
This will result in somewhat different visual presentation but that is the only way to have one ViewController drawn over another without going into some deep customization that would require tons of code, especially on Xamarin.Forms.
You can also try some other values, but the default value will not work.
In iOS, the hierarchy is managed by the view controller. Each page has a separate view controller. A page consists of a window, a root view, and a subview. You cannot see the layout of the previous page by setting the background color to be transparent.
For more details, you can refer to the following documents:
User interface | Microsoft
The View Controller Hierarchy | Apple
For some reason when the orientation changes, I get a white box, which I am assuming is the place of the Drawer pre orientation change. Picture: Simulator Example
If I fully remove and re-render the Home component the white box will go away, but I would like to try and avoid that. I have tried passing height/width props when the dimensions change, but that didn't seem to fix the problem. Would be nice to get some help on this since I am stuck.
The implemented badge is not shown clearly in the interface.why the badge is not clearly visible.
tried zPsoition methods also.
The below image is shown to describe the issue.
It's a mask/clip to bound issue.check your auto layout constraints of that view.
I need to show an image (eg:blur image) with loading indicator shows
the image is loading in UI. For eg) In facebook app feed posts are shows as loading before it fetch from server. I need the same.
Any suggestion or any package in react-native?
We have opacity prop and blurRadius prop for image in react native.
so what you can do is....
you can use async function to check if image is completely downloaded ...if yes then setState({downloaded:true}) and then if downloaded is true , based on your choice you can change the opacity to 100% for addon..you can even use activityindicator on top of that.
i hope it solves your problem...
you can also refer to this link : https://medium.com/the-react-native-log/progressive-image-loading-in-react-native-ecc88e724343
In my react-native android app, This is the same text box in portrait & Landscape views.
I have used selectionColor & underlineColorAndroid properties to set the font color.
<TextInput selectionColor={FormElements.textInputSelectionColor} underlineColorAndroid={FormElements.textInputSelectionColor} placeholder={"Email Address"} placeholderTextColor={FormElements.textInputPlaceholderColor} keyboardType="email-address" value={this.props.email}/>
But the issue is in the full screen edit (on landscape mode) it's hard to read in white background.
So I want either to change make full screen edit background color or text color back to black on full screen.
I tried, but couldn't find a solution yet.
Cam someone please give me a solution for this?
This full screen popup doesn't come up only landscape mode. it comes up when ever there is not enough space to occupy the keyboard.
I was encountering this issue too. After a few hours of exploring I found this property of React Native TextInput "disableFullscreenUI"
In my case I only want the normal input editing and don't show the Fullscreen editor.
<TextInput disableFullscreenUI={true} />
and the fullscreen mode will go away upon edit then the editing will remain inside the TextInput.
Hope this helps
There are libs such as react-native-orientation https://github.com/yamill/react-native-orientation/ which allow you to check if the user changed the screen orientation. It would be possible to apply different styles based on the orientation.
However, for the scenario you mentioned, I don't think it would be user friendly to change colors depending on the orientation. I'd recommend you to use a standard color combination that looks fine in all resolution and orientations.
Hope it helps.
This was an issue with RN. I have updated my app to RN V50.0 (earlier it was V47.0). Now the above issue is not there anymore. TextBox shows black color fonts when it's popped up.