I have found following lib for use reCaptcha in RN app
https://www.npmjs.com/package/react-native-recaptcha
my code is
import ReCaptcha from 'react-native-recaptcha';
...
<View style={{ flex: 1}}>
<ReCaptcha
sitekey={'test'}
/>
</View>
but no recaptcha is displayed.
Also I have tried sitekey used in one of my websites where reCaptcha worked properly - still nothing.
Do I miss something?
p.s. github of this lib not exists (
I think there is no lib exist for reCaptcha in react native. So you need to use wrapped webview for it, I know it is slow and may include your requirment, but I think it is only solution.
Please see React Native with reCATPCHA and https://github.com/evenchange4/react-grecaptcha
I recently wrote a component that does something similar to what Priya suggested. It caters specifically to react-native and uses google recaptcha v3. Feel free to check it out and make a PR if you would like to customize it or feel that something could be done better :)
https://www.npmjs.com/package/react-native-recaptcha-v3
react-native-recaptcha-that-works worked for me - has also the invisible option for better UX.
Related
The company I work for has many small angular applications they would like to make available in an phone app. Mostly because the users are usually in poor connection places so it would be nice if they only need to make the API calls and not load resources, and they also want to be able to make push notifications for new events.
So looking into this I'm trying to see if its possible to embed Angular (v13 as of now) applications inside of React Native. Where the react app will mostly act as a menu and notifications handler.
To be honest I haven't found much help online besides that I probably need to use a <WebView>. So i tried compiling a simple Angular app and placed it in /assets/my-app/
and then tried the following (with a few variations on how I wrote the URL).
<WebView source={{uri: '~/assets/my-app/index.html'}} style={{marginTop: 20}} />
But that did not work at all.
So, my questions are:
Can this be done?
Is this the right method?
How do I accomplish this?
Thank you
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!
Does Expo have a way to view a PDF and jump to a specific page in said PDF. I've looked into https://www.npmjs.com/package/react-native-pdf but i found it to be incompatible with expo given its use of native React-Native libraries. I've also tried https://github.com/xcarpentier/rn-pdf-reader-js, but there appears to be a couple of issues with it and it doesn't look like the creator updates it anymore.
rn-pdf-reader-js seems to be not working for the expo 38+. You can try this fork instead:
https://github.com/stratoss/rn-pdf-reader-js
Just import it as import PDFReader from '#bildau/rn-pdf-reader' and you are good to go.
"rn-pdf-reader-js": "^4.1.1"
"expo": "^40.0.0"
The library work just fine for me in their latest version the only issue comes around that the base64 contain octet-stream so i replace it with pdf like that:
setBase64(reader.result.replace("octet-stream", "pdf"))
and pass it to the source like that:
<PdfReader
source={{
base64: base64,
}}
/>
I hope this helps you. otherwise, please provide us more details about so we can help.
I an writing a react-native app, And I noticed that while the buttons look like native buttons when clicked - they do not behave as one (At lease not like android button behave).
Clicking on android app button - make a sound and give the user an haptic Feedback.
On the sound I saw that there is github discussions and open issue, but I could not found anywhere anything about the haptic Feedback.
How can I make my view (any touchable view..) to make haptic feedback on click?
This is really important feeling in an app.
I want something like this (In android)
View view = findViewById(...)
view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY);
This doesn't require from the app to have permission for Vibrate.
And managing haptic feedback on my own with the Vibrate api will cause users that disable this option globally to experience bad behavior
Thanks
If you are using Expo with react-native, I recommend you to use Expo haptics
After installing the library You can use it like:
<TouchableOpacity onPress = { ()=> {
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
or
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
or
Haptics.selectionAsync()
} } > </TouchableOpacity>
I found this component on github https://github.com/charlesvinette/react-native-haptic
I didn't try it yet, but it should help you to get the haptic feedback you want.
I also have nearly the same requirements and I ended up using this library react-native-haptic-feedback.
Keep in mind that haptic feedback is available only on some latest android devices and in iOS above iPhone 6s. Here is a simple code snippet:
import ReactNativeHapticFeedback from "react-native-haptic-feedback";
const options = {
enableVibrateFallback: true,
ignoreAndroidSystemSettings: false
};
ReactNativeHapticFeedback.trigger("impactMedium", options);
In your case, it will work directly with the button's onPress method such as:
<TouchableOpacity onPress={()=>{ReactNativeHapticFeedback.trigger("impactMedium", options);}} />
Note: I found that the most versatile type which is supported by maximum devices is impactMedium.
You can use the built-in Vibration module facebook.github.io/react-native/docs/touchablewithoutfeedback
import { Vibration } from 'react-native';
...
<TouchableWithoutFeedback
onPressIn={() => Vibration.vibrate()}
/>
Remember to include this in your AndroidManifest
<uses-permission android:name="android.permission.VIBRATE" />
I published a project on Github which provides this functionality.
Check this repo out: react-native-haptic-view
I need to create an app using react native in both android and iOS and i'm still a newbie. So,now i need to implement a drawer like shown in the image above.I've already searched for an example or project that meets with my needs but too badly, i couldn't find anything suitable for me.So can you help me and thank you
http://2.bp.blogspot.com/-1_Fi6T2l1LY/VUfHyQlwenI/AAAAAAAAC8g/wkWN42gNaDw/s320/device-2015-05-04-101820_1.gif
You could use this library:
https://github.com/react-native-material-design/react-native-material-design
I think it can solve your problem
This RN starter has an example as well:
https://github.com/infinitered/ignite
You should not implement it from scratch yourself but instead you can use a starter project like this. If you want these animations on the drawer icon you can also check the Airbnb's Lottie.
How to implement the hamburger menu with react-native-paper:
https://callstack.github.io/react-native-paper/integrate-app-bar-with-react-navigation.html
https://medium.com/#mdeepikayadav029/side-menu-bar-after-login-screen-in-react-native-4cabee7ca2b0
At the time, this one worked for me (0.63.4). The others I found were from previous versions (0.45) and required a lot of adjustments regarding newer version implementations. No other extra files are needed except these ones after creating a unmanaged blank project:
App.js
LoginScreen.js
HeaderComponent.js
FirstScreen.js
SecondScreen.js