I have a question that I have not been able to solve for some time and I have not been able to do it yet. Do you know how to make a text to speech work in background React Native Android app?
If you want sounds to work on iOS in background mode you need to do 2 things:
enable audio capabilities in xcode
configure AVAudioSession. There is already a package for it here: https://github.com/BonnierNews/react-native-audio-session
I did this at the root of the project, using react-native-sound, but should be the same with react-native-audio-session:
import Sound from 'react-native-sound';
Sound.setCategory('Playback'); // this will play sound in background
Somewhere in your background runner:
Tts.speak('Some text);
We can use ACCESSIBILITY.Accessibility, means making your apps usable to both normal users and users with disabilities. Any person can have one or more form of disability.
Step1:-
Turn on TalkBack in your device Settings
Open your device's Settings app Settings app.>>Open Accessibility>> then TalkBack.>>Turn on TalkBack.
then add following props to every component of ReactNative.
accessible={true}
accessibilityLabel={label}
Like this:-
return (
<TouchableOpacity
accessible={true}
accessibilityLabel={label}
accessibilityTraits={"button"}
accessibilityComponentType={"button"}
onPress={() => {
onPress(data.name);
}}
>
<Icon
name={icon}
style={styles.icon}
size={icon_size}
color={icon_color}
/>
</TouchableOpacity>
)
Related
import InAppReview from 'react-native-in-app-review';
<TouchableOpacity onPress={()=>{InAppReview.RequestInAppReview()}}>
<Text style={{fontSize:22}}>Check app rating</Text>
</TouchableOpacity>
I am using this simple code to get pop up of in app rating. As i am also uploaded app in internal testing. But not able to see that popup i am not able to get what i am doing wrong. As i have not gave any rating on the play store also with this account. So let me know how to debug it or east to test it. I also have to add this popup on some events. so please let me know how can i get it working. Thanks
I am creating a fitness application in react-native 0.66.1. To manage my pages, I use react-navigation 6.
My cover page, HomeScreen, allows to load user data before actually entering the application :
import { useFocusEffect } from '#react-navigation/native'
const HomeScreen = ({ navigation }) => {
useFocusEffect(
useCallback(() => {
// load user data and app configuration in context
navigation.navigate('AppScreen')
}, [])
)
return (
<View>
<ActivityIndicator />
<Image ... logo />
</View>
)
}
On one of my pages (StartGymScreen), I have a countdown using the react-native library react-native-countdown-circle-timer.
Everything works fine but sometimes when I put the app in the background and come back to it, it fully recharges via HomeScreen. My countdown is therefore lost (I have to come back to StartGymScreen and restart it).
I think (but I'm not sure) that this is a normal situation and that "Android" sometimes turns off apps to conserve battery power.
But I have a few questions :
I did not find anything on the react-native documentation, what explains this ?
Is it possible to prevent this? Sometimes the application restarts after 1 minute of background. Sometimes 2, sometimes 3 ... it's very random.
I sometimes use another fitness app (Hercules) which also has a countdown timer but not this problem, how does it do ?
As you said, this is normal behavior and not related to your application. The android os will handle these jobs for your applications.
There are some settings in the phone to limit your application from running in the background. But it's not the ideal way to manage this issue.
All your needs are to keep running your application in the background.
So, there are some solutions like using headless Js. read more on RN documentation. You can create an unstoppable service for your application. You can use this article to do it.
Also, there is a solution with using react-native-background-actions package.
i am building a mobile app and i need to show the user the trading view chart so that they can use.
i have searched and i haven't seen any react-native package for implementing the chart.
i am building a mobile app and i need to show the user the trading view chart so that they can use.
i have searched and i haven't seen any react-native package for implementing the chart.
i am building a mobile app and i need to show the user the trading view chart so that they can use.
i have searched and i haven't seen any react-native package for implementing the chart.
There is no official way to do this right now. As a turnaround, I used react-native-webview library for this purpose. My code implementation is as follows:
<WebView
forceDarkOn
style={{
backgroundColor: THEME.COLORS.primaryBackground,
}}
source={{
uri: `https://www.tradingview.com/chart?symbol=usd`,
}}
useWebKit={true}
originWhitelist={['https://www.tradingview.com']}
allowsInlineMediaPlayback={true}
incognito
/>
Please note that I have used incognito and originWhitelist params. Incognito for disabling cache as trading view will display a non dismiss ad after some time and originWhitelist for disabling popup ads that open new windows.
Is ReactNative's accessibilityLabel and iOS Label retrieved using iOS Accessibility Inspector one & the same?
Same goes for Android Text retrieved using UIAutomatorViewer
We are planning to rely heavily on accessibilityLabel in ReactNative for Appium /webdriverIO driven automated tests. Will it be sustainable?
Or shall we use in combination traditional iOS predicate / iOS classchain / Android XPath etc locators?
According to RN docs http://facebook.github.io/react-native/docs/accessibility,
you need to provide accessible={true} prop to the element that you want to use accssibilty, then you can add accessibilityLabel to that element. for Ex :-
<TouchableOpacity
accessible={true}
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen"
onPress={this._onPress}
>
<View style={styles.button}>
<Text style={styles.buttonText}>Back</Text>
</View>
</TouchableOpacity>
you can more details about this in RN docs http://facebook.github.io/react-native/docs/accessibility.
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