I'm trying to inject a splash screen image on to my app but I keep getting error message: RangeError: Maximum call stack size exceeded Project is react-native-cli, could that be the issue?
import React, { Component } from 'react';
import { Image, View } from 'react-native';
import { inject } from 'mobx-react';
#inject("stores")
export default class SplashScreen extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
const { stores, navigation } = this.props;
setTimeout (() => {
navigation.navigate("Login")
}, stores.config.SplashTime)
}
render() {
const { stores } = this.props
return (
<View style={{flex: 1}}>
<Image style={{flex: 1, width: null, height: null}} source={stores.config.SplashIMG}/>
</View>
)
}
}
Changed img link to require and amended component to DidUpdate.
componentDidUpdate() {
const { stores, navigation } = this.props;
console.log(this.props)
setTimeout (() => {
navigation.navigate("Login")
}, stores.config.SplashTime)
}
render() {
const { stores } = this.props
return (
<View style={{flex: 1}}>
<Image style={{flex: 1, width: null, height: null}} source={require('../../images/splash.jpg')}/>
</View>)
}
}```
Related
i want to pass data from this screen (Lihat.js)
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { style } from './Style';
class Lihat extends Component {
constructor(props) {
super(props);
this.state = {
nama:'',
nim:'',
prodi:'',
no_telp:'',
alamat:'',
listData:[],
};
this.url = "http://192.168.100.161/mhs/mhs.php"
// this.url = "http://192.168.162.248/mhs/mhs.php"
}
componentDidMount(){
this.ambilListData()
}
async ambilListData(){
await fetch(this.url)
.then((response)=>response.json())
.then((json)=>{
console.log("hasil :"+JSON.stringify(json.data.result))
this.setState({listData:json.data.result})
})
.catch((error)=>{
console.log(error);
})
}
async klikDelete(id){
await fetch(this.url+"/?op=delete&id="+id)
.then((response)=>response.json())
.then((json)=>{
alert('Data berhasil didelete');
this.ambilListData();
})
.catch((error)=>{
console.log(error)
})
}
render() {
return (
<View style={style.lihatWrapper}>
<View style={style.viewData}>
{
this.state.listData.map((val,index)=>(
<View style={style.viewList} key={index}>
<Text style={style.textListNama}>Nama :{val.nama}</Text>
<View style={{flexDirection:'column'}}>
{/* i want to pass data from this button / link */}
<Text style={style.textListLihat} onPress={()=>this.props.navigation.navigate('Detail',{id:this.state.listData.map()})}>Detail</Text>
<Text style={style.textListEdit} onPress={()=>this.props.navigation.navigate('Update')}>Edit</Text>
<Text style={style.textListDelete} onPress={()=>this.klikDelete(val.id)}>Delete</Text>
</View>
</View>
))
}
</View>
</View>
);
}
}
export default Lihat;
to this screen (Detail.js)
import { TabRouter, validatePathConfig } from '#react-navigation/native';
import React, { Component } from 'react';
import { View, Text, FlatList, SafeAreaView} from 'react-native';
import { style } from './Style';
import Lihat from './Lihat';
class Detail extends Component {
route
constructor(props) {
super(props);
this.state = {
nama:'',
nim:'',
prodi:'',
no_telp:'',
alamat:'',
listData:[]
};
this.url = "https://192.168.100.161/mhs/mhs.php"
// this.url = "http://192.168.162.248/mhs/mhs.php"
}
componentDidMount(){
this.ambilListData()
}
async ambilListData(){
await fetch(this.url)
.then((response)=>response.json())
.then((json)=>{
console.log("hasil: "+json.data.result)
this.setState({listData:json.data.result})
})
.catch((error)=>{
console.log(error);
})
}
render() {
return (
<View style={style.viewWrapper}>
<Text style={style.content}>
{
this.state.listData.map((val,index)=>(
<View style={style.viewList} key={index}>
<Text style={style.textListNama}></Text>
<Text style={style.textListNama}></Text>
</View>
))
}
</Text>
</View>
);
}
}
export default Detail;
so when i press 'detail', the screen will navigate to detail.js and display the data detail.
Lihat.js
enter image description here
Thanks
i already read react native passing data tutorial. but i cant understand it. and when i search on youtube mostly the tutorial is using axios.
move the data to the parent component and handle it and from there,
from there you can access that data in both the components
lifting the state up
You can try this way:
<Text style={style.textListLihat} onPress={()=>this.props.navigation.navigate('Detail',{listData: this.state.listData})}>Detail</Text>
and setting the value passed in the state of Detail:
this.state = {
nama: '',
nim: '',
prodi: '',
no_telp: '',
alamat: '',
listData: this.props.route.params.listData || [],
};
I am trying to implement a code that tests the internet connectivity using react native NetInfo from '#react-native-community/netinfo'. It is giving me an error that says "Can't find variable: connectionStatus". I tried my best declare properly but for some reason it is giving the error above.
import React, { Component } from 'react'
import NetInfo from '#react-native-community/netinfo';
import { ActivityIndicator, StyleSheet,View, Text } from 'react-native'
import { WebView } from 'react-native-webview';
export default class BrowserScreen extends Component {
constructor(props) {
super(props);
this.state = {
connectionStatus: false,
}
}
componentDidMount() {
const {navigation} = this.props;
this.focusListener = navigation.addListener('didFocus', () => {
this.checkConnected();
})
}
async checkConnected() {
const networkState = await NetInfo.fetch();
if (networkState.isConnected) {
this.setState({ connectionStatus: true });
}
}
LoadingIndicatorView() {
return <ActivityIndicator
color='#009b88'
size='large'
style={styles.ActivityIndicatorStyle}
/>
}
render() {
let url = this.props.navigation.getParam('webUrl');
console.log(url) ;
return (
/**
* use the webview here to display the webpage
*/
connectionStatus ? (
<WebView
source={{ uri: url }}
renderLoading={this.LoadingIndicatorView}
startInLoadingState={true}
/>
) :
(
<View>
<Text> No Connection !!!!</Text>
</View>)
)
}
}
const styles = StyleSheet.create({
ActivityIndicatorStyle: {
flex: 1,
justifyContent: 'center'
}
})
connectionStatus is stored in state, refer to it as this.state.connectionStatus
I created a simple app, that shows a few pictures with titles. It is something like a film gallery, where you can observe all enable films. But when I try to add ScrollView element it doesn't work when I try to scroll on my emulated Android device. How can I fix it? My code looks like this:
import React, { Component } from 'react'
import { View, ScrollView, StyleSheet } from 'react-native'
import { Header, ImageCard } from './src/components/uikit'
const url = 'https://s3.eu-central-1.wasabisys.com/ghashtag/RNForKids/00-Init/data.json'
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
title: 'STAR GATE',
data: []
};
}
componentDidMount = async () => {
try {
const response = await fetch(url)
const data = await response.json()
this.setState({ data })
}
catch (e) {
console.log(e)
throw e
}
}
render() {
const { title, data } = this.state
const { container } = style
return (
<View>
<Header title={title} />
<ScrollView>
<View style={container}>
{
data.map(item => {
return <ImageCard data={item} key={item.id} />
})
}
</View>
</ScrollView>
</View>
)
}
}
const style = StyleSheet.create({
container: {
marginTop: 30,
flexDirection: 'row',
flexWrap: 'wrap',
flexShrink: 2,
justifyContent: 'space-around',
marginBottom: 150
}
})
I made it with a guide, so it should work. (Youtubes author hasn't this problem on his video).
The View inside ScrollView looks problematic. Try something like:
<ScrollView contentContainerStyle={container} >
{
data.map(item => {
return <ImageCard data={item} key={item.id} />
})
}
</ScrollView>
I'm struggling to get react-native-svg animate in React Native. I also tried the method they suggest with react-native-svg-transformation but it didn't suit my case since I'm working with many files and render them dynamically.
Here's my render file:
import React from "react";
import { View, Text } from "react-native";
import { SvgXml } from "react-native-svg";
import SvgAssets from "../resources/SvgAssets";
import AssetsHelper from "../common/AssetsHelper";
class ChineseCharacter extends React.Component {
constructor(props) {
super(props);
this.state = {
xmlData: "",
};
}
render() {
const { xmlData, file } = this.state;
if (xmlData.length === 0) {
return <View />;
}
return (
<View style={{ flex: 1 }}>
<SvgXml xml={xmlData} width="200" height="200" />
</View>
);
}
componentDidMount(): void {
const { character } = this.props;
const characterUnicode = character.charCodeAt(0);
const file = SvgAssets[characterUnicode.toString()];
AssetsHelper(file)
.then(result => {
this.setState({
xmlData: result,
});
})
.catch(err => console.log(err));
}
}
export default ChineseCharacter;
AssetsHelper is basically reading the svg file and convert them to string in order to pass to SvgXml.
SvgAssets is an object with key as the charCode and value is the file, something like this:
const assets = {
"11904": require("./svgs/11904.svg"),
...
}
Thank in advance.
After few struggling hours, I have found a work around for this problem. I don't use react-native-svg anymore, instead I parse the .svg file to string and put it in react-native-webview. Work like a charm!
render() {
// #ts-ignore
const { xmlData, file } = this.state;
if (xmlData.length === 0) {
return <View />;
}
return (
<View style={{ width: 300, height: 300 }}>
<WebView
source={{ html: xmlData }}
style={{ backgroundColor: "transparent", width: 300, height: 300 }}
/>
</View>
);
}
Try to import the svg files inside ChineseCharacter class.
import svgXml11904 from './svgs/11904.svg'
const assets = {
"11904": svgXml11904,
...
}
I'm very new to react-native. I'm currently experimenting with it to figure out how I can use it in different ways. Presently, I'm trying to call props of a specifically tapped object and send them to an output box.
So when you tap 'Alan' or 'Steve' their name will appear in the red box.
I'd also like for the dark blue backkground to change to dark red once it's tapped?
I have had a good read of the docs, but I reckon I'm not getting it because it's new to me. I know that I don't seem to be able to access the props of Component which is obviously the class Obj extends
Guidance greatly appreciated.
import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import style from './style';
class Obj extends Component {
render(){
return(
<TouchableOpacity
onPressIn={() => this.setState({tapped: true, tappedName: this.props.plrName})}
onPressOut={() => this.setState({tapped: false, tappedName: null})}>
<View style={[style.playerobject, style.shadow]}>
<Text style={[style.plrobjText]}>{this.props.plrName}</Text>
</View>
</TouchableOpacity>
)
}
}
export default class App extends Component {
constructor(props){
super(props);
this.state = {
tapped: false,
tappedName: null,
};
}
render() {
return (
<View style={[style.main]}>
<View style={[style.container, this.state.tapped ? {backgroundColor:'darkred'} : {backgroundColor:'darkblue'} ]}>
<Obj plrName='Alan' />
<Obj plrName='Steve' />
</View>
<View style={style.box }><Text>|{this.state.tapped ? this.state.tappedName : 'x'}|</Text></View>
</View>
);
}
}
import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import style from './style';
class Obj extends Component {
onPressIn = () => {
this.props.onPressIn(this.props.plrName)
}
onPressOut = () => {
this.props.onPressOut()
}
render() {
return (
<TouchableOpacity
onPressIn={this.onPressIn}
onPressOut={this.onPressOut}>
<View style={[style.playerobject, style.shadow]}>
<Text style={[style.plrobjText]}>{this.props.plrName}</Text>
</View>
</TouchableOpacity>
)
}
}
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
tapped: false,
tappedName: null,
};
}
onPressIn = (tappedName) => {
this.setState({ tapped: true, tappedName })
}
onPressOut = () => {
this.setState({ tapped: false, tappedName: null })
}
render() {
return (
<View style={[style.main]}>
<View style={[style.container, this.state.tapped ? { backgroundColor: 'darkred' } : { backgroundColor: 'darkblue' }]}>
<Obj plrName='Alan' onPressIn={this.onPressIn} onPressOut={this.onPressOut} />
<Obj plrName='Steve' onPressIn={this.onPressIn} onPressOut={this.onPressOut} />
</View>
<View style={style.box}><Text>|{this.state.tapped ? this.state.tappedName : 'x'}|</Text></View>
</View>
);
}
}