I'm working on a react native app that uses a timer component I made, the code for it is:
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
import styles from '../styles/style';
export default class Timer extends Component<{}> {
constructor(props) {
super();
this.state = {
time: 10,
timerStarted: false
}
}
startTimer() {
this.interval = setInterval(() => {
this.setState({
isFirstRender: !this.state.isFirstRender,
time: this.state.time-1,
isTimerRunning: true
});
}, 1000);
}
render() {
if (!this.state.isTimerRunning)
this.startTimer();
return (
<View style={styles.scoreBoard}>
<Text style={styles.timerText}>Time: {this.state.time}</Text>
</View>
);
}
}
This component has a state value, time, that counts down from 10, decrementing each second. When the timer reaches zero, I need it to somehow notify the component that called it when the timer is done. In my program my main js file is App.js, which calls my timer in its render function like this:
render () {
return (
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{flex: 1}}>
{/*This below is the component I need to return a value to this main class we are in*/}
<MyTimer />
</View>
</View>
);
}
I need my Timer class to return a value, perhaps a boolean, to the main class indicating that the time is up. My best guess is that maybe I can send a member function of my main class to the Timer class as a prop, but I'm not sure if that's how this works. I've tried different ways of accomplishing this, and I know that you can use props to send data to a component, but how do you retrieve data from a component? Thank you.
You pass a function from parent to child then invoke it in the child to update the parent:
onTimerEnd = () => //do something in parent
render () {
return (
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{flex: 1}}>
{/*This below is the component I need to return a value to this main class we are in*/}
<MyTimer onTimerEnd={this.onTimerEnd} />
</View>
</View>
);
}
Also I think you should start the timer in the constructor not in render, render will get called every time the component re-renders:
export default class Timer extends Component<{}> {
constructor(props) {
super();
this.state = {
time: 10,
}
this.startTimer(); //start timer
}
startTimer() {
localTime = this.state.time;
this.interval = setInterval(() => {
this.setState({
time: this.state.time-1,
}, () => {
if (this.state.time === 0) this.props.onTimerEnd() //invoke when timer hits 0
});
}, 1000);
}
render() {
return (
<View style={styles.scoreBoard}>
<Text style={styles.timerText}>Time: {this.state.time}</Text>
</View>
);
}
}
Related
I trying to build a weather app for my training and I have a issues.
I got a Type Error whatever I do. what I intended to do is get a json data from weathermap api and then
show some strings but I couldn't.
here is main content from My app
import React, { Component } from 'react';
import { View, StyleSheet, Text } from 'react-native';
class Content extends Component{
constructor(props) {
super(props);
this.state = {
data: this.props.weather.main,
};
}
render() {
return (
<View style={styles.content}>
<Text style={styles.city}>City Name</Text>
<Text style={styles.itemsize}>Weather {this.state.data}</Text>
<Text style={styles.itemsize}>Description</Text>
<Text style={styles.itemsize}>Temperature Celsius</Text>
<Text style={styles.itemsize}>Pressure</Text>
<Text style={styles.itemsize}>Humidity</Text>
</View>
);
}
}
const styles = StyleSheet.create({
content: {
flex: 1,
justifyContent: 'center',
alignItems:'center'
},
city: {
fontSize: 50,
padding: 20
},
itemsize: {
fontSize: 30,
padding: 5
}
})
export default Content;
and this is my upper component which is trying to get data and pass down.
import React, { Component } from 'react';
import Content from './Content';
import GetWeather from './GetWeather';
class Home extends Component {
constructor(props) {
super(props);
this._getData.bind(this);
this._getData();
this.state = {
data: null,
};
}
_getData = () => {
GetWeather.getWeather().then( json => {
console.log(json);
this.setState({data: json});
});
};
render() {
return (
<Content weather={this.state.data}/>
);
}
}
export default Home;
and last one is code that I wrote to get api data from openweathermap
function getLocation(lat, long) {
return `${API_STEM}lat=${lat}&lon=${long}&appid=${APP_ID}`;
}
function getWeather() {
return fetch(getLocation(LATTITUDE,LONGGITUDE))
.then(response => response.json())
.then(responseJson => {
return { main: responseJson.weather[0].main};})
.catch(err =>console.log(err));
}
export default {getWeather: getWeather};
In your parent component, state never gets data and always remains null. When we want to fetch data from an API, we should use a react lifecycle method called componentDidMount(). So in your parent component, you should either call your _getdata function in componentDidMount or fetch your data in the lifecycle method, like below code which is a better way in my opinion. Also, never initially set your state to null. set it to an empty object.
import React, { Component } from 'react';
import Content from './Content';
import GetWeather from './GetWeather';
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: {},
};
}
componentDidMount() {
GetWeather.getWeather().then( json => {
console.log(json);
this.setState({data: json});
});
}
render() {
console.log(this.state.data);
return (
<Content weather={this.state.data}/>
);
}
}
export default App
and then in your child component, you should either use one of updating lifecycle methods (that has risks) or you can change your child component to functional component, for you don't need state.
import React, { Component } from 'react';
import { View, StyleSheet, Text } from 'react-native';
function Content(props) {
return (
<View style={styles.content}>
<Text style={styles.city}>City Name</Text>
<Text style={styles.itemsize}>Weather {props.weather.main}</Text>
<Text style={styles.itemsize}>Description</Text>
<Text style={styles.itemsize}>Temperature Celsius</Text>
<Text style={styles.itemsize}>Pressure</Text>
<Text style={styles.itemsize}>Humidity</Text>
</View>
)
}
const styles = StyleSheet.create({
content: {
flex: 1,
justifyContent: 'center',
alignItems:'center'
},
city: {
fontSize: 50,
padding: 20
},
itemsize: {
fontSize: 30,
padding: 5
}
})
export default Content;
The main problem is that this.state.data in the Home component is set after the Content component is created (after its constructor function is called).
This will generate a TypeError because this.props.weather is undefined and you are trying to access a property this.props.weather.main.
The easiest way to solve this will be to use the props object directly instead of adding those props to the state, here is an example:
<Text style={styles.itemsize}>Weather {this.props.weather}</Text>
Before the request finishes you already set this.state.data inside Content to null and it will not get updated when the component re-renders because the constructor only runs once on mount.
Setting state from props is an anti pattern and should be used only in rare situations.
Instead, read the weather data from this.props which will get updated once the parent component updates his state
You would also need to check if this.props.weather is null before you access .main inside this.props.weather
class Content extends Component {
render() {
const { weather } = this.props
return (
<View style={styles.content}>
<Text style={styles.city}>City Name</Text>
<Text style={styles.itemsize}>
Weather {weather ? weather.main : null}
</Text>
<Text style={styles.itemsize}>Description</Text>
<Text style={styles.itemsize}>Temperature Celsius</Text>
<Text style={styles.itemsize}>Pressure</Text>
<Text style={styles.itemsize}>Humidity</Text>
</View>
)
}
}
I have a component and import it in specific screen, in this screen i have a button when clicks i open modal contain component it's a "recorder" so after i record voices i want to take this voice and save them into Parent screen as a state or something!
in the recorder component, I save voices data into state! but how can i pass it to other parent screens!?
so how can I handle it?
here is shots
Parent Screen "after click add voice I show the modal"
Parent Screen
Here's a modal contain a recorder component
Modal
CODE
Component
" I pass data to PassDataToModal state inside componentDidMount "
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {AudioRecorder, AudioUtils} from 'react-native-audio';
import Sound from 'react-native-sound';
import Icon from 'react-native-vector-icons/MaterialIcons';
class RecorderScreen extends Component {
state = {
PassDataToModal: null,
};
componentDidMount() {
AudioRecorder.requestAuthorization().then(isAuthorised => {
this.setState({hasPermission: isAuthorised});
AudioRecorder.onFinished = data => {
console.log('data', JSON.stringify(data));
this.setState({PassDataToModal: data});
};
});
}
render() {
return (
<View style={styles.container}>
<View style={styles.controls}>
{this._renderPlayButton(() => {
this._play();
})}
{this._renderRecordButton(this.state.recording)}
{this._renderStopButton('Stop', () => {
this._stop().then(() => this.setState({currentTime: 0}));
})}
</View>
<Text style={styles.progressText}>{this.state.currentTime}s</Text>
</View>
);
}
}
export default RecorderScreen;
Parent Screen
import Modal from 'react-native-modal';
import RecorderScreen from './Recorder';
class Order extends Component {
constructor(props) {
super(props);
this.state = {
isModalVisible: false,
};
}
toggleModal = () => {
this.setState({isModalVisible: !this.state.isModalVisible});
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={this.toggleModal}
>
<Icon name="mic" color="#333" size={20} />
<Text style={{paddingHorizontal: 5}}>Add Voice</Text>
</TouchableOpacity>
<Modal
style={{margin: 0}}
isVisible={this.state.isModalVisible}
>
<View>
<TouchableOpacity onPress={this.toggleModal}>
<Icon name="close" color="#000" size={25} />
</TouchableOpacity>
<RecorderScreen /> // Component
</View>
</View>
)
}
}
In your parent component pass a function to your RecorderScreen component that will send the necessary data up. Docs on lifting state up.
So in your parent you'd have something like:
setData = (data) => {
// Set this to whatever you need it to be named
this.setState({childData: data});
}
Then pass the function as a prop:
<RecorderScreen setData={this.setData} />
And finally, call it in the child however needed (If I'm following the code something like this):
componentDidMount() {
AudioRecorder.requestAuthorization().then(isAuthorised => {
this.setState({hasPermission: isAuthorised});
AudioRecorder.onFinished = data => {
this.props.setData(data);
};
});
}
Then your parent component will have access to the child's data that you have lifted up.
I am trying to conditionally display either a Home or Slider component in the screen below, but when the onDone function runs, i am getting the error:
Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
Please check the code for the Onboarding component.
The Onboarding component is inside the Slider (react-native-onboarding-swiper - used for app intro)...
export default class HomeScreen extends Component {
static navigationOptions = {
headerStyle: {
backgroundColor: 'skyblue',
elevation: 0,
borderBottomWidth: 0,
},
headerLeft: null,
};
state = {
introLoaded: false,
};
async componentDidMount() {
const value = await AsyncStorage.getItem('#SKIP_INTRO');
if (value !== null) {
this.onDone();
}
};
onDone = async () => {
await this.setState({ introLoaded: true });
};
render() {
return this.state.introLoaded ? (
<Home navigation={this.props.navigation} />
) : (
<Slider onDone={this.onDone} />
);
}
}
Any help appreciated...
Slider.js
import React from 'react';
import { Image, Text } from 'react-native';
import PropTypes from 'prop-types';
import Onboarding from 'react-native-onboarding-swiper';
import styles from './styles';
const Slider = ({ onDone }) => (
<Onboarding
pages={[
{
backgroundColor: 'skyblue',
image: (
<Image source={require('../../assets/images/intro/pic1.png')} style={styles.image} />
),
title: <Text style={styles.title}>Title 1</Text>,
subtitle: <Text style={styles.subtitle}>Subtitle 1</Text>,
},
{
backgroundColor: 'skyblue',
image: (
<Image source={require('../../assets/images/intro/pic2.png')} style={styles.image} />
),
title: <Text style={styles.title}>Title 2</Text>,
subtitle: <Text style={styles.subtitle}>Subtitle 2</Text>,
},
]}
onDone={onDone}
/>
);
Slider.propTypes = {
onDone: PropTypes.func.isRequired,
};
export default Slider;
First setState is not an asynchronous method. For more information read here.
Second in your approach HomeScreen is calling method onDone inside componentDidMount lifecycle method as the component mounted it will automatically unload Slider and just show error as you are changing state.
So, instead of using Onboarding inside stateless component use it inside state component and use it in the Welcome Screen (the screen where user is not logged in and see for first time). Once user logged in just navigate to the other screen so this welcome screen will not be visible to user again.
let me know if you need more information.
I'm trying to create a simple stopwatch timer in React Native and I've created a new component called Chrono to handle the clock data(hours, minutes, etc.)
I'm triggering the clock count up on a button press in the following code:
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, AppRegistry, StyleSheet, Alert } from 'react-native';
import Chrono from './app/Chrono.js';
export default class morphX extends Component {
constructor(props) {
super(props)
this.state = {
randomCounter: 0
}
this.chrono = null
}
onItemPressed = () => {
this.chrono.startTimer()
}
updateRandomCounter = () => {
this.setState({
randomCounter: this.state.randomCounter + 1
})
}
clearCounter = () => {
this.setState({
randomCounter: 0
})
}
render() {
return (
<View style={styles.mainWrapper}>
<View style={styles.upperWrapper}>
<Chrono ref = { r => this.chrono = r} />
</View>
<View style={styles.bottomWrapper}>
<View style={styles.initialButtons}>
<TouchableOpacity
style={styles.touchableButton}
text="Let's Start!"
onPress={() => this.onItemPressed()}>
<Text style={styles.buttonTexts}>
Count Up!
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.touchableButton}
title="RESET!"
onPress={() => this.clearCounter()}>
<Text style={styles.buttonTexts}>
Reset!
</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
AppRegistry.registerComponent('morphX', () => morphX);
and the startTimer is implemented in the Chrono.js component here:
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, AppRegistry, StyleSheet, Alert } from 'react-native';
class Chrono extends Component {
constructor(props) {
super(props)
this.state = {
hours: 0,
minutes: 0,
seconds: 0
}
}
// Chronometer start function
startTimer = () => {
console.log(this)
this.setTimeout(function() {
console.log('HeY!')
this.setState({
seconds: 1
})
}, 1000);
}
// Chronometer pause function
pauseTimer = () => {
}
// Chronometer reset function
resetTimer = () => {
}
render() {
return (
<View style={styles.clockWrapper}>
<Text style={styles.hourWrapper}>
{this.state.hours}
</Text>
<Text style={styles.colonWrapper}>
:
</Text>
<Text style={styles.minuteWrapper}>
{this.state.minutes}
</Text>
<Text style={styles.colonWrapper}>
:
</Text>
<Text style={styles.secondsWrapper}>
{this.state.seconds}
</Text>
</View>
)
}
}
export default Chrono
I'm facing the error
this.setTimeout is not a function
on the line where I'm calling the setTimeout for some reason. Why?
TimerMixin is not included with the default react-native. You have to install it yourself and then you can use this.setTimeout. Check here for detailed information.
This library does not ship with React Native - in order to use it on
your project, you will need to install it with
npm i react-timer-mixin --save
from your project directory.
Keep in mind that if you use ES6 classes for your React components
there is no built-in API for mixins. To use TimerMixin with ES6
classes, we recommend react-mixin.
I'm used setTimeout() without including react-timer-mixin, and its working fine in my application.
componentDidMount() {
const a = setTimeout(() => {
// do some stuff here
}, 100);
}
setTimeout() is global and actually window.setTimeout() in a browser, in React Native window is implied for global functions that use it. so this.setTimeout() should actually be just setTimeout().
Additionally see setTimeout in React Native that the callback function inside the setTimeout() changes the scope of "this"
Suppose I have a simple React Native app like so:
'use strict';
var React = require('react-native');
var {
AppRegistry,
Text,
TouchableHighlight,
View,
} = React;
var ReactProject = React.createClass({
_onPressOut: function() {
// What do we do here?
},
render() {
return (
<View>
<Text>This text should be before</Text>
<Text>This text should be after</Text>
<TouchableHighlight onPressOut={this._onPressOut}>
<Text>Tap Me</Text>
</TouchableHighlight>
</View>
);
}
});
AppRegistry.registerComponent('ReactProject', () => ReactProject);
How can I dynamically insert a component between the first and second Text tags when the TouchableHighlight is pressed?
Try creating an array and attaching it to the state. You can then push items to the array, and reset the state.
https://rnplay.org/apps/ymjNxQ
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} = React;
var index = 0
var SampleApp = React.createClass({
getInitialState(){
return { myArr: [] }
},
_onPressOut() {
let temp = index ++
this.state.myArr.push(temp)
this.setState({
myArr: this.state.myArr
})
},
render() {
let Arr = this.state.myArr.map((a, i) => {
return <View key={i} style={{ height:40, borderBottomWidth:2, borderBottomColor: '#ededed' }}><Text>{ a }</Text></View>
})
return (
<View style={styles.container}>
<Text>First</Text>
{ Arr }
<Text>Second</Text>
<TouchableHighlight style={ styles.button } onPress={ () => this._onPressOut() }>
<Text>Push</Text>
</TouchableHighlight>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
marginTop:60
},
button: {
height:60,
backgroundColor: '#ededed',
marginTop:10,
justifyContent: 'center',
alignItems: 'center'
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
I've set up a working example here.
In react or react native the way component hide/show or add/remove does not work like in android or iOS. Most of us think there would be the similar stratedgy like
View.hide = true or parentView.addSubView(childView
But the way react native work is completely different. The only way to acheive this kind of functionality is to include your component in your DOM or remove from DOM.
Here in this example I am going set the visibility of text view based on the button click.
enter image description here
The idea behind this task is the create a state variable called state having the initial value set to false when the button click event happens then it value toggles. Now we will use this state variable during the creation of component.
import renderIf from './renderIf'
class fetchsample extends Component {
constructor(){
super();
this.state ={
status:false
}
}
toggleStatus(){
this.setState({
status:!this.state.status
});
console.log('toggle button handler: '+ this.state.status);
}
render() {
return (
<View style={styles.container}>
{renderIf(this.state.status)(
<Text style={styles.welcome}>
I am dynamic text View
</Text>
)}
<TouchableHighlight onPress={()=>this.toggleStatus()}>
<Text> touchme </Text>
</TouchableHighlight>
</View>
);
}
}
the only one thing to notice in this snippet is renderIf which is actually a function which will return the component passed to it based on the boolean value passed to it.
renderIf(predicate)(element).
renderif.js
'use strict';
const isFunction = input => typeof input === 'function';
export default predicate => elemOrThunk =>
predicate ? (isFunction(elemOrThunk) ? elemOrThunk() : elemOrThunk) : null;
With React components you don't want to think of actions reaching into the DOM and inserting components - you want to think components responding to actions. Theoretically, this component is already composed and ready, it just needs to know if it should be rendered or not:
var ReactProject = React.createClass({
getInitialState() {
// our *state* dictates what the component renders
return {
show: false
};
}
_onPressOut: function() {
// update our state to indicate our "maybe" element show be shown
this.setState({show: !this.state.show});
},
maybeRenderElement() {
if (this.state.show) {
// depending on our state, our conditional component may be part of the tree
return (
<Text>Yay!</Text>
);
}
return null;
}
render() {
return (
<View>
<Text>This text should be before</Text>
{this.maybeRenderElement()}
<Text>This text should be after</Text>
<TouchableHighlight onPressOut={this._onPressOut}>
<Text>Tap Me</Text>
</TouchableHighlight>
</View>
);
}
});
I've also made a helper that makes it easy to conditionally render things, render-if
renderIf(this.state.show)(
<Text>Yay</Text>
)
ECMA6 Syntax
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity,
TouchableHighlight
} from 'react-native';
export default class fourD extends Component {
constructor(props) {
super(props);
let ele1 = (
<View key={1}>
<Text>Element {1}</Text>
<TouchableOpacity onPress={ () => this._add() }>
<Text>Add</Text>
</TouchableOpacity>
</View>
);
this.state = {
ele: [],
key: 1
}
this.state.ele.push(ele1);
}
_add(){
let key = this.state.key + 1;
let ele2 = (
<View key={key}>
<Text>Element {key}</Text>
<TouchableOpacity onPress={ () => this._add() }>
<Text>Add</Text>
</TouchableOpacity>
</View>
);
let ele = this.state.ele;
ele.push(ele2);
this.setState({ ele: ele,key : key})
}
render() {
return (
<View style={styles.container}>
<Text>This text should be before</Text>
{ this.state.ele }
<Text>This text should be after</Text>
<TouchableHighlight onPressOut={ () => this._add() }>
<Text>Tap Me</Text>
</TouchableHighlight>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
}
})