Develop Reference

React Native Android Clipping Children

I am creating a react native app using expo, and I am creating a dropdown in the header. On iOS the dropdown works as desired, and goes 'above' the main content, while on Android it is clipped or goes 'under'. I am not sure if in reality iOS is acting strange, or Android is.
The header is a custom headerTitle component, which holds the custom dropdown component (a view, which holds the dropdown items (Views with text and icons)
I am looking to get around this issue, and I have tried zIndex and absolute positioning (which I have read does not even work on android, but thought I would try), and that did not fix it (and caused other issues).
Any tips, tricks, and better understanding of why this happens on iOS and Android would be greatly appreciated. I can post code if necessary as well.

React Native does not support overflow: 'visible' on Android.
A good example to look at for this is here: https://github.com/brentvatne/growler-prowler/blob/0eebfaae641a088b1a1fd7ffe552deeac914bffe/screens/BreweryListScreen.js#L70-L76
The key here is to render the menu component inside of a modal (in this case I'm using react-native-root-modal) in order to have it appear on top of the header.

Can you disable fullscreen editing in landscape in React Native Android?

In an EditText Android element you can prevent the "fullscreen editing mode" from activating in landscape with android:imeOptions="flagNoExtractUi" (as detailed here).
Is there any way to replicate the same behavior with a React Native TextInput component? I've searched through the docs and StackOverflow and have not found a solution.

Starting from v0.40.0 React Native's TextInput has the prop disableFullscreenUI, which sets imeOptions="flagNoExtractUi" internally.
<TextInput disableFullscreenUI={true} />

One solution would be to write a custom native component and bind it to your React Native project. You would basically create a custom EditText that either has imeOptions set by default to android:imeOptions="flagNoExtractUi" or for a more dynamic behavior you can create a setter in your custom EditText and expose it using #ReactProp. This way you would be able to set it through the component's props from your React Native project.
Writing a custom UI component (especially a simple one like this) is pretty straight forward and much easier than it may sound. There's a decent documentation and plenty of tutorials out there.
Hope this helps.

How to touch and hold to select text in React Native

I'm new to Android and trying to implement a rich editor using Text component of React Native.
However when I touch the text and hold for a moment, the text was not highlighted and the top bar with selection actions was not shown like what behaves in a webview or other applications.
What am I missing or do I need to implement this feature by myself? If so could you point a direction?

As of now it is supported by react-native as well by adding props selectable={true}. Also on Android you can change the selected text color with selectionColor='orange'.
Example:
<Text selectable={true} selectionColor='orange'>You can select me</Text>

If you want click-and-hold-to-select-text using a Text component, this feature does not currently exist in React Native for iOS. You probably want to upvote https://react-native.canny.io/feature-requests/p/support-selecting-text-within-text-elements-for-copypaste-etc to suggest Facebook add support for this.
However, I've submitted support for on Android, as of React 0.30. But React iOS is drawing characters directly to the screen (and not using the native UITextView that supports a selectable property), so it is not supported there, and likely won't be for a long time.
RN 0.39 adds support to copy the entire text field, but does not yet include support for selecting a subset of the text field for copying.

Be careful if the text is nested you should add selectable attribute to the top `
<Text selectable>
<Text>
some selectable text
</Text>
</Text>

use onPress={this.onPressTitle()} inside Text
and Declare
onPressTitle:function(){
/* Your Actions on OnPress */
}

Alloy Framework - When to use Window, Controller and View

I have simple android app mockup with home screen.
Homescreen contains 3 options: start game, settings and leaderboards.
I am not sure, what alloy components should I use for screens like settings etc.
Should I use different controllers for home, menu, settings etc? Or should they be just different Views in the same window? I can't find information about good practice for titanium app design.

you can take a look this framework: ChariTi-CB
Actually, I will prefer use one window and include all screens, and use the view for each screen, in this way, if you want to control the window style (like the orientationModes), you just can easy to control it in the app. The above framework is use this design pattern.

Well we tend to use a separate controller for each separate piece of functionality. If each controller would be displayed in a separate window then in this case I'd have 6 files:
/controllers/startgame.js
/views/startgame.xml
/styles/startgame.tss
/controllers/settings.js
/views/settings.xml
/style/settings.tss
/controllers/leaderboards.js
/views/leaderboards.xml
/style/leaderboards.tss
just use "alloy generate controller" on the CLI to generate them quickly.

AIR for Android: toggle SYSTEM_UI_FLAG_HIDE_NAVIGATION

I want to toggle SYSTEM_UI_FLAG_HIDE_NAVIGATION or SYSTEM_UI_FLAG_LOW_PROFILE flag when compiling with AIR for ANDROID, but I don't know how to to this. Probably I had to modify the name_of_app.xml ...
I want to 'try' to switch off the menu bar in an Android Tablet, but every methods I try are a mess ....
Any Help ??
Massimo

If you want to remove the statusbar (the bar at the top), you need to go fullscreen. You can do this either in your app.xml by setting <fullscreen>true</fullscreen> or in your app at runtime by setting stage.displayState = StageDisplayState.FULL_SCREEN;
If you are trying to hide the menubar (the soft-navigation present at the bottom of Nexus devices and a limited number of other Android devices), this will set those buttons to be in their minified state as well (they are not hidden, but are set to a simple glowing circle rather than the icon). I do not know if it is possible through AIR to hide the menubar completely. It should be possible using an AIR Native Extension, assuming it is possible at all, but that may (likely is) more trouble than it is worth for such a simple task.
For future reference, you can't set most Android flags through AIR. It simply is not supported. You can set uses-permission and uses-feature in your app.xml as Manifest additions, but that is it.