How to modify a component's property in a function? - react-native

Question

I'm trying to learn react and how to use third party components, what I'm trying to do now is to use the component that I installed from https://www.npmjs.com/package/react-native-countdown-component
objective:
The Countdown component has a "Props" called "running" which I would like to modify when I "click" on the component.
code:
the code that I'm using is just a fresh new app created using "expo init MyApp", then I've pasted in the code to import and generate the component
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<CountDown
until={60}
size={30}
//onFinish={() => alert('Finished')}
digitStyle={{backgroundColor: '#FFF'}}
digitTxtStyle={{color: '#1CC625'}}
timeToShow={['M', 'S']}
timeLabels={{m: '', s: ''}}
showSeparator={true}
onPress={() =>
{
this.setState({running:true});
}}
running={false}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
what is the correct way to modify the "running" property of the Countdown component when the component is clicked?

Answer 1

You can start using state properly. For this time I will use React Hooks, it's simpler than using the traditional functional or class components. See more
Every time state is updated, it will cause component to rerender with the new value.
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';
export default function App() {
const [isRunning, setRunning] = useState(false) //React Hooks
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<CountDown
until={60}
size={30}
//onFinish={() => alert('Finished')}
digitStyle={{backgroundColor: '#FFF'}}
digitTxtStyle={{color: '#1CC625'}}
timeToShow={['M', 'S']}
timeLabels={{m: '', s: ''}}
showSeparator={true}
//When component is pressed, updates state to true
onPress={() => { setRunning(true); }}
running={isRunning}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 2

I found another way, that requires a new class but I prefer Ian Steban Vasco's answer.
the solution that I found out was to create a new component that will hold the "state" for the Countdown component, then use the MyCountdown component in the main method instead of directly using the Countdown component
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// https://www.npmjs.com/package/react-native-countdown-component
import CountDown from 'react-native-countdown-component';
export default class MyCountdown extends React.Component{
state = {
running: false
};
handleOnPress = () =>{
this.setState({running:!this.state.running});
}
render(){
return (
<CountDown
until={60}
size={30}
//onFinish={() => alert('Finished')}
digitStyle={{backgroundColor: '#FFF'}}
digitTxtStyle={{color: '#1CC625'}}
timeToShow={['M', 'S']}
timeLabels={{m: '', s: ''}}
showSeparator={true}
onPress={this.handleOnPress}
running={this.state.running}
/>
);
}
}