I have used react-native-i18n package for supporting international language. It is working but now I want my application can change RTL and LTR inside application according to language without changing device language. I used native base components in my application.
So I cannot change their styling and If it is possible then How?
I have created settings option to change language and it is changing but how to change LTR to RTL and RTL to LTR all the components of application.
If there is any solution please let me know.
from the react-native docs:
direction specifies the directional flow of the user interface. The
default is inherit, except for root node which will have value
based on the current locale.
this means if you change the top View style direction to "rtl" all child components should inherit the direction.
Related
I am looking for ways to integrate the custom less file with React Native project so that I can use all the pre-build custom classes from any specific design system.
I came across few projects but didn't want to use them due to the maintainability and reliability issues.
Kindly share with me any guidelines or documentation which have the required explanation.
There aren't any. The problem is that there isn't always a react native style equivalent to css properties and additionally there can be major differences in how they applied. For instance,
default flex direction is column, not row
there is no grid layout
text styles are not inherited from parents
there is no display none
lineHeight behaves differently
just from the top of my head. Even if you find a library that can convert your classes to native, you will have to rewrite a lot of the styling.
I familiarized with Android development and started to read some information about React Native. And one of the problem which I faced with is that I can't see the screen layout.
In Android Studio, for example, I could see the design of my XML layout without running app. Maybe there are such instruments in React Native, but I didn't see them in WebStorm nor VSCode. Maybe I am wrong and they exist, so, can you help me to find them in such situation?
Some modules format the xml document in vscode,
but others have previewable tools.
XML TOOLS
Extension Settings
xmlTools.enableXmlTreeView: Enables the XML Tree View for XML
documents.
xmlTools.enableXmlTreeViewMetadata: Enables attribute and child
element counts in the XML Document view.
xmlTools.enableXmlTreeViewCursorSync: Enables auto-reveal of
elements in the XML Document view when a start tag is clicked in the
editor.
xmlTools.enforcePrettySelfClosingTagOnFormat: Ensures a space is
added before the forward slash at the end of a self-closing tag.
...
I also had the same problem where there is no layout view in VSCode like in Android Studio. My suggestion is to mock out your View containers with coloured boxes. This is an example of designing a screen's header, so I'm making sure the spacing and sizing is all good:
Working on a react-native app, I'm using react-native-document-scanner because I need to detect documents. However I need to switch between the front and the back camera. Is there a way to simply implement that or is there a package allowing it ? (react-native-camera does not suits my needs)
The creator of this package nicely implemented this feature especially for the need of this project. Many thanks to him !
Now the boolean props "useFrontCam" is available.
I've been evaluating React Native as a replacement for Cordova, and was wondering if there is a widely accepted solution for styled text inputs. I'd like to see text inputs rendered in Material Design on Android, and Apple style on iOS.
Do you have recommendations for a specific library, or will I have to write my own/combine multiple libraries? Thank you!
You could check out https://nativebase.io/ it supports platform specific default styling there are others as well like https://react-native-training.github.io/react-native-elements/ and http://www.xinthink.com/react-native-material-kit/ which has consistent styling regardless of platform.
Coming from a Cordova/Sencha Touch background I suggest you try to create your own style using only the default react native components, the reason is that before I was having the same question regarding component library that I could use so that I could target all platform at once, but react native isn't 100% cross platform and learning to style on different platform might give you an idea and feedback with your evaluation, unless your aiming to have a project as soon as possible and that is a different story.
Is it possible to create an Right to Left (RTL) tile for Windows 8 apps?
The tiles switch to RTL direction when one changes the windows settings but I need to force it even on non-RTL machines.
For tile or toast notifications, setting the lang attribute to an RTL language (e.g., "ar-SA") on either the <binding /> or <visual/> element in the notification XML will perform layout appropriate for the specified language.
See this MSDN article. http://msdn.microsoft.com/en-us/library/windows/apps/jj712702.aspx
You should be able to use UnicodeDirectionMarkers.LeftToRightDirectionMarker to mark the text and reverse it.