In render() can I call the database SQLite and show the result in Image tag?
My code :
import { View,Text, StyleSheet, ScrollView,Image} from 'react-native';
import React, { Component, useState} from 'react';
import AsyncStorage from '#react-native-async-storage/async-storage';
import Utils from './Utils';
import * as SQLite from 'expo-sqlite';
import RecyclerViewPage from './RecyclerViewPage';
var db = SQLite.openDatabase("user.db");
export default class User extends Component {
render(){
return(
<ScrollView>
<View style={styles.welcome}>
<Text style={styles.title}>User Profile</Text>
<Text style={styles.author_name}>Author name:{this.state.authorName[0]}</Text>
db.transaction(tx => {
tx.executeSql(
'select picture from User_Table where name=?;',
[this.state.authorName[0]], (_, result) => {
var base64Icons1=JSON.stringify(result.rows.item(0).picture);
<Image source={{uri: "data:image/jpeg;base64,"+base64Icons1}}} />
this.setState({picture:base64Icons1})
},(_, err) => {
reject(err);
})
});
</View>
<View style={styles.welcome}>
<Text style={styles.title}>User Profile</Text>
<Text style={styles.author_name}>Author name:{this.state.authorName[1]}</Text>
db.transaction(tx => {
tx.executeSql(
'select picture from User_Table where name=?;',
[this.state.authorName[1]], (_, result) => {
var base64Icons2=JSON.stringify(result.rows.item(0).picture);
<Image source={{uri: "data:image/jpeg;base64,"+base64Icons2}}} />
},(_, err) => {
reject(err);
})
});
</View>
</ScrollView>
)
}
}
My code doesn't work. How can I read from the database and immediately show the result in the <Image> tag?
Related
I've been trying to replace a view in React Native, but to no success. The app closes without errors whenever I try <TouchableOpacity onPress={() => {handleChangeMyView();}}> :
What am I doing wrong? How can I make it work?
Thank you all in advance.
import React, {
useState
} from 'react';
import {
SafeAreaView,
View,
TouchableOpacity,
} from 'react-native';
import MyInitialView from './MyInitialView';
const SiteContainer = () => {
let MyDynamicView = () => {
return (
<View></View>
);
};
const [MyDynamicViewArea, setMyDynamicViewArea] = useState(MyInitialView);
const handleChangeMyView = () => {
setMyDynamicViewArea(MyDynamicView);
};
return (
<SafeAreaView>
{MyDynamicViewArea}
<TouchableOpacity onPress={() => {handleChangeMyView();}}>
<View>
<FontAwesome name="quote-left"></FontAwesome>
</View>
</TouchableOpacity>
</SafeAreaView>
);
};
export default SiteContainer;
MyInitialView :
import React from 'react';
import {
View
} from 'react-native';
export default function MyInitialView() {
return (
<View></View>
);
}
You can use boolean value for viewing MyInitialView using useState
const [toViewMyInitialView, setToViewMyInitialView] = useState(false);
and in handleChangeMyView function set the above value as true
const handleChangeMyView = () => {
setToViewMyInitialView(true);
};
And in the SiteContainer
<SafeAreaView style={styles.siteContainer}>
// here I don't know a way to display a component in react-native, so
// you need to display the component MyInitialView if the
// toViewMyInitialView is true and when toViewMyInitialView id false it
// display MyDynamicViewArea
{toViewMyInitialView && <MyInitialView/>}
{!toViewMyInitialView && <MyDynamicViewArea/>}
<TouchableOpacity onPress={() => {handleChangeMyView()}}>
<View>
<FontAwesome name="quote-left"></FontAwesome>
</View>
</TouchableOpacity>
</SafeAreaView>
I've been trying to replace a view in React Native, but to no success. The app closes without errors whenever I try <TouchableOpacity onPress={() => {handleChangeMyView();}}> :
What am I doing wrong? How can I make it work?
Thank you all in advance.
import React, {
useState
} from 'react';
import {
SafeAreaView,
View,
} from 'react-native';
import MyInitialView from './MyInitialView';
const SiteContainer = () => {
let MyDynamicView = () => {
return (
<View></View>
);
};
const [MyDynamicViewArea, setMyDynamicViewArea] = useState(MyInitialView);
const handleChangeMyView = () => {
setMyDynamicViewArea(MyDynamicView);
};
return (
<SafeAreaView style={styles.siteContainer}>
{MyDynamicViewArea}
<TouchableOpacity onPress={() => {handleChagnStaceMyView();}}>
<View>
<FontAwesome name="quote-left"></FontAwesome>
</View>
</TouchableOpacity>
</SafeAreaView>
);
};
export default SiteContainer;
MyInitialView :
import React from 'react';
import {
View
} from 'react-native';
export default function MyInitialView() {
return (
<View></View>
);
}
You have incorrect name of function in onPress of TouchableOpacity.
Change this
onPress={() => {handleChagnStaceMyView();}}
to
onPress={() => {handleChangeMyView();}}
you are calling wrong function <TouchableOpacity onPress={() => {handleChagnStaceMyView();}}>
make it right as <TouchableOpacity onPress={() => {handleChangeMyView();}}>
good luck
I wonder you are not getting error like handleChagnStaceMyView is not defined
I'm trying to display an image in my app but I couldn't, the image not displaying and am not seeing any error, Thanks for your help. Here are my code.
This is the file am having all the data for the repositories, and also render the <RepositoryItem> component for each repository.
Main.jsx
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet } from 'react-native';
import RepositoryItem from './RepositoryItem';
const repositories = [
{
id: 'jaredpalmer.formik',
fullName: 'jaredpalmer/formik',
description: 'Build forms in React, without the tears',
language: 'TypeScript',
forksCount: 1589,
stargazersCount: 21553,
ratingAverage: 88,
reviewCount: 4,
ownerAvatarUrl: 'https://avatars2.githubusercontent.com/u/4060187?v=4',
}
];
const ItemSeparator = () => <View style={styles.separator} />;
const RepositoryList = () => {
const renderItem = ({item}) => <RepositoryItem item={item} />;
return (
<SafeAreaView>
<FlatList
data={repositories}
ItemSeparatorComponent={ItemSeparator}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
separator: {
height: 10,
},
});
export default RepositoryList;
And this is the file am displaying the each repository.
Item.jsx
import React from 'react';
import { Text, View, Image } from 'react-native';
const Item = ({ fullName,
description,
language,
forksCount,
stargazersCount,
ratingAverage,
ownerAvatarUrl,
reviewCount }) => (
<View>
<Text>Full name: {fullName}</Text>
<Text>Description: {description}</Text>
<Text>Language: {language}</Text>
<Text>Stars: {stargazersCount}</Text>
<Text>Forks: {forksCount}</Text>
<Text>Reviews: {reviewCount}</Text>
<Text>Rating: {ratingAverage}</Text>
<Image source={{ uri: ownerAvatarUrl }} />
</View>
);
const RepositoryItem = ({ item }) => {
return (
<View>
<Image ownerAvatarUrl={item.ownerAvatarUrl} />
<Item
fullName={item.fullName}
description={item.description}
language={item.language}
stargazersCount={item.stargazersCount}
forksCount={item.forksCount}
reviewCount={item.reviewCount}
ratingAverage={item.ratingAverage}
/>
</View>
);
};
export default RepositoryItem;
Thanks for your help
I solve it by making these changes, First I added style to make make the image smaller and some changes. this is the Item.jsx file now.
import React from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
tinyLogo: {
width: 50,
height: 50,
}
});
const Item = ({ fullName,
description,
language,
forksCount,
stargazersCount,
ratingAverage,
ownerAvatarUrl,
reviewCount }) => (
<View>
<Image
style={styles.tinyLogo}
source={{
uri: ownerAvatarUrl,
}}
/>
<Text>Full name: {fullName}</Text>
<Text>Description: {description}</Text>
<Text>Language: {language}</Text>
<Text>Stars: {stargazersCount}</Text>
<Text>Forks: {forksCount}</Text>
<Text>Reviews: {reviewCount}</Text>
<Text>Rating: {ratingAverage}</Text>
</View>
);
const RepositoryItem = ({ item }) => {
return (
<View>
{/* <Image ownerAvatarUrl={item.ownerAvatarUrl} /> */}
<Item
fullName={item.fullName}
description={item.description}
language={item.language}
stargazersCount={item.stargazersCount}
forksCount={item.forksCount}
reviewCount={item.reviewCount}
ratingAverage={item.ratingAverage}
ownerAvatarUrl={item.ownerAvatarUrl}
/>
</View>
);
};
export default RepositoryItem;
I am trying to build facebook signIN in functional component and facing below error:
ERROR - Objects are not valid as a React child (found: object with keys {data}). If you meant to render a collection of children, use an array instead.
Following is code snippet:
import React, { Fragment, useEffect, useState } from 'react';
import {SafeAreaView, ScrollView, StatusBar, StyleSheet,Text, TouchableOpacity, View,Image,Button}
from 'react-native';
import { AccessToken, LoginButton } from 'react-native-fbsdk';
const App = () => {
const [loggedIn, setLoggedIn] = useState(false);
const [fbUserInfo, setFbUserInfo] = useState({data: ''});
return (
<Fragment>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<View style={styles.body}>
<View style={styles.sectionContainer}>
<LoginButton
onLoginFinished={(error, result) => {
if (error) {
console.log('login has error: ' + result.error);
} else if (result.isCancelled) {
console.log('login is cancelled.');
} else {
console.log(result);
AccessToken.getCurrentAccessToken().then((data) => {
//setLoggedIn(true);
setFbUserInfo(data.userID);
console.log("Login", data, data.accessToken.toString());
});
}
}}
onLogoutFinished={() => {
//setLoggedIn(false);
setFbUserInfo({data:''});
}}
/>
</View>
<View style={styles.buttonContainer}>
{!loggedIn && (
<Text>You are currently logged out</Text>
)}
</View>
{(
<View>
<View style={styles.listHeader}>
<Text>User Info</Text>
</View>
<View style={styles.detailContainer}>
<Text style={styles.title}>ID</Text>
<Text style={styles.message}>{fbUserInfo}</Text>
</View>
</View>
)}
</View>
</ScrollView>
</SafeAreaView>
</Fragment>
);
};
export default App;
Please help me to resolve an issue, thanks
Try this
AccessToken.getCurrentAccessToken().then((data) => {
const { accessToken } = data;
fetch('https://graph.facebook.com/v2.5/me?fields=email,name,friends&access_token=' + accessToken)
.then((response) => response.json())
.then((json) => {
// Some user object has been set up somewhere, build that user here
const userID = json.id;
//setLoggedIn(true);
setFbUserInfo({data: userID});
})
.catch(() => {
reject('ERROR GETTING DATA FROM FACEBOOK')
});
});
I resolved it by using this;
const [fbUserInfo, setFbUserInfo] = useState('');
onLogoutFinished={() => {
setLoggedIn(false);
setFbUserInfo('');
}}
i have my app like this : https://i.gyazo.com/4cfe178d3a59bf4e7449a7aacd0f114e.png
It is a app for play to a drinking game :p. I want to save all of input already the four input and before and after the fields that the user has added
import React, { Component } from 'react';
import {
View,
Text,
Button,
ScrollView,
TextInput,
TouchableOpacity,
StatusBar
} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import { style } from './style';
class Form extends Component {
constructor(props) {
super(props);
StatusBar.setBarStyle('light-content', true);
console.log(this.props);
state = {
users: [{
id:1,
prenom:''
}, {
id:2,
prenom:''
}, {
id:3,
prenom:''
}, {
id:4,
prenom:''
}]
}
}
saveUser = value => {
console.log('test');
};
showInput() {
return state.users.map((item) => {
console.log(item);
return (
<TextInput
key={item.id}
style={style.input}
placeholder={`Prénom ${item.id}`}
placeholderTextColor="#29235c"
/>
);
});
}
render() {
return this.props.fontLoaded ? (
<View style={style.bgWhite}>
<ScrollView>
{
this.showInput()
}
<View style={style.morePlayer}>
<Text style={style.morePlayerText}>+</Text>
</View>
</ScrollView>
<View style={style.center}>
<TouchableOpacity
activeOpacity={0.9}
onPress={() => this.props.navigation.navigate('Game')}
style={style.btnPlay}
>
<Text style={style.textPlay}>ON TEASE!</Text>
</TouchableOpacity>
<Button title="Go to Details" onPress={() => this.props.navigation.navigate('Game')} />
</View>
</View>
) : null;
}
}
export default Form;
Should I save this in the asyncstorage ? I want to pass the all value of input in the params to go in other screen.
Thanks,
If you just need to pass the params to another screen you can just pass an object as the second argument of navigate.
this.props.navigation.navigate('Game', {
users: this.state.users,
otherParam: 'anything you want here',
});