I have been trying to update the email and password value on submitting the form
so that I can pass them in my login API parameters. But I have tried almost everything, the value of this.state won't just update. Every time I try to print the value in console log e.g: cosole.log(this.state.email), it prints empty string i.e the default value set previously.
Here is my code below:
login.js
import React, { Component } from 'react';
import { ThemeProvider, Button } from 'react-native-elements';
import BliszFloatingLabel from './BliszFloatingLabel'
import {
StyleSheet,
Text,
View,
Image,
TextInput,
Animated,
ImageBackground,
Linking
} from 'react-native';
const domain = 'http://1xx.xxx.xx.xxx:8000';
class Login extends Component {
state = {
email: '',
password: '',
}
LoginAPI = (e,p) => {
console.log(e, "####")
}
handleEmail = (text) => {
this.setState({ email: text })
}
handlePassword = (text) => {
this.setState({ password: text })
}
goToSignUpScreen=() =>{
this.props.navigation.navigate('SignUpScreen');
};
goToForgotPasswordScreen=() =>{
this.props.navigation.navigate('ForgotPasswordScreen');
};
render() {
return (
<View style={styles.container} >
<ImageBackground source={require('../bgrndlogin.jpeg')} style={styles.image} >
<View style={styles.heading}>
<Image style={styles.logo} source={require('../loginlogo.png')} />
<Text style={styles.logoText}>Login</Text>
<Text style={styles.logodesc}>Please Login to continue --></Text>
</View>
<View style={styles.form_container}>
<BliszFloatingLabel
label="Email Id"
value={this.state.email}
onChangeText = {this.handleEmail}
onBlur={this.handleBluremail}
/>
<BliszFloatingLabel
label="Password"
value={this.state.password}
onChangeText = {this.handlePassword}
onBlur={this.handleBlurpwd}
secureTextEntry={true}
/>
<ThemeProvider theme={theme}>
<Button buttonStyle={{
opacity: 0.6,
backgroundColor: '#CC2C24',
borderColor: 'white',
borderWidth: 1,
width: 200,
height: 50,
marginTop: 30,
marginLeft: '20%',
alignItems: 'center',
justifyContent: "center"
}}
title="Login"
type="outline"
onPress = {
() => this.LoginAPI(this.state.email, this.state.password)
}
/>
</ThemeProvider>
<Text style={{
marginTop: 70,
color: '#CC2C24',
fontSize: 16,
fontWeight: "bold"
}}
onPress={
this.goToForgotPasswordScreen
}>
Forgot Password?
</Text>
<Text style={{
marginTop: 20,
color: '#CC2C24',
fontSize: 16,
fontWeight: "bold"
}}
onPress={
this.goToSignUpScreen
}>
Don't have an Account?
</Text>
</View>
</ImageBackground>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
logo: {
width: 115,
height: 50,
},
logoText: {
color: 'white',
fontSize: 36,
fontWeight: "bold"
},
logodesc: {
color: '#CC2C24',
fontSize: 18,
fontWeight: "bold"
},
heading: {
flex: 3,
marginLeft:20,
marginTop:30
},
form_container: {
flex: 7,
marginLeft:20,
marginTop:30,
marginRight: 20,
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center"
},
});
const theme = {
Button: {
titleStyle: {
color: 'white',
fontWeight: "bold",
fontSize: 18
},
},
};
export default Login;
I have created a common form as below which I inherit everywhere :
BliszFloatingLabel.js
import React, { Component } from 'react';
import {
Text,
View,
TextInput,
Animated,
} from 'react-native';
class BliszFloatingLabel extends Component {
state = {
entry: '',
isFocused: false,
};
UNSAFE_componentWillMount() {
this._animatedIsFocused = new Animated.Value(0);
}
handleInputChange = (inputName, inputValue) => {
this.setState(state => ({
...state,
[inputName]: inputValue // <-- Put square brackets
}))
}
handleFocus = () => this.setState({ isFocused: true })
handleBlur = () => this.setState({ isFocused: true?this.state.entry!='' :true})
handleValueChange = (entry) => this.setState({ entry });
componentDidUpdate() {
Animated.timing(this._animatedIsFocused, {
toValue: this.state.isFocused ? 1 : 0,
duration: 200,
useNativeDriver: true,
}).start();
}
render() {
// console.log(this.state.entry)
const { label, ...props } = this.props;
const { isFocused } = this.state;
const labelStyle = {
position: 'absolute',
left: 0,
top: !isFocused ? 40 : 0,
fontSize: !isFocused ? 16 : 12,
color: 'white',
};
return (
<View style={{ paddingTop: 20,paddingBottom:20 }}>
<Text style={labelStyle}>
{label}
</Text>
<TextInput
{...props}
style={{
height: 50, fontSize: 16, color: 'white', borderBottomWidth: 1, borderBottomColor: "white"
}}
value={this.state.entry}
onChangeText={this.handleValueChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
blurOnSubmit
/>
</View>
)
}
}
export default BliszFloatingLabel;
Instead of passing onChangeText like this onChangeText={this.handleValueChange} pass in a callback in BliszFloatingLabel and also in Login component.
onChangeText={(text)=>this.handleValueChange(text)}
Snack with the fixture.
https://snack.expo.io/#waheed25/d16fb3
Related
This is my code ....
react native
Multiple Input Text handle in object and array in react native...
Is it possible to share your code? Share the entire component where you have these groups of 5 inputs. You can just copy and paste it inside your question body. That way I can help you better
App.js
import {
StyleSheet,
Pressable,
View,
} from 'react-native';
import {
AntDesign,
FontAwesome
} from '#expo/vector-icons';
import { useState } from 'react';
import AddStudentProfile from './Pages/AddStudentProfile';
import StudentList from './Pages/StudentList';
export default function App() {
const [iconColor, setIconColor] = useState(['#ab09bf', '#A9A9A9']);
const [multiValues, setMultiValues] = useState([]);
const [screen, setScreen] = useState(<StudentList stuList={multiValues} />);
function changeIconColor(pressCheck) {
if (pressCheck) {
setIconColor([
'#ab09bf',
'#A9A9A9'
]
);
}
else {
setIconColor([
'#A9A9A9',
'#ab09bf'
]
);
}
}
// const [iconChangableColor, setIconChangableColor] = useState('#A9A9A9');
function changeScreen(scr) {
setScreen(
// < AddStudentProfile />
scr
);
// setIconChangableColor('#ab09bf');
// console.log(multiValues)
changeIconColor(true)
}
function appendData(inp, onsrcChange) {
setScreen(
// < AddStudentProfile />
onsrcChange
);
setMultiValues([
...multiValues,
inp]);
console.log(multiValues)
}
return (
< View style={styles.container} >
<View style={{ flex: 9 }}>{screen}
</View>
<View >
<View style={styles.bottomIconContainer}>
<Pressable onPress={() => [changeScreen(<StudentList />), changeIconColor(true)]}
android_ripple={{ color: 'black' }}>
<View style={styles.bottomIconInnerContainer}>
<FontAwesome
name="list-ul"
size={35}
color={iconColor[0]} />
</View></Pressable>
<Pressable onPress={() => [changeScreen(<AddStudentProfile onAppendData={appendData} returnToProfile={changeScreen} />), changeIconColor(false)]}
android_ripple={{ color: 'black' }}>
<View style={styles.bottomIconInnerContainer}>
<AntDesign name="adduser"
size={35}
color={iconColor[1]}
/></View></Pressable></View>
</View>
</View >
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
bottomIconContainer: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
},
bottomIconInnerContainer: {
marginVertical: 20,
marginHorizontal: 80
}
});
AddStudentProfile.js
import {
Text,
TextInput,
ImageBackground,
View,
Button,
ScrollView,
StatusBar,
StyleSheet
} from "react-native";
import { useState } from "react";
import { AntDesign } from '#expo/vector-icons';
import PrimaryButton from "../Componenets/PrimaryButton";
import ColorCode from "../Componenets/ColorCode.js";
export default function AddStudentProfile({ returnToProfile, onAppendData }) {
const [values, setValues] = useState({});
function inputHandler(name, value) {
setValues({
...values,
[name]: value
})
}
function inpValues(srcChange) {
onAppendData(values, srcChange)
console.log(values)
}
return (
<ScrollView>
<View style={styles.screenContainer}>
<View>
<Text style={styles.textContainer}>
Add Student Profile
</Text>
</View>
<View style={styles.iconOutterContainer}>
<View style={styles.iconContainer}>
<AntDesign
name="user"
size={80}
color='white'
/>
</View>
</View>
<View style={{ alignItems: 'center' }}>
<TextInput
style={styles.inputTextContainer}
placeholder="name"
placeholderTextColor={ColorCode.placeHolder}
onChangeText={(val) => inputHandler('sname', val)}
/>
<TextInput
style={styles.inputTextContainer}
placeholder="roll no"
placeholderTextColor={ColorCode.placeHolder}
onChangeText={(val) => inputHandler('rno', val)}
/>
<TextInput
style={styles.inputTextContainer}
placeholder="department"
placeholderTextColor={ColorCode.placeHolder}
onChangeText={(val) => inputHandler('dep', val)}
/>
<TextInput
style={styles.inputTextContainer}
placeholder="e-mail"
placeholderTextColor={ColorCode.placeHolder}
onChangeText={(val) => inputHandler('mail', val)}
/>
<TextInput
style={styles.inputTextContainer}
placeholder="Phone no"
placeholderTextColor={ColorCode.placeHolder}
onChangeText={(val) => inputHandler('phno', val)}
/>
</View>
<PrimaryButton
onreturnToProfile={returnToProfile}
inputValues={inpValues}
changeColor='#8a0896'
>Save</PrimaryButton>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
iconContainer: {
height: 100,
width: 100,
borderRadius: 100,
backgroundColor: '#ab09bf',
alignItems: 'center',
justifyContent: 'center'
},
textContainer: {
marginVertical: 10,
textAlign: 'center',
fontSize: 20,
},
screenContainer: {
marginTop: StatusBar.currentHeight,
flex: 1,
padding: 20
},
iconOutterContainer: {
alignItems: 'center'
},
inputOutterContainer: {
padding: 10,
marginHorizontal: 5
},
inputTextContainer: {
padding: 10,
backgroundColor: '#fff',
marginVertical: 10,
width: '95%',
fontSize: 19,
elevation: 5,
borderRadius: 6,
shadowColor: '#ab09bf',
color: '#ab09bf'
},
buttonOutterContainer: {
width: '30%',
marginHorizontal: 10,
fontSize: 20
},
buttonInnerContainer: { fontSize: 23 }
});
PrimaryButton.js
import {
View,
Text,
Pressable,
StyleSheet
} from 'react-native';
import StudentList from '../Pages/StudentList';
export default function PrimaryButton({ children, inputValues, onreturnToProfile }) {
function pressHandler() {
//onreturnToProfile();
inputValues(<StudentList />)
}
return (
< View style={{ alignItems: 'center', marginTop: 15 }
}>
<View
style={styles.textOutterContainer}
>
<Pressable
onPress={pressHandler}
android_ripple={{ color: 'white' }}
>
<Text style={styles.textContainer}>{children}</Text>
</Pressable>
</View>
</View >
);
}
const styles = StyleSheet.create({
textContainer: {
fontSize: 23,
color: 'white',
textAlign: 'center'
},
textOutterContainer: {
backgroundColor: '#8a0896',
borderRadius: 22,
width: '20%',
height: 40,
alignItems: 'center',
justifyContent: 'center'
}
})
I have gone through your code and it seems to be right even though a bit complicated. What is the issue you are facing?
You are adding a set of student info(5 fields) on a button press to a parent component state. You are appending it to an empty array. Ideally, you should get something like the below. What seems to be the problem? Please explain.
multiValues = [
{
'sname': 'some sname',
'rno': 'some rno',
'dep': 'some dep',
'mail': 'some mail',
'phno': 'some phno'
},
{
'sname': 'some sname',
'rno': 'some rno',
'dep': 'some dep',
'mail': 'some mail',
'phno': 'some phno'
},
{
'sname': 'some sname',
'rno': 'some rno',
'dep': 'some dep',
'mail': 'some mail',
'phno': 'some phno'
},
{
'sname': 'some sname',
'rno': 'some rno',
'dep': 'some dep',
'mail': 'some mail',
'phno': 'some phno'
},
]
Will update this answer depending on your response so that it might be of help to someone else.
I get an error for to many re-renders. It seems that the compareDate function gets run every time a state updates. The compareDate only has to be run when the app opens to check if it's a new day since last login so that it can reset the program by doing addWater(-dailyGoal). Does anyone know how I can make it only run once on opening the app?
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import {
StyleSheet,
Text,
View,
SafeAreaView,
Alert,
TouchableOpacity,
Keyboard,
TextInput,
} from 'react-native';
import AsyncStorage from '#react-native-community/async-storage';
import { FontAwesomeIcon } from '#fortawesome/react-native-fontawesome';
import { faTint, faCog, faTimes } from '#fortawesome/free-solid-svg-icons';
export default function App() {
// set vars
const [waterDrank, setWaterDrank] = useState(0);
const [menuOpen, setmenuOpen] = useState(false);
const [dailyGoal, setDailyGoal] = useState(3700);
const [bottle, setBottle] = useState(250);
const [dailyGoalSettings, onChangeDailyGoalSettings] = useState(
`${dailyGoal}`
);
const [bottleSettings, onChangeBottleSettings] = useState(`${bottle}`);
// Async storage
const storeWater = async (value) => {
try {
await AsyncStorage.setItem('storedWater', value);
} catch (e) {
// saving error
}
};
const getStoredWater = async () => {
try {
const value = await AsyncStorage.getItem('storedWater');
if (value !== null && !isNaN(value)) {
setWaterDrank(parseInt(value));
}
} catch (e) {
// error reading value
}
};
// init stored water data
getStoredWater();
// store settings
const storeSettings = async (daily, bottle) => {
try {
await AsyncStorage.setItem('dailyGoalSetting', daily);
await AsyncStorage.setItem('bottleSetting', bottle);
} catch (e) {
// saving error
}
};
const getStoredSettings = async () => {
try {
const valueDailyGoalSetting = await AsyncStorage.getItem(
'dailyGoalSetting'
);
const valueBottleSetting = await AsyncStorage.getItem(
'bottleSetting'
);
if (
valueDailyGoalSetting !== null &&
!isNaN(valueDailyGoalSetting) &&
valueBottleSetting !== null &&
!isNaN(valueBottleSetting)
) {
setDailyGoal(valueDailyGoalSetting);
setBottle(valueBottleSetting);
}
} catch (e) {
// error reading value
}
};
// init stored settings data
getStoredSettings();
const addWater = (amount) => {
amount = parseInt(amount);
if (!isNaN(amount)) {
if (waterDrank + amount >= dailyGoal) {
setWaterDrank(dailyGoal);
storeWater(`${dailyGoal}`);
} else if (waterDrank + amount <= 0) {
setWaterDrank(0);
storeWater(`0`);
} else {
setWaterDrank(waterDrank + amount);
storeWater(`${waterDrank + amount}`);
}
} else {
setWaterDrank(waterDrank + 0);
storeWater(`${waterDrank + 0}`);
}
};
const compareDate = () => {
const firstDateIsPastDayComparedToSecond = (firstDate, secondDate) =>
firstDate.setHours(0, 0, 0, 0) - secondDate.setHours(0, 0, 0, 0) <
0;
const currentDate = new Date();
const storedDate = new Date(currentDate);
storedDate.setDate(storedDate.getDate() - 1);
// is the first date in the past
if (firstDateIsPastDayComparedToSecond(storedDate, currentDate)) {
addWater(-dailyGoal);
}
};
compareDate();
const settingsToggle = () => {
setmenuOpen(!menuOpen);
Keyboard.dismiss();
};
const settingsSave = () => {
storeSettings(dailyGoalSettings, bottleSettings);
getStoredSettings();
settingsToggle();
};
return (
<View style={styles.body}>
{/* settings */}
<View
style={[
styles.settingsMenu,
{
display: `${menuOpen ? 'block' : 'none'}`,
},
]}
>
<SafeAreaView onPress={() => Keyboard.dismiss()}>
<TouchableOpacity
style={styles.settingsButton}
onPress={() => settingsToggle()}
>
<FontAwesomeIcon
icon={faTimes}
color={'black'}
size={24}
/>
</TouchableOpacity>
<View style={{ paddingHorizontal: 20 }}>
<Text style={styles.settingsText}>
Daily water goal in ml
</Text>
<TextInput
style={styles.settingsInput}
onChangeText={(text) =>
onChangeDailyGoalSettings(text)
}
value={dailyGoalSettings}
keyboardType={'number-pad'}
/>
<Text style={styles.settingsText}>
Amount of a bottle in ml
</Text>
<TextInput
style={styles.settingsInput}
onChangeText={(text) =>
onChangeBottleSettings(text)
}
value={bottleSettings}
keyboardType={'number-pad'}
/>
<TouchableOpacity
style={styles.settingsSave}
onPress={() => settingsSave()}
>
<Text
style={{
alignSelf: 'center',
color: '#fff',
fontWeight: 'bold',
}}
>
Save
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
{/* main content */}
<SafeAreaView style={styles.container}>
<TouchableOpacity
style={styles.settingsButton}
onPress={() => settingsToggle()}
>
<FontAwesomeIcon icon={faCog} color={'white'} size={24} />
</TouchableOpacity>
<View style={styles.wrapper}>
<Text style={styles.textWaterLeft}>
{dailyGoal - waterDrank}
<Text style={styles.textWaterLeftMeasurement}>ml</Text>
</Text>
<Text style={styles.titleText}>
Left to hit your daily goal!
</Text>
</View>
<View style={styles.wrapper}>
<View style={styles.buttonContainer}>
<TouchableOpacity
style={[
styles.button,
{
backgroundColor: `${
waterDrank >= dailyGoal
? '#4DAC5F'
: '#0064ED'
}`,
},
]}
onPress={() => addWater(-bottle)}
>
<Text style={styles.buttonText}>
-
<FontAwesomeIcon
icon={faTint}
color={'white'}
/>
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.button,
{
backgroundColor: `${
waterDrank >= dailyGoal
? '#4DAC5F'
: '#0064ED'
}`,
},
]}
onPress={() =>
Alert.prompt(
'How much water did you drink?',
'',
[
{
text: 'OK',
onPress: (amount) =>
addWater(amount),
},
]
)
}
>
<Text style={styles.buttonText}>+</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.button,
{
backgroundColor: `${
waterDrank >= dailyGoal
? '#4DAC5F'
: '#0064ED'
}`,
},
]}
onPress={() => addWater(bottle)}
>
<Text style={styles.buttonText}>
+
<FontAwesomeIcon
icon={faTint}
color={'white'}
/>
</Text>
</TouchableOpacity>
</View>
</View>
<StatusBar style="auto" barStyle="dark-content" />
</SafeAreaView>
<View
style={[
styles.indicator,
{
height: `${Math.floor(
(100 / dailyGoal) * waterDrank
)}%`,
backgroundColor: `${
waterDrank >= dailyGoal ? '#51E66E' : '#1782FF'
}`,
},
]}
></View>
</View>
);
}
const styles = StyleSheet.create({
body: {
flex: 1,
backgroundColor: '#152940',
},
container: {
flex: 1,
},
wrapper: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
},
indicator: {
position: 'absolute',
width: '100%',
bottom: 0,
zIndex: -1,
},
textWaterLeft: {
fontSize: 77,
color: '#fff',
fontWeight: 'bold',
},
textWaterLeftMeasurement: {
fontSize: 18,
fontWeight: 'normal',
color: '#fff',
marginTop: 200,
marginBottom: 10,
},
titleText: {
color: '#fff',
fontSize: 18,
marginBottom: 30,
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
flexWrap: 'wrap',
},
button: {
flex: 1,
margin: 10,
backgroundColor: '#0064ED',
borderRadius: 10,
},
buttonText: {
textAlign: 'center',
color: '#fff',
margin: 20,
fontSize: 18,
},
settingsButton: {
height: 40,
width: 40,
alignSelf: 'flex-end',
zIndex: 2,
justifyContent: 'flex-end',
},
settingsMenu: {
position: 'absolute',
height: '100%',
width: '100%',
backgroundColor: '#fff',
zIndex: 200,
},
settingsText: {
marginTop: 30,
},
settingsInput: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
paddingHorizontal: 20,
marginTop: 10,
},
settingsSave: {
marginTop: 30,
textAlign: 'center',
width: '100%',
padding: 15,
borderRadius: 10,
backgroundColor: '#0064ED',
},
});
Ciao, try to use useEffect hook like this:
import React, { useState, useEffect } from 'react';
...
useEffect(() => {
compareDate();
}, [])
In this way compareDate() will be triggered only once at component renders.
Not sure where I go about declaring the array with which I want to search from, any assistance would be appreciated. I believe my issue is that I am declaring the "services' array in the incorrect area but I am not sure where else to put it! Or if the commas are the right character to be using in between strings/services
import React, { useState, Component } from 'react';
import { StyleSheet, StatusBar, View, Text, Button, TouchableOpacity } from 'react-native';
import AutoComplete from 'react-native-autocomplete-input';
class CareProviderSequenceScreen extends Component {
constructor (props) {
super (props);
this.state = {
services: [],
query: '',
}
}
render() {
const query = this.state;
const services = {
"Pick up my Prescription",
'Pick up groceries',
'Pick up dry cleaning',
'Pick up my pet',
}
return (
<View style={styles.container}>
<Autocomplete
autoCapitalize="none"
autoCorrect={false}
containerStyle={styles.autocompleteContainer}
//data to show in suggestion
data={services.length === 1 && comp(query, services[0].title) ? [] : services}
//default value if you want to set something in input
defaultValue={query}
/*onchange of the text changing the state of the query which will trigger
the findFilm method to show the suggestions*/
onChangeText={text => this.setState({ query: text })}
placeholder="Enter your need"
renderItem={({ item }) => (
//you can change the view you want to show in suggestion from here
<TouchableOpacity onPress={() => this.setState({ query: item.title })}>
<Text style={styles.itemText}>
{item.title} ({item.release_date})
</Text>
</TouchableOpacity>
)}
/>
<View style={styles.descriptionContainer}>
{services.length > 0 ? (
<Text style={styles.infoText}>{this.state.query}</Text>
) : (
<Text style={styles.infoText}>Enter The Film Title</Text>
)}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#F5FCFF',
flex: 1,
padding: 16,
marginTop: 40,
},
autocompleteContainer: {
backgroundColor: '#ffffff',
borderWidth: 0,
},
descriptionContainer: {
flex: 1,
justifyContent: 'center',
},
itemText: {
fontSize: 15,
paddingTop: 5,
paddingBottom: 5,
margin: 2,
},
infoText: {
textAlign: 'center',
fontSize: 16,
},
});
export default CareProviderSequenceScreen ;
CareProviderSequenceScreen .navigationOptions = () => ({
title: "Home & Personal Care",
headerTintColor: '#9EBBD7',
headerStyle: {
height: 65,
backgroundColor: '#1E5797',
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.20,
shadowRadius: 1.41,
elevation: 2,}
});
First, you are assigning an object to services array.
Second, you are not accessing the query state properly. It should be
const { query } = this.state
I am writing to create a todo application using react native and firebase, I followed up a youtube to develop an application that saves to file instead of firebase, but read up to include firebase in the application but I don't know how to bind the data to it and ensure until the submit button is clicked before it saves to the data base and display it on the page.
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
ScrollView,
TouchableOpacity
} from 'react-native';
import Note from './Note';
import firebase from 'firebase';
export default class Main extends Component {
constructor(props){
super(props);
this.state = {
noteArray: [],
noteText: '',
};
}
componentWillMount() {
var config = {
apiKey: "AIzaSyAB3bO5C7pcLYv745DwwPqUicAshRTdzYk",
authDomain: "mytodo-6b198.firebaseapp.com",
databaseURL: "https://mytodo-6b198.firebaseio.com",
projectId: "mytodo-6b198",
storageBucket: "",
messagingSenderId: "314761285731"
};
firebase.initializeApp(config);
//console.log(firebase);
firebase.database().ref('todo/001').set(
{
note: this.state.noteText,
name: "Tola"
}
).then(() =>{
console.log('inserted');
}).catch((error) =>{
console.log(error);
});
}
render() {
let notes = this.state.noteArray.map((val, key)=>{
return <Note key={key} keyval={key} val={val}
deleteMethod={()=>this.deleteNote(key)}/>
});
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>Todo App</Text>
</View>
<ScrollView style={styles.scrollContainer}>
{notes}
</ScrollView>
<View style={styles.footer}>
<TextInput
style={styles.textInput}
placeholder='>note'
onChangeText={(noteText)=> this.setState({noteText})}
value={this.state.noteText}
placeholderTextColor='white'
underlineColorAndroid='transparent'>
</TextInput>
</View>
<TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</View>
);
}
addNote(){
if(this.state.noteText){
var d = new Date();
this.state.noteArray.push({
'date':d.getFullYear()+
"/"+(d.getMonth()+1) +
"/"+ d.getDate(),
'note': this.state.noteText
});
this.setState({ noteArray: this.state.noteArray });
this.setState({noteText:''});
}
}
deleteNote(key){
this.state.noteArray.splice(key, 1);
this.setState({noteArray: this.state.noteArray});
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
backgroundColor: '#E91E63',
alignItems: 'center',
justifyContent:'center',
borderBottomWidth: 10,
borderBottomColor: '#ddd'
},
headerText: {
color: 'white',
fontSize: 18,
padding: 26
},
scrollContainer: {
flex: 1,
marginBottom: 100
},
footer: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
zIndex: 10
},
textInput: {
alignSelf: 'stretch',
color: '#fff',
padding: 20,
backgroundColor: '#252525',
borderTopWidth:2,
borderTopColor: '#ededed',
marginBottom: 30
},
addButton: {
position: 'absolute',
zIndex: 11,
right: 20,
bottom: 90,
backgroundColor: '#E91E63',
width: 70,
height: 70,
borderRadius: 35,
alignItems: 'center',
justifyContent: 'center',
elevation: 8
},
addButtonText: {
color: '#fff',
fontSize: 24
}
});
And there is a video tutorial to learn CRUD in native react, firebase and context API. I will be glad to watch one. Thank you
Note.js
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
} from 'react-native';
export default class Note extends Component {
render() {
return (
<View key={this.props.keyval} style={styles.note}>
<Text style={styles.noteText}>{this.props.val.date}</Text>
<Text style={styles.noteText}>{this.props.val.note}</Text>
<TouchableOpacity onPress={this.props.deleteMethod} style={styles.noteDelete}>
<Text style={styles.noteDeleteText}>D</Text>
</TouchableOpacity>
</View>
);
}
}
You need to create the function for creating the payload and saving data. I recommend you to use arrow functions and a promise for asynchronous task. Try this and let me know if it helped you.
import React, {
Component
} from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
ScrollView,
TouchableOpacity
} from 'react-native';
import Note from './Note';
// in the future i would recommend you to use react-native-firebase.
//but for learning purposes it's ok.
import firebase from 'firebase';
export default class Main extends Component {
constructor(props){
super(props);
this.state = {
noteArray: [],
noteText: '',
};
}
componentWillMount() {
var config = {
apiKey: "AIzaSyAB3bO5C7pcLYv745DwwPqUicAshRTdzYk",
authDomain: "mytodo-6b198.firebaseapp.com",
databaseURL: "https://mytodo-6b198.firebaseio.com",
projectId: "mytodo-6b198",
storageBucket: "",
messagingSenderId: "314761285731"
};
firebase.initializeApp(config);
// end of componentWillMount
}
// create ALL needed functions
// ist an arrow function
createNote = () => {
//create a promise for waiting until element is succesfully created
return new Promise((resolve, reject) => {
//extract current states
const { noteArray, noteText } = this.state
//create newElement
var d = new Date();
const newElement = {
'date':d.getFullYear()+ "/"+(d.getMonth()+1) + "/"+ d.getDate(),
'note': noteText
}
//set all states
this.setState({
noteArray: [...noteArray, newElement ], //correct array-state manipulation
noteText:''
}, () => resolve(newElement)) //new element ist passed as params to next then
})
}
_addNoteToFirebase = () => {
//this is an arrow function.
//myfunc = (params) => { /*custom logic*/}
const refInDatabase = firebase.database().ref('todo/001');
this.createNote()
.then((elementRecived) => refInDatabase.update(elementRecived))
.then(() => console.log('inserted'))
.catch((error) => console.log(error));
}
deleteNote = (key) => {
const { noteArray } = this.state
this.setState({
noteArray: noteArray.splice(key, 1)
})
}
// here is where render method starts
render() {
let notes = this.state.noteArray.map((val, key)=>{
return <Note
key={key}
keyval={key}
val={val}
deleteMethod={() => deleteNote(key)}
/>
});
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>Todo App</Text>
</View>
<ScrollView style={styles.scrollContainer}>
{notes}
</ScrollView>
<View style={styles.footer}>
<TextInput
style={styles.textInput}
placeholder='>note'
onChangeText={(noteText)=> this.setState({noteText})}
value={this.state.noteText}
placeholderTextColor='white'
underlineColorAndroid='transparent'>
</TextInput>
</View>
<TouchableOpacity onPress={this._addNoteToFirebase} style={styles.addButton}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
backgroundColor: '#E91E63',
alignItems: 'center',
justifyContent:'center',
borderBottomWidth: 10,
borderBottomColor: '#ddd'
},
headerText: {
color: 'white',
fontSize: 18,
padding: 26
},
scrollContainer: {
flex: 1,
marginBottom: 100
},
footer: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
zIndex: 10
},
textInput: {
alignSelf: 'stretch',
color: '#fff',
padding: 20,
backgroundColor: '#252525',
borderTopWidth:2,
borderTopColor: '#ededed',
marginBottom: 30
},
addButton: {
position: 'absolute',
zIndex: 11,
right: 20,
bottom: 90,
backgroundColor: '#E91E63',
width: 70,
height: 70,
borderRadius: 35,
alignItems: 'center',
justifyContent: 'center',
elevation: 8
},
addButtonText: {
color: '#fff',
fontSize: 24
}
});
This is my code for Chat Box, the window where I have "In" and "Out" messages are appearing.
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
FlatList,
Platform,
AsyncStorage
} from "react-native";
import Tutor from "../image/krutika.jpg";
import {
Container,
Header,
Left,
Input,
Body,
Right,
Thumbnail,
Button
} from "native-base";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Ionicons from "react-native-vector-icons/Ionicons";
import Icon1 from "react-native-vector-icons/FontAwesome";
import axios from "axios";
export default class ChatBox extends Component {
static navigationOptions = {
header: null
};
state = {
group_msgs: [],
student_id: null
};
renderDate = date => {
return <Text style={styles.time}>{date}</Text>;
};
componentWillMount = () => {
this.loading();
const { navigation } = this.props;
groupName = navigation.getParam("groupName");
group_id = navigation.getParam("group_id");
};
loading = async () => {
const userid = await AsyncStorage.getItem("user_id");
this.state.student_id = userid;
try {
let { data } = await axios.get('https://www.qualpros.com/chat/imApi/getMessage?groupId=6&limit=10&start=0&userId=62').then(response => {
// console.log(response)
if (response.status == 200) {
this.setState({ group_msgs: response.data.response.message });
console.log(response.data.response)
} else {
}
});
} catch (err) {
console.log(err);
}
};
render() {
return (
<Container>
<Header style={{ backgroundColor: "#d91009" }}>
<Left style={{ flex: 1, flexDirection: "row" }}>
<TouchableOpacity
style={styles.backArrow}
onPress={() => this.props.navigation.navigate("ChatScreen")}
>
<FontAwesome name="angle-left" size={30} color="#fff" />
</TouchableOpacity>
<Thumbnail
source={Tutor}
style={{
marginLeft: 8,
width: 30,
height: 30,
borderRadius: 30 / 2
}}
/>
</Left>
<Body>
<Text
onPress={() => {
this.props.navigation.navigate("Groupmembers", {
group_id:group_id,
groupname:groupName,
});
}}
style={{
alignSelf: Platform.OS == "android" ? "center" : null,
fontSize: 17,
color: "#fff"
}}
>
{groupName}
</Text>
</Body>
<Right>
<Button
style={{ backgroundColor: "#d91009" }}
onPress={() => {
this.props.navigation.navigate("TutorCalender");
}}
>
<Icon1 active name="calendar" size={24} color="#FFF" />
</Button>
</Right>
</Header>
<View style={styles.container}>
<FlatList
style={styles.list}
data={this.state.group_msgs}
keyExtractor={item => {
return item.m_id;
}}
renderItem={message => {
console.log(item);
const item = message.item;
let inMessage = (item.sender === this.state.userid) ? 'in' : 'out';
let itemStyle = inMessage ? styles.itemIn : styles.itemOut;
return (
<View style={[styles.item, itemStyle]}>
<View style={[styles.balloon]}>
<Text>{item.message}</Text>
</View>
</View>
);
}}
/>
<View style={styles.footer}>
<View style={styles.inputContainer}>
<TextInput
style={styles.inputs}
placeholder="Write a message..."
underlineColorAndroid="transparent"
onChangeText={name_address => this.setState({ name_address })}
/>
</View>
{/* <TouchableOpacity style={styles.btnSend}>
<Ionicons name="md-send" size={36} color='#d91009' /> style={styles.iconSend} />
</TouchableOpacity> */}
</View>
</View>
</Container>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
list: {
paddingHorizontal: 17
},
footer: {
flexDirection: "row",
height: 60,
backgroundColor: "#eeeeee",
paddingHorizontal: 10,
padding: 5
},
btnSend: {
//color: "#d91009",
width: 40,
height: 40,
borderRadius: 360,
alignItems: "center",
justifyContent: "center"
},
iconSend: {
width: 30,
height: 30,
alignSelf: "center"
},
inputContainer: {
borderBottomColor: "#F5FCFF",
backgroundColor: "#FFFFFF",
borderRadius: 30,
borderBottomWidth: 1,
height: 40,
flexDirection: "row",
alignItems: "center",
flex: 1,
marginRight: 10
},
inputs: {
height: 40,
marginLeft: 16,
borderBottomColor: "#FFFFFF",
flex: 1
},
balloon: {
maxWidth: 250,
padding: 15,
borderRadius: 20
},
itemIn: {
alignSelf: "flex-start",
backgroundColor: "#eeeeee"
},
itemOut: {
alignSelf: "flex-end",
backgroundColor: "#DCF8C5"
},
time: {
alignSelf: "flex-end",
margin: 15,
fontSize: 12,
color: "#808080"
},
item: {
marginVertical: 14,
flex: 1,
flexDirection: "row",
borderRadius: 300,
padding: 1
}
});
I am using axios to fetch the api, the api response is coming as an Array inside the array but nothing is coming on the screen.
I can get it with storing response upto message but then I can't have the loop on messages.
Please help.
Thanks in advance
When doing a GET request to the endpoint in your code the response looks as follows:
{
"status":{
"code":200,
"message":"Success"
},
"totalMessage":6,
"recentMessageId":228,
"response":[
...
]
}
Inside the response object there's an array of message objects so you can't use response.data.response.message when setting state. That part of your code needs to be:
this.setState({ group_msgs: response.data.response });
Now you should be able to iterate through the group_msgs object to get the message key value for each item in the array.
Also in the FlatList component you should have
keyExtractor={item => {
return item.message.m_id;
}}
Your renderItem seems to be wrong as well, see should be something like this:
renderItem={ ({item}) => {
let inMessage = (item.sender.usedId === this.state.userid) ? 'in' : 'out';
let itemStyle = inMessage ? styles.itemIn : styles.itemOut;
return (
<View style={[styles.item, itemStyle]}>
<View style={[styles.balloon]}>
<Text>{item.message.message}</Text>
</View>
</View>
);
}}
I strongly suggest you take a look at the structure of the response object since that's where you are failing at the moment.