Develop Reference

Is there a way to connect to localhost from Android?

I am creating an application in React Native with Expo and I am using USB debugging mode to see the view of this application.
The problem is that I am consuming an API, which is found locally on my computer.
When I run the program with Expo from USB debugging mode I can't connect to localhost, but when I run the application with Expo web mode I can connect and consume the API.
Obviously I tried localhost and 127.0.0.1 but neither one worked for me.
For what it's worth:
This would be my code:
import { StatusBar } from 'expo-status-bar';
import React, { Component, useState, useEffect } from 'react';
import { StyleSheet, Text, View, FlatList, ActivityIndicator, Image } from 'react-native';
const API_ENDPOINT = "https://127.0.0.1:5001/api/Medicines/";
export default function App () {
const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
setIsLoading(true);
fetch(API_ENDPOINT)
.then(response => response.json())
.then(results => {
setData(results);
setIsLoading(false);
})
.catch(err => {
setIsLoading(false);
setError(err);
});
}, []);
if (isLoading) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" color="#5500dc" />
</View>
);
}
if (error) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 18}}>
Error fetching data... Check your network connection!
</Text>
</View>
);
}
return (
<View style={styles.container}>
<Text>Successful connection</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I run the program in the cmd with the command expo start --localhost --android to start the USB debugging mode and see the application from the Expo mobile application, and this is what appears to me:
And this is the same application but from the Expo web option:

Full answer is here.
in short:
adb devices //gives your device(s) name
adb -s <device name> reverse tcp:5001 tcp:5001

I am facing a very mysterious problem while sending data to the Firebase database

I'm making a simple chat application with React native and Firebase. But I could not manage to send the data I wanted to add to the database with the sendMessage function. I am getting an error like this and could not find the solution. Can you help me? I couldn't find where addDoc () belongs and also I don't know what SyntheticObject means. I am having such a problem, although I do not exactly comply with what was said in the tutorial video I followed the project.
Error image:
https://i.resmim.net/i/WhatsApp-Image-2021-05-25-at-21.34.11.jpeg
Error: Function addDoc() invalid data.
import React, {useLayoutEffect, useState} from 'react'
import { TouchableOpacity } from 'react-native';
import { StyleSheet, Text, View } from 'react-native'
import {Avatar} from "react-native-elements";
import {AntDesign, FontAwesome, Ionicons} from "#expo/vector-icons";
import { SafeAreaView } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { KeyboardAvoidingView, TextInput } from 'react-native';
import { Platform } from 'react-native';
import { ScrollView } from 'react-native';
import { Keyboard } from 'react-native';
import { TouchableWithoutFeedback } from 'react-native';
import { db, auth } from '../firebase';
import * as firebase from "firebase";
const ChatScreen = ({ navigation, route }) => {
const [input, setInput] = useState("");
useLayoutEffect(() => {
navigation.setOptions({
title: "Chat",
headerBackTitleVisible: false,
headerTitleAlign: "left",
headerTitle: () => (
<View
style={{
flexDirection: "row",
alignItems: "center",
}}>
<Avatar rounded source={{uri: "https://cencup.com/wp-content/uploads/2019/07/avatar-placeholder.png",}} />
<Text
style={{color: "white", marginLeft: 10, fontWeight: "700"}}
>{route.params.chatName}</Text>
</View>
),
headerLeft: () => (
<TouchableOpacity
style={{marginLeft: 10}}
onPress={navigation.goBack}
>
<AntDesign name="arrowleft" size={24} color="white" />
</TouchableOpacity>
),
headerRight: () => (
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
width: 80,
marginRight: 20,
}}>
<TouchableOpacity>
<FontAwesome name="video-camera" size={24} color="white" />
</TouchableOpacity>
<TouchableOpacity>
<Ionicons name="call" size={24} color="white" />
</TouchableOpacity>
</View>
)
});
}, [navigation]);
const sendMessage = () => {
Keyboard.dismiss();
db.collection('chats').doc(route.params.id).collection('messages').add({
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
message: input,
displayName: auth.currentUser.displayName,
email: auth.currentUser.email,
photoURL: auth.currentUser.photoURL
})
setInput('')
};
return (
<SafeAreaView style={{ flex: 1, backgroundColor: "white"}}>
<StatusBar style="light" />
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.container}
keyboardVerticalOffset={90}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<>
<ScrollView>
</ScrollView>
<View style={styles.footer}>
<TextInput
placeholder="Signal Message"
value={input}
onChange={text => setInput(text)}
onSubmitEditing={sendMessage}
style={styles.textInput}/>
<TouchableOpacity onPress={sendMessage} activeOpacity={0.5}>
<Ionicons name="send" size={24} color="#2B68E6" />
</TouchableOpacity>
</View>
</>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
</SafeAreaView>
)
}
export default ChatScreen
const styles = StyleSheet.create({
container: {
flex:1,
},
footer: {
flexDirection: "row",
alignItems: "center",
width: "100%",
padding: 15,
},
textInput:{
bottom: 0,
height: 40,
flex: 1,
marginRight: 15,
backgroundColor: "#ECECEC",
padding: 10,
color: "grey",
borderRadius: 30,
},
})
Error image:
https://i.resmim.net/i/WhatsApp-Image-2021-05-25-at-21.34.11.jpeg

