I followed all instructions to install #tensorflow/tfjs-react-native given at
https://www.npmjs.com/package/#tensorflow/tfjs-react-native/v/0.3.0
this is my app.js file:
import React, { useState, useEffect } from 'react';
import * as tf from '#tensorflow/tfjs';
import '#tensorflow/tfjs-react-native';
import {
SafeAreaView,
StatusBar,
StyleSheet,
Text,
View,
} from 'react-native';
export default () => {
const [ready, setReady] = useState(false)
useEffect(() => {
const load = async () => {
await tf.ready()
setReady(true)
}
load()
})
return (
<SafeAreaView style={{ backgroundColor: '#fff', flex: 1 }}>
<StatusBar barStyle={'dark-content'} />
<View>
<Text>hello</Text>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
});
App crashes when tf.ready() is called. no error is logged in console.
If i comment tf.ready() everything works fine. am i doing something wrong?
This is my package.json file
image of package.json file
How do i test if this package is installed correctly?
any help from your side will be appreciated.
I had this issue when running my app with expo on an android device, what solved it for me was setting the backend with :
await tf.setBackend('cpu');
before
tf.ready();
It might solve your problem as well
Related
I get this error after using React-native-markdown-display package and I don't understand why...
I have only strings in my content database, so it seem's to be something else.
This is the full error:
folow the link to see the error
And my code bellow :
//Libraries
import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
import React, { useState } from 'react';
import Colors from '../constants/Colors';
import GoBackButton from '../components/GoBackButton';
import { useEffect } from 'react';
import Markdown from 'react-native-markdown-display';
const PostsDetails = ({ navigation, route }) => {
const [post, setPost] = useState({});
const [services, setServices] = useState([]);
useEffect(() => {
let { selectedPost } = route.params;
setPost(selectedPost);
setServices(selectedPost.services);
}, []);
console.log(services);
return (
<View style={styles.container}>
<SafeAreaView style={{ flex: 1 }}>
<ScrollView showsVerticalScrollIndicator={false}>
<GoBackButton onPress={() => navigation.goBack()} />
<Text>{post.title}</Text>
<Text>{post.region}</Text>
<Text>{post.category}</Text>
<Text>{post.id}</Text>
<Markdown>{post.content}</Markdown>
<Text>{post.itinerary}</Text>
<Text>{post.lat}</Text>
<Text>{post.lon}</Text>
<Text>{post.price}</Text>
<Text>{post.link}</Text>
{services.map((service, index) => {
return <Text key={index}>{service.attributes.name}</Text>;
})}
</ScrollView>
</SafeAreaView>
</View>
);
};
export default PostsDetails;
I didn't find any similar error in stackOverflow.
Thanks
I was using Docusaurus when I encountered this error using markdown-it. The issue was that Docusaurus has built-in MDX support and the module was picking up my markdown files, processed them to JDX before they were loaded into my code and that is when the type error occured. I resolved this by simply storing my markdown in .txt files, so the module ignores them and they can be loaded as simple strings.
It works very normally when I use React Hooks or when I use react-native's Component, Hooks.
But when I call a function or Component from external packages such as Axios from my code, the app seems to be broken in that state. (or an empty screen)
I used react-native-cli.
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow strict-local
*/
import React, {useState, useEffect} from 'react';
import type {Node} from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
Text,
useColorScheme,
View,
Center,
} from 'react-native';
import Axios from 'axios';
import {
Colors,
Header,
} from 'react-native/Libraries/NewAppScreen';
const App: () => Node = () => {
const isDarkMode = useColorScheme() === 'dark';
const [text, setText] = useState("");
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
useEffect(() => {
const fetch = async () => {
const {data} = await Axios.get(...); // broken
setText(data.result);
};
fetch();
}, []);
return (
<SafeAreaView style={backgroundStyle}>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
<Header />
<View
style={{
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
<Text>{text}</Text>
{/*
this Text Component is still empty.
*/}
</View>
</ScrollView>
</SafeAreaView>
);
};
export default App;
How can I solve this problem?
import React, {useEffect, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import * as Font from 'expo-font';
export default function App() {
const [isFontReady,
setFontReady] = useState(false)
useEffect(() => {
async function loadFont() {
return await Font.loadAsync({sans: require('./assets/fonts/sans.ttf')});
}
loadFont().then(() => {
setFontReady(true)
});
}, []);
return (
<View>
{isFontReady && <Text style={{
fontFamily: 'sans'
}}>
Silence is Golden.
</Text>}
</View>
);
}
Drives me crazy; I can't find the reason why fontFamily style ex: Tahoma has got no effect on a font?
The code looks OK and I even restarted the project by typing >'expo start -c' and reinstalled the packages but no change!
Im very new to react-native and expo.
I can't solve this problem myself.
My previous code was this.
import React, {Component} from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import firebase from 'firebase';
export default class Home extends React.Component {
handleSignOut = () => {
firebase
.auth()
.signOut()
.then(result => alert('sign out success'))
.catch(error => console.error(error));
};
render() {
return (
<View style={styles.container}>
<Text>Main</Text>
<TouchableOpacity onPress={this.handleSignOut}>
<Text>Sign Out</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
Then I just changed the text 'Main' to 'Home' and saved.
After that expo client was reloaded but nothing changed :(
I would appreciate it if you could give me any advices!
Not sure which version of Expo you're using (expo --version), but I spun off a quick Expo project, copy pasted your code (minus the Firebase parts) and it works seamlessly.
Maybe try closing and reopening your emulator/simulator.
I'm using Expo React Native to develop a mobile application with the help of Redux, as well as React-Redux. With the React-Redux v6.0, I can connect the components with no issues, but I cannot get the state from the store with v6.0, although with Logger Middleware, my state is already updated. I cannot use it after extract it with mapStateToProps. So I decided to update React-Redux to v7.0 with the hope that the issues will be solved but I met a new one (Image below).
Issue Screen
This is my App.js
import React from 'react';
import { Platform, StyleSheet, Text, View} from 'react-native';
import {Provider} from 'react-redux';
import store from './src/redux/configureStore';
import LocationShow from './src/components/LocationShow';
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<View style={styles.container}>
<LocationShow />
</View>
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is my LocationShow.js
import React from 'react';
import {View, Text, StyleSheet, ActivityIndicator} from 'react-native';
import {Location, Permissions, Constants} from 'expo';
import {connect} from 'react-redux';
import {Platform} from 'expo-core';
import * as locationActions from '../redux/actions/locationActions';
class LocationShow extends React.Component {
componentDidMount = async () =>{
if (Platform.OS === 'android' && !Constants.isDevice){
console.log('Switch to the real device dawg!')
}else{
await this.props.getCurrentLocation();
}
}
render(){
return(
<View>
{this.props.isLoading ?
<ActivityIndicator/>:
<View>
<Text>Latitude:{this.props.latitude}</Text>
<Text>Longitude:{this.props.longitude}</Text>
</View>
}
</View>
)
}
}
const mapStateToProps = (state) =>{
return{
latitude: state.latitude,
longitude: state.longitude,
error: state.error,
isLoading: state.isLoading
}
}
const mapDispatchToProps = (dispatch) =>{
return {
getCurrentLocation: () =>
dispatch(locationActions.getCurrentLocation())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(LocationShow);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});
I read the changes of v7.0 with the connect() but Im quite new to React so I cannot get the idea of it.
Note: connect now uses React.memo() internally, which returns a special object rather than a function. Any code that assumed React components are only functions is wrong, and has been wrong since the release of React 16.6. If you were using PropTypes to check for valid component types, you should change from PropTypes.func to PropTypes.elementType instead.
Im running React:v16.8.6, React-Native:0.57.1, React-Redux: v7.0.2, Redux:v4.0.1
Hope someone can help me out, sorry if the code is too bad, as I said above, I'm quite new to React Native and Redux or other stuff.
Thank you!
After considering, I decied to go back to version 6.0.1 of react-redux. Now everything works like a champ. This thread can be closed right now.
By the way, the problem exactly comes from the new connect(), cause the react-redux team uses React.memo() and Hooks. But I still do not understand why it is the problem so if anyone has an idea about the changes of version 7.0.2 with the new connect(), feel free to explain.
Thank you guys!