- Create Components folder under src folder
- Add button Reusable component ButtonCOM.js file and add below Code
import React from "react";
import { Button } from "react-native";
const ButtonCOM = ({ title, decreaseCount }) => {
return <Button onPress={decreaseCount} title={title} />;
};
export default ButtonCOM;
- Use Reusable button component in followed file ButtonEXP1.js file and add below Code
import React from "react";
import { Button, View, Text } from "react-native";
const callFun = () => {
alert("Clicked on Button!!!");
};
const ButtonEXP1 = () => {
return (
<View>
<Text> Reusable button component react native example</Text>
<Button onPress={callFun} title="Test Button" color="#0000FF" />
</View>
);
};
export default ButtonEXP1;
- Open App.js file and update code as below\
import React from 'react';
import { View,StyleSheet } from 'react-native';
import ButtonEXP1 from './src/components/ButtonEXP1'
const App=()=> {
return (
<View style={styles.container}>
<ButtonEXP1/>
</View>
);
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
paddingTop:80
},
});
No comments:
Post a Comment