onChange={text => setInput(text)}
While you've called the parameter "text", it's actually an event object, specifically a "SyntheticEvent" (these are event objects used by react). So later when you try to send that to the database, firebase says, basically, "uh, i can't serialize this".
Instead, you may want to use the onChangeText event:
onChangeText={text => setInput(text)}

Your onChange function should be like this
onChange={e => setInput(e.nativeEvent.text)}
You're sending the event object not the text
You could also use onChangeText prop instead
onChangeText={text => setInput(text)}

How to connect to a device BLE?

I'm trying to do a connection to a device with BLE.
I need to connect to a specific device automatically.
I don't understand how I can do to connect directly to a device. Let me explain better, at the moment I can scan and I get all the bluetooth devices. Instead, I would like to directly connect to a specific device.
- I should therefore select only one type of device
- Connect me directly
What do you think I can do?
With this code i choose the name
return (
<View style={{borderBottomColor: 'lightgrey', borderBottomWidth: 1, alignItems: 'stretch'}}>
<View style={{flexDirection: 'row', alignItems: 'center', padding: 15}}>
<View style={{flex: 1}}>
<Text style={{fontSize: 20, color: '#888'}}>{`${peripheral.name}`}</Text>
</View>
<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
<Btn onPress={() => onConnect(peripheral)}>
{`Connect`}
</Btn>
</View>
</View>
</View>
)
With this code I do the scan
return (
<View style={{flex: 1 , paddingTop: Theme.navbarHeight }}>
<StatusBar
/* backgroundColor={Theme.color}*/
/* barStyle="light-content" */
/>
{
Object.keys(peripherals).length === 0 ? (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
{ uiState === UiState.scanning && <ActivityIndicator size='large' color={Theme.color}/> }
<Text style={{marginBottom: 10, fontSize: 18, color: '#999'}}>
Nessun Risultato
</Text>
{ uiState === UiState.idle && <Btn onPress={this._doScan}>Scansione</Btn> }
</View>
) : (
<ScrollView style={{ flex: 1 }} contentContainerStyle={{ alignItems: 'stretch' }}>
{
Object.keys(peripherals).map(key => peripherals[key]).map(
peripheral => (
<Peripheral
key={peripheral.id}
peripheral={peripheral}
onConnect={onConnect}
/>
)
)
}
</ScrollView>
)
}
</View>
)
}
_renderScanButton = () => {
let {uiState} = this.state;
if (uiState === UiState.scanning) {
return <ActivityIndicator color='white'/>
}
return (
<TouchableOpacity onPress={this._doScan}>
<Text style={{color: 'white', width: 100, textAlign: 'right'}}>Scansione</Text>
</TouchableOpacity>
)
}
_doScan = () => {
if (this.state.uiState !== UiState.idle) {
return;
}
this.setState({ uiState: UiState.scanning, peripherals: {} });
BleManager.scan([], 5, true)
.then(results => {
console.log('Scansione in corso...');
})
.catch(() => {
this.setState({ uiState: UiState.idle })
})
}
}

