Update: looks like this is implemented now with IntentAndroid! https://facebook.github.io/react-native/docs/intentandroid.html#content
-- original post --
I am writing an Android app with React Native. I would like to display a hyperlink that will launch the user's default browser and open the linked URL. How can I do this?
There is LinkingIOS for iOS apps, is there some equivalent for Android?
Or am I going to have to create a component that wraps something like this (Java):
Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("http://www.google.com"));
startActivity(browserIntent);
OK it looks like what I wanted isn't a react component just yet, but I found this awesome component that is exactly what I want: https://github.com/ivanph/react-native-webintent/
Related
I like React Native's some features like Flatlist, Modal, Animation. I wanted to develop for web with React Native or Expo. I use react navigation but have 404 errors in refresh pages. I also want When user put www.mywebsite.com/post/postid, it will go directly into postid's page. I tried react-router-dom with HashBrowser. Not great! I kind of want something better than hash browser. What can I use? Any advice please.
I use also react-native-web and react-navigation. If you want the react-navigation to work with the links correct, you must set up the config object like the documentantion
If you don't set up correctly the config object, react-navigation doesn't throw errors in your console, but it doesn't work right!
The question was before 3 months, but I hope this answer helps someone, with the same problem!
I'm creating a vue native app but the input text looks like an input text on HTML. I thought vue-native would create a native input with native styles per device.
Do I forget something?
I found https://nativebase.io/ which seems to be the solution I need. Since I'm new on this native apps, is this library the way to implement native styles per device?
While react-native renders native views, it doesn't take native (platform and os-version-specific) styles to apply to them. These would look different on each platform and version of the device, and also be impossible to style from react-native. There are some components that look like native ones (e.g. Button, Switch) but they are also styled from react-native so that you can override any styles you want
So yes, the only way to make react-native views look like native ones is to style them accordingly, and that's what libraries like nativebase do
I'm trying to understand how I can do a signature capture in React Native. My App is created with create-react-native-app and Expo and I'd prefer to not have to eject the app to get this functionality to work.
Would it be possible to wrap something like this in a webview? https://github.com/szimek/signature_pad
I've also looked at this project, https://github.com/RepairShopr/react-native-signature-capture but it requires me to eject the app and use react-native link.
Looking for any advice or suggestions on how to implement this feature while keeping my project as straightforward as possible (ideally, using create-react-native-app, but if this isn't possible could someone please explain to me why?)
The way React Native works is that each component available in React Native maps to a native component in the underlying platform.
ie. a <Image /> is an ImageView in Android and a UIImageView.h in iOS.
The Javascript code itself runs in a Javascript thread on each platform and as you use Components in React Native, there's a translation layer that passes information from JS into the React Native bridge that then results in corresponding native components being created.
By default, React Native has included the following components: https://facebook.github.io/react-native/docs/components-and-apis.html#basic-components which means that only those components come out-of-the-box in React Native. If you want other components, then you have 2 options, either create a "composite" component in which your JS component is written into other JS components or, if your feature needs a native component not yet exposed by React Native, write your own "native" component to expose certain native functionality to your React Native code.
The way Expo works is that they have wrapped React Native and a handful of 3rd party components and built it within their application. The reason why you can't use a 3rd party native component they don't support is because when that component is used, the app itself doesn't have translation code to go from JS to a native Android/iOS view.
So, to do what you're asking, you'd need to find either a "native" drawing component that Expo has included in their platform/app. OR you need to find a "composite" drawing component that is built with other default React Native components (or other components Expo supports).
ie. On Android, I might build this with a Canvas view, but from what I can tell React Native doesn't support that object natively, so I would probably write this myself, etc.
It's hard for Expo to support every 3rd party "native" component out there because React Native is open source and it iterates so fast that most community-built components aren't always up to date or they might conflict with one another.
I am using react-native-signature-capture.
Working properly on both Android and iOS.
I know it's been a while, but there is an interesting article here: https://blog.expo.io/drawing-signatures-with-expo-25d1629ca1ac
Wait, but how?
Using “expo-pixi”, you can add a component that lets you choose your brush’s color, thickness, and opacity. Then when your user lifts her finger, you get a callback. From there you can take a screenshot of the transparent view or get the raw point data if that’s what you’re looking for.
Problem
I'm integrating React Native into an existing Android app (ie. making a hybrid app). I've created an Activity to host a React Native view. This works fine.
Now, I need to pass structured data from native into React Native. Represented as JSON, it looks something like this:
{
"landscape": ["http://example.com/1.jpg", "http://example.com/2.jpg"],
"portrait": ["http://example.com/3.jpg", "http://example.com/4.jpg"]
}
Given the context I describe how can I make this data available as props inside of the React Native app?
I see that this is an initialProperties argument available, but it seems to accept a Bundle, which as far as I can tell (Android newbie here) only accepts scalar values.
One option I am considering
Create JSON object in Java
Convert to a string
Add to Bundle and pass into initialProperties
Ingest as JSON and deserialize in React Native app
... but this seems hackish and requires me to add special code for Android that was not required for iOS.
Alternatives?
Is there a straightforward approach that I am missing?
Have you tried passing an array of strings into the Bundle?
bundle.putStringArray("landscape",yourArrayOfStrings]);
We used to have a Cordova app that, when running on Appium, we could switch to Webview and execute JS commands using execute_script.
I would like to do the same thing on React Native to run some JS code (e.g., exposing a function on global or running something like console.disableYellowBox = true;). However, appium does not shows a Webview context to switch to and it seems to me the execute_script on native app context doesn't work.
Is there a way of doing a similar thing on RN client?
For ReactNative application there is no Webview context as RN is interpreted as NATIVE_APP one.
For finding elements its more interesting: there is no way to set resource-id for Android.
However you can set accessibilityLabel for your Views in React Native app and search for it like:
driver.findElementByAccessibilityId(accessibilityLabel)
Should work for both iOS/Android. Basically you should right your tests like you test Native app, not a Hybrid one.
And of course, you can use Xpath to search by text, but that I strongly do not recommend to do.