I want to display the temp value in application from fire store but I don't know how to do it by using hook (온도 means temperature)
please help me this is my code. v v
import React ,{useState,useEffect} from 'react';
import Iconicons from 'react-native-vector-icons/Ionicons';
import firestore, { firebase } from '#react-native-firebase/firestore';
import {
SafeAreaView,
ScrollView,
StyleSheet,
TouchableOpacity,
Text,
View}
from 'react-native';
const temp = ({navigation}) => {
return (
<SafeAreaView style={styles.top}>
<View style={styles.array}>
<TouchableOpacity onPress={() => {navigation.pop()}}>
<Iconicons name={'arrow-back-outline'} size={40} color={'white'}/>
</TouchableOpacity>
<Text style={styles.word}>온도</Text>
<Text> </Text>
</View>
<ScrollView style={styles.container}>
<View style={styles.body}>
<View style={styles.box}>
<Text style={styles.text}>온도:{temp} </Text>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'skyblue',
flex: 1,
},
top:{
backgroundColor: '#007ccc',
flex: 1,
},
body:{
marginTop:100,
alignItems:'center',
justifyContent:'center',
},
word:{
fontSize:20,
color:'white',
},
array:{
justifyContent:'space-between',
flexDirection:'row',
},
box:{
justifyContent:'center',
backgroundColor:'white',
borderRadius:30,
width:300,
height:300,
},
text:{
fontSize:50,
},
});
export default temp;
This is my data from firestore:
Related
My Custom Button that should take me home doesn't and give me an "undefined error." I'm pretty sure its because the Stack Navigator stuff is in the main file, but I don't know how to give this code file access to it and my Google efforts and the Docs have been unsuccessful. Any help on this simple issue would be appreciated.
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import CustomButton from './CustomButton';
import { useFonts } from 'expo-font';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import player from './Player';
import App from './App';
import usePotion from './UsePotion';
import { useState } from 'react';
import { useEffect } from 'react';
function BattleScreen({ navigation }) {
const [fontsLoaded, error] = useFonts({
'Valorax': require('./Fonts/Valorax.otf'),
});
if (!fontsLoaded) {
return <Text>Loading...</Text>;
}
return (
<View style={styles.container}>
<Text style={styles.text}>{player.potions}</Text>
<View style={styles.topHalf}>
</View>
<View style={styles.bottomHalf}>
<View style={styles.buttonRow}>
<CustomButton onPress={() => handleAttack()} title='Attack'></CustomButton>
<CustomButton onPress={() => handleMagic()} title='Magic'></CustomButton>
</View>
<View style={styles.buttonRow}>
<CustomButton onPress={usePotion()} title='Use Potion'></CustomButton>
<CustomButton onPress={() => handleRun()} title='Run'></CustomButton>
<CustomButton onPress={() => navigation.navigate('Home')} title="Home"></CustomButton>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000000',
},
topHalf: {
flex: 1,
color: 'white',
},
bottomHalf: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap'
},
buttonRow: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-evenly',
flexWrap: 'wrap'
},
text: {
fontSize: 90,
color: 'white',
fontFamily: "Valorax",
}
});
export default BattleScreen;
**strong text**
Try using the useNavigation hook (https://reactnavigation.org/docs/use-navigation/):
import { useNavigation } from '#react-navigation/native';
function BattleScreen() {
const [fontsLoaded, error] = useFonts({
'Valorax': require('./Fonts/Valorax.otf'),
});
const navigation = useNavigation()
if (!fontsLoaded) {
return <Text>Loading...</Text>;
}
return (
<View style={styles.container}>
<Text style={styles.text}>{player.potions}</Text>
<View style={styles.topHalf}>
</View>
<View style={styles.bottomHalf}>
<View style={styles.buttonRow}>
<CustomButton onPress={() => handleAttack()} title='Attack'></CustomButton>
<CustomButton onPress={() => handleMagic()} title='Magic'></CustomButton>
</View>
<View style={styles.buttonRow}>
<CustomButton onPress={usePotion()} title='Use Potion'></CustomButton>
<CustomButton onPress={() => handleRun()} title='Run'></CustomButton>
<CustomButton onPress={() => navigation.navigate('Home')} title="Home"></CustomButton>
</View>
</View>
</View>
);
}
I want to achieve something like this in React Native:
I have a TextInput component and I want to put an icon to the right side. The user can click it, then I can display some text in a modal or in a another component.
Is this possible in react native?
return(
<View style={styles.container}>
<TextInput
placeholder="Állat neve"
value={AllatNev}
style={styles.textBox}
onChangeText={(text) => setAllatNev(text)}
/>
</View>
);
}
)
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: color_theme_light.bodyBackground
justifyContent: 'center',
alignItems:'center'
},
textBox:{
borderWidth:2,
borderColor: color_theme_light.textBoxBorder,
margin:15,
borderRadius:10,
padding: 10,
fontFamily:'Quicksand-Medium'
},
});
Yes -- you can position your info button over the TextInput using absolute positioning and a zIndex, for example:
import * as React from 'react';
import { Text, View, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.textBoxParent}>
<TextInput style={styles.textBox} placeholder="Állat neve"/>
<TouchableOpacity style={styles.textBoxButton} onPress={() => {
//launch your modal
}}>
<Text>i</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
textBoxParent: {
justifyContent: 'center'
},
textBox:{
borderWidth:2,
borderColor: 'gray',
margin:15,
borderRadius:10,
padding: 10,
},
textBoxButton: {
position: 'absolute',
right: 20,
zIndex: 100,
width: 20,
height: 20,
borderWidth: 1,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center'
}
});
Working example: https://snack.expo.dev/OFMTc8GHE
Heres a full example of what you want (https://snack.expo.dev/bjzBFuE4W). And below I explain the code.
Fist I made a Modal from react native that takes in modalVisible, setModalVisible, and appears when modalVisible is true.
import * as React from 'react';
import { Text, View, StyleSheet,TextInput ,TouchableOpacity,Modal} from 'react-native';
import { AntDesign } from '#expo/vector-icons';
import { MaterialIcons } from '#expo/vector-icons';
const ModalInfo = ({modalVisible, setModalVisible})=>{
return (
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<View style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}>
<View
style={{
width:200,height:200,backgroundColor:"gray",borderWidth:2,
justifyContent:"center",alignItems:"center"
}}
>
<TouchableOpacity onPress={()=>{setModalVisible(false)}}>
<MaterialIcons name="cancel" size={24} color="black" />
</TouchableOpacity>
</View>
</View>
</Modal>
)
}
Next I made a View to wrap around the textInput so I can also add an svg of the info icon. And then set the outside view to have flexDirection:"row", so everything would be ordered the way you wan't.
const TextInputWithModal = ()=>{
const [modalVisible, setModalVisible] = React.useState(false);
const [AllatNev,setAllatNev]= React.useState("");
return (
<View style={styles.textInputContainer}>
<TextInput
placeholder="Állat neve"
value={AllatNev}
style={styles.textBox}
onChangeText={(text) => setAllatNev(text)}
/>
<TouchableOpacity onPress={()=>{setModalVisible(true)}}>
<AntDesign name="infocirlceo" size={24} color="black" />
</TouchableOpacity>
<ModalInfo modalVisible={modalVisible} setModalVisible={setModalVisible}/>
</View>
)
}
export default function App() {
return (
<View style={styles.container}>
<TextInputWithModal/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems:"center",
},
textInputContainer:{
borderRadius:10,
padding: 10,
flexDirection:"row",
margin:15,
borderWidth:2,
},
textBox:{
fontFamily:'Quicksand-Medium',
marginRight:20,
},
});
I am not using classes or functions as a native component, I am using const with props as a parameter.
In my project I am using Firestore as database and I want to pass data from one screen to another and I don't know how, can someone give me some tips ?
My other problem is in the firestore query because I need to put .doc(firebase.auth().currentUser) and when I test my application an error occurs in the application.
BreadAndBounty.js
import React, { useState, useEffect } from "react";
import { View, Text, TextInput, StyleSheet, Image, ScrollView, TouchableOpacity, StatusBar, SafeAreaView, FlatList, Dimensions, ImageBackground } from 'react-native'
import { Ionicons } from '#expo/vector-icons'
import Constants from 'expo-constants'
import firebase, { firestore } from 'firebase'
require('firebase/firestore')
const { width, height } = Dimensions.get("window");
const BreadAndBounty = (props) => {
const [adverts, setAdverts] = useState([])
const getAdverts = async () => {
const querySnap = await firestore()
.collection('adverts')
.get()
const result = querySnap.docs.map(docSnap => docSnap.data())
setAdverts(result)
}
useEffect(() => {
getAdverts()
}, [])
const renderItem = (item) => {
return (
<View>
<View style={{
flexDirection: "row",
paddingTop: 50,
alignItems: "center"
}}>
<View style={{ width: "20%" }}>
</View>
<View style={{
width: "60%"
}}>
<Text style={{
fontWeight: "bold",
fontSize: 14,
color: "#044244"
}}>{item.title}</Text>
<Text style={{
fontWeight: "900",
fontSize: 12,
color: "#9ca1a2"
}}>
{item.name}
</Text>
</View>
<View style={{
width: "20%",
alignItems: "flex-end"
}}>
</View>
</View>
<TouchableOpacity
onPress={() => props.navigation.navigate(("AdvertsDetail"), { uid: firebase.auth().currentUser })}
style={{
flexDirection: "row",
width: "100%",
paddingTop: 20
}}>
<ImageBackground
source={item.image}
style={{
width: 300,
height: 220,
borderRadius: 30,
}}
imageStyle={{
borderRadius: 30,
}}
>
<View style={{
height: "100%",
flexDirection: "row",
alignItems: 'flex-end',
justifyContent: "flex-end"
}}>
</View>
</ImageBackground>
</TouchableOpacity>
</View>
)
}
return (
<ScrollView showsVerticalScrollIndicator={false}
style={{
height: "100%",
backgroundColor: "#62929E"
}}>
<View style={styles.view1}>
<View style={styles.view2}>
<View>
</View>
<View style={styles.view3}>
</View>
</View>
<Text style={styles.text1}>Bread And Bounty</Text>
<View style={styles.view_search}>
<TextInput
placeholder="Pesquisar anúncios de voluntariado..."
style={styles.textinput}>
</TextInput>
<Ionicons
name="search"
size={15}
color="#9CALA2"
></Ionicons>
</View>
</View>
<View style={styles.view4}>
<View style={{ width: "100%" }}>
<FlatList
numColumns={1}
horizontal={false}
showsVerticalScrollIndicator={false}
style={{
display: "flex",
height: Dimensions.get("screen").height,
width: Dimensions.get("screen").width
}}
data={adverts}
renderItem={({ item }) => renderItem(item)} />
</View>
</View>
</ScrollView>
)
}
export default BreadAndBounty
AdvertsDetail
import React, { useState } from 'react'
import { View, StyleSheet, Text,TouchableOpacity } from 'react-native'
import Constants from 'expo-constants';
import { Ionicons } from "#expo/vector-icons"
const AdvertsDetail = (props) => {
const [currentUser, Adverts] = useState([])
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={() => props.navigation.goBack()}>
<Ionicons name="md-arrow-back" size={24} color="#52575D"></Ionicons>
</TouchableOpacity>
</View>
<Text>{currentUser.title}</Text>
</View>
)
}
export default AdvertsDetail
We can simply access the params from the previous screen in the new screen by accessing the props of the current screen.
ex.
import React, { useState } from 'react'
import { View, StyleSheet, Text,TouchableOpacity } from 'react-native'
import Constants from 'expo-constants';
import { Ionicons } from "#expo/vector-icons"
const AdvertsDetail = (props) => {
const currentUser = props.route.params.uid
return (
<View style={styles.container}>
<View style={styles.header}>
<TouchableOpacity onPress={() => props.navigation.goBack()}>
<Ionicons name="md-arrow-back" size={24} color="#52575D"></Ionicons>
</TouchableOpacity>
</View>
<Text>{currentUser.title}</Text>
</View>
)
}
export default AdvertsDetail
Check out the official docs from react-navigation for passing the params to the screen and accessing it.
https://reactnavigation.org/docs/params/
I have created 3 files and places the navigation container in the app.js file. i am unable to navigate through the screens. I don't understand where the mistake lies.
App.js
import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { NavigationContainer } from '#react-navigation/native';
import Login from './Login.js';
import {createStackNavigator} from '#react-navigation/stack';
import InitialScreen from './InitialScreen.js';
const Stack = createStackNavigator();
function Nav() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="InitialScreen">
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="InitialScreen" component={InitialScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default Nav;
InitialScreen.js
import 'react-native-gesture-handler';
import React, { useState } from 'react';
import {Button, Text, TextInput, View, StyleSheet ,TouchableOpacity,Image} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import { NavigationContainer } from '#react-navigation/native';
import Login from './Login.js';
function InitialScreen({navigation}){
const pressHandler=()=>{
navigation.navigate('Login');
}
return (
<>
<View style={styles.container}>
<View style={styles.Container0}>
<TouchableOpacity>
<Text style={{backgroundColor:'white',
fontSize:30,
borderWidth:2,
borderRadius:4,
marginTop: 5,
marginLeft:10,
marginRight:10,
fontWeight:'bold',
textAlign:'center',
padding:2,
}} onPress={pressHandler}
>Login</Text>
<Text style={{marginLeft:10,
fontSize:15,}}> Do not have an account?</Text>
<Text style={{backgroundColor:'white',
fontSize:30,
borderWidth:2,
borderRadius:4,
marginTop: 5,
marginLeft:10,
marginRight:10,
fontWeight:'bold',
textAlign:'center',
padding:2,
}}>SignUp</Text>
</TouchableOpacity>
</View>
<View style={styles.Container1}>
<Image source={{uri: 'http://i.pinimg.com/originals/d1/9b/4d/d19b4d524b8f95b3c640228c28373696.jpg'}}
style={{width:'100%',
height:'100%',
marginTop:5,
flexDirection: 'column',
justifyContent: 'center',
alignSelf: 'center',}}/>
</View>
<View style={styles.Container3}>
<Text style={{fontSize:25,fontWeight:'bold',
color:'white',
textAlign:'center',
}}>I am going to be so productive!!!!!!</Text>
</View>
</View>
<View style={styles.icons}>
<Icon
name='download-cloud'
size={30}
/>
<Icon
name='mail'
size={30}
/>
<Icon
name='instagram'
size={30}
/>
<Icon
name='link'
size={30}
/>
</View>
</>
);
}
const styles=StyleSheet.create({
container:
{ flex:0.9,
marginLeft:5,
marginRight:5,
marginTop:5,
marginBottom:5,
backgroundColor:'black',
},
Container0:
{ flex:0.25,
flexDirection:'column',
backgroundColor:'#ffa07a',
},
Container1:
{
flex:0.6,
backgroundColor:'white',
},
Container3:
{flex:0.1,
justifyContent:"center",
alignItems:'center',
marginTop:10,
},
icons:
{
flex:0.1,
flexDirection: 'row',
justifyContent:'space-around',
marginTop:10,
},
}
);
export default InitialScreen;
Login.js
import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { Text, TextInput, View, StyleSheet ,TouchableOpacity,Image} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
function Login() {
const [text,onChangeText]= React.useState('Enter your email');
const [Value,setValue]= React.useState('Enter your password');
return(
<View style={styles.container}>
<Text style={{marginTop:40,fontWeight:'bold',fontSize:40,textAlign:'center',}}>Login</Text>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={text => onChangeText(text)}
value={value}
/>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
setValue={Value => setValue(Value)}
value={value}
/>
</View>
);
}
const styles=StyleSheet.create({
container:
{
flexDirection:'column',
}
});
export default Login;
I don't understand why the "onPress" isn't working here . I am unable to even click on it . it is just like a text with no response or change in opacity too . The navigation isn't working either.
#nandita you are using onPress on Text tag. onPress event only works on TouchableOpacity or TouchableHightlight
try doing this.
<TouchableOpacity onPress={pressHandler}>
<Text style={{backgroundColor:'white',
fontSize:30,
borderWidth:2,
borderRadius:4,
marginTop: 5,
marginLeft:10,
marginRight:10,
fontWeight:'bold',
textAlign:'center',
padding:2,
}}
>Login</Text>
<TouchableOpacity>
I have just started React-Native. But here my TouchableOpacity is not working.please check the code
import React, { Component } from 'react'
import { View, Text , StyleSheet, TouchableOpacity, TouchableNativeFeedback } from 'react-native'
import firebase from 'firebase'
class Article extends Component {
handleOnPress = () => {
firebase.auth().signOut();
}
render(){
return (
<View style={styles.container}>
<View >
<Text>You are logged in </Text>
<TouchableOpacity style={styles.buttonContainer}
onPress={this.handleOnPress}>
<Text>Log Out</Text>
</TouchableOpacity>
</View>
</View>
)}
}
export default Article
const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'red'
},
button:{
color:'white',
justifyContent:'center',
alignItems:'center',
textAlign:'center',
fontWeight:'bold',
fontSize:25
},
buttonContainer:{
backgroundColor:'green',
color:'white',
padding:10,
borderRadius:8,
width:300,
height:50,
textAlign:'center',
padding:10,
alignSelf:'center',
marginTop:50
}
}
)
Try this:
import React, { Component } from 'react'
import { View, Text , StyleSheet, TouchableOpacity} from 'react-native'
import firebase from 'firebase'
export default class Article extends Component {
handleOnPress = () => {
alert('Called') //just to see if the function it's called
firebase.auth().signOut();
}
render() {
return (
<View style={styles.container}>
<Text>You are logged in </Text>
<TouchableOpacity style={styles.buttonContainer} onPress={this.handleOnPress}>
<Text>Log Out</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'red'
},
button:{
color:'white',
justifyContent:'center',
alignItems:'center',
textAlign:'center',
fontWeight:'bold',
fontSize:25
},
buttonContainer:{
backgroundColor:'green',
color:'white',
padding:10,
borderRadius:8,
width:300,
height:50,
textAlign:'center',
padding:10,
alignSelf:'center',
marginTop:50
}
})