You are using react-native-ble-manager. According to their docs, you can connect to a peripheral using the connect method:
BleManager.connect('XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX')
.then(() => {
// Success code
console.log('Connected');
})
.catch((error) => {
// Failure code
console.log(error);
});
You should get the peripheral UID from the scan method results:
BleManager.scan([], 5, true)
.then(results => {
// Success code
console.log(results);
});
I personally do not use the react-native-ble-manager package but the react-native-ble-plx package, but the process is pretty similar. Here's how I do it:
manager.startDeviceScan(null, null, async (error, device) => {
console.log("scanning bluetooth...")
if (device.name === "MY_DEVICE_NAME") {
manager
.connectToDevice(device.id, {
autoconnect: true,
timeout: BLUETOOTH_TIMEOUT
})
// ............
}
})

Unfocus a TextInput in React Native

I'm building an Android app with React Native.
How can you force a TextInput to "unFocus", meaning the cursor is blinking inside the text field. There are functions for isFocused() and onFocus(), but how do I actually get the text field to give up focus. You would think it does so automatically once I hit enter, but that's not the case.
import React, {Component} from 'react';
import { AppRegistry, Text, View, StyleSheet, TextInput, TouchableOpacity}
from 'react-native';
var SHA256 = require("crypto-js/sha256");
export default class LoginForm extends Component{
constructor(props){
super(props);
this.state = {
email: '',
password:''
};
}
tryLogin = () => {
if(this.state.email=="email123" && this.state.password == "password"){
console.log("password verified");
this.props.navigator.replace({
title: 'Dashboard'
});
}
console.log(this.state.email);
console.log(this.state.password);
console.log("Hash" + SHA256(this.state.password));
}
render(){
return(
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Email address"
placeholderTextColor="white"
onChangeText={(email) => this.setState({email})}>
</TextInput>
<TextInput style={styles.input}
placeholder="Password"
placeholderTextColor="white"
secureTextEntry
onChangeText={(password) => this.setState({password})}>
</TextInput>
<TouchableOpacity style={styles.loginButtonContainer} onPress={this.tryLogin}>
<Text style={styles.loginButtonText}>LOGIN</Text>
</TouchableOpacity>
</View>
);
}
}
AppRegistry.registerComponent('LoginForm', () => LoginForm);
const styles = StyleSheet.create({
container: {
padding: 20
},
input:{
height: 40,
backgroundColor: '#e74c3c',
marginBottom: 20,
color: 'white',
paddingHorizontal: 15,
opacity: .9
},
loginButtonContainer:{
justifyContent: 'center',
backgroundColor: '#bc4c3c',
paddingVertical:15
},
loginButtonText:{
textAlign:'center',
color:'white',
fontWeight: '700',
fontSize: 24
}
})
This probably won't matter as much for real users but I'm just emulating and its pesky if I want to reload.

A better way is to use ScrollView and Keyboard.dismiss. By using ScrollView when the user taps outside of textInput, keyboard dismissed. It's done because ScrollView default property for keyboardShouldPersistTaps is never. It's the behavior the user expects. For dismiss the keyboard, or it's equivalent blur the textInput, when the user tap on the login button add Keyboard.dismissed() to the tryLogin function.
import React, {Component} from 'react';
import { AppRegistry, Text, View, StyleSheet, TextInput, TouchableOpacity, ScrollView, Keyboard}
from 'react-native';
var SHA256 = require("crypto-js/sha256");
export default class LoginForm extends Component{
constructor(props){
super(props);
this.state = {
email: '',
password:''
};
}
tryLogin = () => {
Keyboard.dismiss();
if(this.state.email=="email123" && this.state.password == "password"){
console.log("password verified");
this.props.navigator.replace({
title: 'Dashboard'
});
}
console.log(this.state.email);
console.log(this.state.password);
console.log("Hash" + SHA256(this.state.password));
}
render(){
return(
<ScrollView style={styles.container}>
<TextInput
style={styles.input}
placeholder="Email address"
placeholderTextColor="white"
onChangeText={(email) => this.setState({email})}>
</TextInput>
<TextInput style={styles.input}
placeholder="Password"
placeholderTextColor="white"
secureTextEntry
onChangeText={(password) => this.setState({password})}>
</TextInput>
<TouchableOpacity style={styles.loginButtonContainer} onPress={this.tryLogin}>
<Text style={styles.loginButtonText}>LOGIN</Text>
</TouchableOpacity>
</ScrollView>
);
}
}
AppRegistry.registerComponent('LoginForm', () => LoginForm);
const styles = StyleSheet.create({
container: {
padding: 20
},
input:{
height: 40,
backgroundColor: '#e74c3c',
marginBottom: 20,
color: 'white',
paddingHorizontal: 15,
opacity: .9
},
loginButtonContainer:{
justifyContent: 'center',
backgroundColor: '#bc4c3c',
paddingVertical:15
},
loginButtonText:{
textAlign:'center',
color:'white',
fontWeight: '700',
fontSize: 24
}
})

