How to make components in react native? - react-native

Question

I am new to react native and want to create three Components. for Increment Button, Decrement Button and to display Counter value.
State/Hook should remain in the App Component. I don't want to Modify that.
import React, {useState} from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
export default function App() {
const [getIncCounter, setIncCounter] = useState(0)
const inc = () => {
setIncCounter(getIncCounter + 1);
}
const dec = () => {
setIncCounter(getIncCounter - 1);
}
return (
<View style={styles.container}>
<View style={{flexDirection: 'row'}}>
<Button title="+" onPress={inc} />
<Text> {getIncCounter} </Text>
<Button title="-" onPress={dec} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});

Answer 1

Here is how you can create a separate component for increase/decrease buttons and a component for showing results.
import React, { useState } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
export default function App() {
const [getIncCounter, setIncCounter] = useState(0);
const inc = () => {
setIncCounter(getIncCounter + 1);
};
const dec = () => {
setIncCounter(getIncCounter - 1);
};
return (
<View style={styles.container}>
<View style={{ flexDirection: 'row' }}>
<ButtonComponent title={'+'} onClick={inc} />
<ResultComponent result={getIncCounter} />
<ButtonComponent title={'-'} onClick={dec} />
</View>
</View>
);
}
const ButtonComponent = ({ onClick, title }) => {
return (
<div>
<Button title={title} onPress={onClick} />
</div>
);
};
const ResultComponent = ({ result }) => {
return (
<div>
<Text> {result} </Text>
</div>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
It's redundant though, but if you want to learn how to pass props and stuff it is fine. Button and Text are components themselves.
Expo Snack Example