Develop Reference

How to turn on automatic brightness in React Native Android?

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

Error in my react app file - module not found can't resolve

Error:
Compiled with problems:X
ERROR in ./src/App.js 8:0-63
Module not found: Error: Can't resolve '.src/components/NewsCards/NewsCards.js' in '/Users/admin/Desktop/ALAN_AI_NEWS APP/myaiproject/src'
ERROR
src/App.js
Line 7:45: 'useState' is not defined no-undef
Search for the keywords to learn more about each error.
Code:
import React, { useEffect } from 'react';
import alanBtn from '#alan-ai/alan-sdk-web';
import NewsCards from '.src/components/NewsCards/NewsCards.js';
const alanKey = '0f881486602df260f78c6dd18ef0cc6e2e956eca572e1d8b807a3e2338fdd0dc/stage';
const App = () => {
const [newsArticles, setNewsArticles] = useState ([]);
useEffect(() => {
alanBtn({
key: alanKey,
onCommand: ({ command, articles}) => {
if(command === 'newHeadlines') {
setNewsArticles(articles);
// Call the client code that will react to the received command
}
}
})
}, [])
return (
<div>
<h1>Alan AI News Application</h1>
<NewsCards articles={newsArticles} />
</div>
);
}
export default App;
Attached code above, pelase help solve this error

Please import useState hook as well
import React, { useEffect, useState } from 'react';
import alanBtn from '#alan-ai/alan-sdk-web';
const alanKey = '0f881486602df260f78c6dd18ef0cc6e2e956eca572e1d8b807a3e2338fdd0dc/stage';
function NewsCards(props) {
return (
<div>
// your component content
</div>
)
}
export const App = (props) => {
const [newsArticles, setNewsArticles] = useState([]);
useEffect(() => {
alanBtn({
key: alanKey,
onCommand: ({ command, articles}) => {
if(command === 'newHeadlines') {
setNewsArticles(articles);
// Call the client code that will react to the received command
}
}
})
}, [])
return (
<div className='App'>
<h1>Hello React.</h1>
<NewsCards articles={newsArticles} />
</div>
);
}

React Native cannot find module

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.

How to save data to firebase using react native?

I'm using https://github.com/expo-community/expo-firebase-starter as a starter template to build a react native app using firebase.
I am working with the following file in Home.js and want to save data to firebase but am getting an error. The error.
firebase.database is not a function. (In 'firebase.database(reflection)', 'firebase.database' is undefined)
Here is the code I'm using. When someone writes a reflection, I'm trying to save that reflection text along with the user ID.
import React, {useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { Container, Content, Header, Form, Input, Item, Label } from 'native-base';
import { Button } from "react-native-elements";
import { withFirebaseHOC } from "../config/Firebase";
import * as firebase from 'firebase';
import "firebase/database";
function Home({ navigation, firebase }) {
const [reflection, setReflection] = useState('');
const[member, setMember] = useState('');
useEffect(() => {
try {
firebase.checkUserAuth(user => {
if (user) {
// if the user has previously logged in
setMember(user);
console.log(member);
} else {
// if the user has previously logged out from the app
navigation.navigate("Auth");
}
});
} catch (error) {
console.log(error);
}
}, []);
async function postReflection() {
try {
await console.log(reflection);
await console.log(member.email);
firebase.database(reflection).ref('Posts/').set({
reflection,
}).then((data)=>{
//success callback
console.log('data ' , data)
}).catch((error)=>{
//error callback
console.log('error ' , error)
})
} catch (error) {
console.log(error);
}
}
async function handleSignout() {
try {
await firebase.signOut();
navigation.navigate("Auth");
} catch (error) {
console.log(error);
}
}
return (
<Container style={styles.container}>
<Form>
<Item floatingLabel>
<Label>Reflection</Label>
<Input
autoCapitalize='none'
autoCorrect={false}
onChangeText={text => setReflection(text)}
/>
</Item>
<Button style = {{ marginTop: 10, marginHorizontal:30 }}
title="Share"
rounded
onPress= {postReflection}
>
</Button>
</Form>
<Button
title="Signout"
onPress={handleSignout}
titleStyle={{
color: "#F57C00"
}}
type="clear"
/>
</Container>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
// justifyContent: "center"
}
});
export default withFirebaseHOC(Home);

Your /config/Firebase/firebase.js doesn't have a database property. Have a look at how the Firebase object is being exported.
// inside /config/Firebase/firebase.js
import "firebase/database"; // add this
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const Firebase = {
// add this
database: () => {
return firebase.database()
}
};
export default Firebase;
Have a read of this step. You can't just import the part of the firebase library, you need to actually assign it to a variable and export it to use it.
https://firebase.google.com/docs/web/setup#namespace

Add the following after import * as firebase from 'firebase';
import "firebase/database";
Each Firebase product has separate APIs that must be added, as described in the documentation.

react-native: axios get 500 internal server error

The code should return list of album objects in the console, but is not returning it and instead getting a 500 internal server error.
Error : enter image description here
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import axios from 'axios';
class AlbumList extends Component {
componentWillMount() {
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(function(response){
console.log(response);
})
}
render(){
return(
<View>
<Text> Albums ! </Text>
</View>
);
}
}
export default AlbumList;

can u try this,
axios({
method: 'get',
url: 'https://rallycoding.herokuapp.com/api/music_albums',
}).then(response => {
console.log(response.data);
})
.catch((error) => {
console.log(error);
});

If API return 500 it means error on server side. Not on React-native or front-end Side

I was watching the exact same course and had this problem. As you can see if you read through the questions there, it appears that React Native has some compatibility issues with axios.
My problem was fixed by doing this:
componentWillMount() {
fetch("https://rallycoding.herokuapp.com/api/music_albums")
.then(response => response.json())
.then(data => console.log(data));
}