You can use Keyboard API.
import { Keyboard, TextInput } from 'react-native';
<TextInput
onSubmitEditing={Keyboard.dismiss}
/>
Please see the full example in react native offical document.

I managed to solve this with this.ref reference.
First, you assign to the TextInput a ref, like this:
<input ref="myInput" />
Then, you call the blur() method to this.refs.myInput from a function
blurTextInput(){
this.refs.myInput.blur()
}

My use case was a little different. The user wouldn't enter a value directly in the input field. The field was mainly used to capture the user's attempt at entering a value and open a modal instead. I wanted to blur the field after the modal closed to reduce the extra tap the user would have to do later.
If using Hooks, you can do something as simple as
const inputRef = useRef(null);
<Input
ref={inputRef}
{...props}
/>
Then just call this anywhere you need it.
inputRef.current.blur();

Found it actually.It doesn't look as pretty and my intuition says this isn't a very "react" solution but if you want it here it is.
<TextInput
style={styles.input}
ref="email_input"
onSubmitEditing={() => this.refs['email_input'].blur()}
placeholder="Email address"
placeholderTextColor="white"
onChangeText={(email) => this.setState({email})}/>

Noah's answer above works well, but using string refs is now discouraged in React, and is likely going to be deprecated soon. Instead, you should use a callback function that gets called when the component you want to reference renders.
<TextInput
ref={(c: any) => {
this.textInputRef = c;
}}
onSubmitEditing={() => this.textInputRef.blur()}
/>
If you're using Flow, you can then specify the type of your ref by placing something like this outside of your render function:
textInputRef: ?TextInput;

If you want to lose focus after submiting, use blurOnSubmit property.
<TextInput
blurOnSubmit={true}
//other props
/>

It does what it needs
function TextInputCustom({ placeholder, style }) {
React.useEffect(() => {
const keyboardHide = Keyboard.addListener('keyboardDidHide', () => {
Keyboard.dismiss();
});
return () => {
keyboardHide.remove()
}
}, []);
return (
<TextInput
style={style}
placeholder={placeholder}
/>
)
}
export default TextInputCustom;

I used the below code and it worked perfect for me:
i wrap all the view inside TouchableWithoutFeedback and
onPress={() => {Keyboard.dismiss();}}
import {View,TouchableWithoutFeedback,Keyboard,} from 'react-native';
......
<SafeAreaView>
<ScrollView nestedScrollEnabled={true}>
<TouchableWithoutFeedback
onPress={() => {Keyboard.dismiss();}}>
<View style={styles.container}>
{/* ..... */}
</View>
</TouchableWithoutFeedback>
</ScrollView>
</SafeAreaView>

Open another screen in react-native

I have this screen in react native
import React, { Component } from 'react';
import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
class LoginView extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
HYGEX
</Text>
<View>
<TextInput
placeholder="Username"
style={styles.formInput}
/>
<TextInput
placeholder="Password"
secureTextEntry={true}
style={styles.formInput1}
/>
<TouchableHighlight style={styles.button}
onPress={() => this.move()}>
<Text style={styles.buttonText}>Login</Text>
</TouchableHighlight>
</View>
</View>
);
}
move() {
//what i can do here to go to Socrce screen ???
}
}
Something like login screen, now when I click into TouchableHighlight
I need to open this screen
'use strict';
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class HygexListView extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
module.exports = HygexListView;
I tried to implement move method but I failed! Any idea why?
Does react-native have a method to change the screen when click into TouchableHighlight?

