I want to enable automatic brightness in my react native android app.
for example, user is able to enable automatic brightness when clicked to a button.
How can I do that?
You can do it with this package expo-brightness https://docs.expo.dev/versions/latest/sdk/brightness/#brightnesssetsystembrightnessmodeasyncbrightnessmode
import React, { useEffect } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import * as Brightness from 'expo-brightness';
export default function App() {
useEffect(() => {
(async () => {
const { status } = await Brightness.requestPermissionsAsync();
if (status === 'granted') {
// ANDROID ONLY
Brightness.setSystemBrightnessModeAsync(BrightnessMode.AUTOMATIC)
}
})();
}, []);
return (
<View style={styles.container}>
<Text>Brightness Module Example</Text>
</View>
);
}
If you use it outside expo project follow this instructions: https://github.com/expo/expo/tree/sdk-47/packages/expo-brightness
Related
I'm trying to create Augmented reality app with React Native I installed #viro-community/react-viro
and when Im trying to start the app it shows me this error
this is my code :
import React, {useState} from 'react';
import { StyleSheet, View } from 'react-native';
import { ViroARScene, ViroText, ViroConstants,ViroARSceneNavigator } from '#viro-community/react-viro';
const InititalScene = () => {
return (
<ViroARScene>
<ViroText text={"Hello team"} position={[0,0,-5]} />
</ViroARScene>
)
}
export default App = () => {
return(
<ViroARSceneNavigator
initialScene={{scene:InititalScene}}
styles={{flex:1}}
/>
)
}
var styles = StyleSheet.create({
})
It should shows me the camera with the title Hello team on the camera
I am trying to build a basic notification app that uses the react-native-background-task module. For some reasons it gives this error: Cannot read properties of undefined (reading 'schedule')
Below is the code:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import BackgroundTask from 'react-native-background-task';
// import { Notifications, Permissions, Constants } from 'expo';
import * as Notifications from 'expo-notifications';
import * as Permissions from 'expo-permissions';
import React, { useEffect } from 'react'
console.log("object")
BackgroundTask.define(async () => {
console.log("bgtask")
// if time is 12pm, fire off a request with axios to fetch the pills info
// Notification configuration object
const localNotification = {
title: text,
body: 'msg',
data: data,
ios: {
sound: true
}
}
// trigger notification, note that on ios if the app is open(in foreground) the notification will not show so you will need to find some ways to handling it which is discribed here https://docs.expo.io/versions/latest/guides/push-notifications
Notifications
.presentLocalNotificationAsync(localNotification)
.catch((err) => {
console.log(err)
})
BackgroundTask.finish()
})
export default function App() {
useEffect(() => {
console.log("uef")
const componentDidMount = async () => {
// allows the app to recieve notifications (permission stuff)
console.log("cdm")
registerForPushNotificationsAsync().then(() => {
console.log("bg sche")
BackgroundTask.schedule()
}).catch((e) => {
console.log("err")
console.log(e)
});
}
componentDidMount()
}, []);
const registerForPushNotificationsAsync = async () => {
console.log("reg")
const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
if (status !== 'granted') {
console.log("permission not granted")
return;
}
console.log("permission granted")
let deviceToken = await Notifications.getExpoPushTokenAsync()
}
return (
<View style={styles.container}>
<Text>Open up App.js \o start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
The problem comes when I do the BackgroundTask.schedule() function. It says in the error that BackgroundTask is undefined. I know for a fact that all the other functions worked fine because the console.logs all get printed right until "bg sche" and then it goes and print "err" in the catch block.
I also tried to use ctrl + click on the package name that should bring me to source where this BackgroundTask object is exported but it doesn't work like it usually does for other modules. So I think for some reasons the module can't be found but I have already installed it and it is in my package.json file and I see it in my node_modules folder.
I uploaded my app to Play Store without any problem. However, when I tried to install the App Store, the application was rejected and I received the following message.
Guideline 2.1 - Performance - App Completeness
We discovered one or more bugs in your app. Specifically, the app
displayed only a splash screen.
Review device details:
Device type: iPhone
OS version: iOS 15.1
I tried the application both on the simulator and on the real device with testflight. But I have never encountered such a problem. Does anyone know the reason or are having the same problem?
I've done almost the same application before. The only difference is that I add anonymousSignIn() in this app. Is this what broke the app or is there something else? Here my splash screen codes:
import React, { useEffect } from 'react'
import AsyncStorage from "#react-native-async-storage/async-storage"
import { View } from 'react-native'
import AppIcon from '../../assets/svgs/app-icon.svg'
import styles from './styles/SplashStyles'
import { RemoteConfig } from '../../api/RemoteConfig'
import { getData } from '../../api/RealtimeDb'
import { NotificationUtil } from "../../utils/NotificationUtil"
import { InitializeUtil } from "../../utils/InitializeUtil"
import { pushNotification } from '../../api/PushNotification';
import { anonymousSignIn } from '../../api/Auth'
const remoteConfig = new RemoteConfig()
const notificationUtil = new NotificationUtil()
const initializeUtil = new InitializeUtil()
const Splash = ({ navigation }) => {
// asking user for notification permission (iOS)
function permission() {
notificationUtil.pushNotificationAPNsPermissions()
}
useEffect(() => {
async function splash() {
// fetches the remote config data from firebase
remoteConfig.init()
pushNotification()
//message to be shown in the alert
const message = remoteConfig.getAlertMessage().text
// alert before notification permission
await notificationUtil.alertBeforeNotificationPermission(
message,
permission
)
await anonymousSignIn()
getData()
.then(async (response) => {
const lastViewedWord = await AsyncStorage.getItem("lastViewedWord")
const page = await initializeUtil.getPageNameToVisit()
navigation.reset({
index: 0,
routes: [{
name: page, params: {
lastViewedWord: lastViewedWord,
allData: response,
}
}]
})
})
}
splash()
}, [])
return (
<View style={styles.container} >
<AppIcon
height='100%'
width='50%'
/>
</View >
)
}
export default Splash
Is there a way to print something on my phone screen?
I tried to print the "location" on the screen when I got the location change.
In my example, I try to use the TaskManager of expo because I have to run some background service and I want to check if this method work or not while the app is killed.
This is my code :
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import * as TaskManager from 'expo-task-manager';
import * as Location from 'expo-location';
const LOCATION_TASK_NAME = 'background-location-task';
export default class Component extends React.Component {
onPress = async () => {
const { status } = await Location.requestPermissionsAsync();
if (status === 'granted') {
await Location.startLocationUpdatesAsync(LOCATION_TASK_NAME, {
accuracy: Location.Accuracy.Balanced,
});
}
};
render() {
return (
<TouchableOpacity
style={{alignItems: "center",paddingTop:100}}
onPress={this.onPress}>
<Text>Enable background location</Text>
</TouchableOpacity>
);
}
}
TaskManager.defineTask(LOCATION_TASK_NAME, ({ data, error }) => {
if (error) {
// Error occurred - check `error.message` for more details.
return;
}
if (data) {
const { locations } = data;
// do something with the locations captured in the background
// HERE I WANT TO PRINT THE "locations" INTO MY PHONE SCREEN
}
});
It says I can use Expo.Apploading but I have no idea about that. If someone could help it would be great. This happens in either of device I am running. Below is code for App.js
import React, {useState}from 'react';
import {Text, View } from 'react-native';
import *as Font from 'expo-font';
import {AppLoading} from 'expo';
import {enableScreens} from 'react-native-screens';
import EstesGuideNavigator from './navigation/EstesGuideNavigator';
enableScreens(); // useScreens has been changed to enableScreens - this helps screens load faster in background
const fetchFonts = () => { //fetching costum fonts for my app using Async
Font.loadAsync({
'raleway-blackItalic' : require('./assets/fonts/Raleway-BlackItalic.ttf'),
'raleway-bold' : require('./assets/fonts/Raleway-Bold.ttf'),
'raleway-regular' : require('./assets/fonts/Raleway-Regular.ttf'),
'raleway-thin' : require('./assets/fonts/Raleway-Thin.ttf')
});
};
export default function App() {
const [fontLoaded, setFontLoaded] = useState(false); //initially it's false because app hasn't been loaded
if (!fontLoaded) {
return(
<AppLoading
startAsync = {fetchFonts}
onFinish = {() => setFontLoaded(true) }
/> //if assets(fonts here) is not loaded we display loading screen and load assets for app
);
}
return <EstesGuideNavigator/>;
}
Is there any way to resolve this?
I don't know what's wrong but this is how i handle my font loading, Works perfectly
import { AppLoading } from "expo";
import { Asset } from "expo-asset";
import * as Font from "expo-font";
import React, { useState } from "react";
import { Platform, StatusBar, StyleSheet, View } from "react-native";
import { Ionicons } from "#expo/vector-icons";
import AppNavigator from "./navigation/AppNavigator";
export default function App(props) {
const [isLoadingComplete, setLoadingComplete] = useState(false);
if (!isLoadingComplete && !props.skipLoadingScreen) {
return (
<AppLoading
startAsync={loadResourcesAsync}
onError={handleLoadingError}
onFinish={() => handleFinishLoading(setLoadingComplete)}
/>
);
} else {
return (
<View style={styles.container}>
{Platform.OS === "ios" && <StatusBar barStyle="default" />}
<AppNavigator />
</View>
);
}
}
async function loadResourcesAsync() {
await Promise.all([
Asset.loadAsync([
require("./assets/images/tick.png"),
require("./assets/images/error.png")
]),
Font.loadAsync({
// This is the font that we are using for our tab bar
...Ionicons.font,
// We include SpaceMono because we use it in HomeScreen.js. Feel free to
// remove this if you are not using it in your app
"space-mono": require("./assets/fonts/SpaceMono-Regular.ttf"),
"Gilroy-Bold": require("./assets/fonts/Gilroy-Bold.otf"),
"Gilroy-Medium": require("./assets/fonts/Gilroy-Medium.otf"),
"Gilroy-Heavy": require("./assets/fonts/Gilroy-Heavy.otf")
})
]);
}
function handleLoadingError(error) {
// In this case, you might want to report the error to your error reporting
// service, for example Sentry
console.warn(error);
}
function handleFinishLoading(setLoadingComplete) {
setLoadingComplete(true);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
}
});