As others pointed out, you have to use an instance of Navigator to transition between screens. Maybe you can have a look at the example apps in the React Native repo. I also find this router package quite easy to set up, and it also includes an example app that you can use as a starting point.
Edit
As a simple example using react-native-router-flux, you can edit the Example.js file in the Example directory to look like this:
import React, {
Component,
} from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import LoginView from './LoginView';
import HygexListView from './HygexListView';
import {
Scene,
Router,
Actions,
} from 'react-native-router-flux';
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: 'transparent', justifyContent: 'center',
alignItems: 'center',
},
tabBarStyle: {
backgroundColor: '#eee',
},
tabBarSelectedItemStyle: {
backgroundColor: '#ddd',
},
});
// define this based on the styles/dimensions you use
const getSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => {
const style = {
flex: 1,
backgroundColor: '#fff',
shadowColor: null,
shadowOffset: null,
shadowOpacity: null,
shadowRadius: null,
};
if (computedProps.isActive) {
style.marginTop = computedProps.hideNavBar ? 0 : 64;
style.marginBottom = computedProps.hideTabBar ? 0 : 50;
}
return style;
};
class Example extends Component {
render() {
return (
<Router getSceneStyle={getSceneStyle}>
<Scene key="login" component={LoginView} initial={true}/>
<Scene key="hygex" component={HygexListView } />
</Router>
);
}
}
export default Example;
Then, in your component's move function, you have to do the following:
move(){
Actions.hygex(); // This will perform a slide transition, but you can customize it. Have a look at the docs for that.
I have not tested the code, so there might be some typos/missing imports/code, but it should give you an idea of what you have to do.
}

You have to implement a Navigator, which is roughly a component that manages all stuff related to screens, and header bar with back button and etc.
As you are a beginner, I suggest you to look at the docs on this link:
https://facebook.github.io/react-native/docs/navigator.html
Sorry for the short answer, I'm on my phone.
Good luck!

"use strict";
var React = require("react-native");
var {
Component,
StyleSheet,
Text,
TextInput,
TouchableHighlight,
View,
} = React;
var SecureView = require("./SecureView");
class LoginView extends Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: ""
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
Sign In
</Text>
<View>
<TextInput
placeholder="Username"
onChange={(event) => this.setState({username: event.nativeEvent.text})}
style={styles.formInput}
value={this.state.username} />
<TextInput
placeholder="Password"
secureTextEntry={true}
onChange={(event) => this.setState({password: event.nativeEvent.text})}
style={styles.formInput}
value={this.state.password} />
<TouchableHighlight onPress={(this.onSubmitPressed.bind(this))} style={styles.button}>
<Text style={styles.buttonText}>Submit</Text>
</TouchableHighlight>
</View>
</View>
);
}
onSubmitPressed() {
this.props.navigator.push({
title: "Secure Page",
component: SecureView,
passProps: {username: this.state.username, password: this.state.password},
});
}
};
var styles = StyleSheet.create({
container: {
padding: 30,
marginTop: 65,
alignItems: "stretch"
},
title: {
fontSize: 18,
marginBottom: 10
},
formInput: {
height: 36,
padding: 10,
marginRight: 5,
marginBottom: 5,
marginTop: 5,
flex: 1,
fontSize: 18,
borderWidth: 1,
borderColor: "#555555",
borderRadius: 8,
color: "#555555"
},
button: {
height: 36,
flex: 1,
backgroundColor: "#555555",
borderColor: "#555555",
borderWidth: 1,
borderRadius: 8,
marginTop: 10,
justifyContent: "center"
},
buttonText: {
fontSize: 18,
color: "#ffffff",
alignSelf: "center"
},
});
module.exports = LoginView;

You have to use navigator. please read the documentation as mentioned below. and if you will need then i will share you my code.
Here is an example: NavigatorExample