React Native Button

App Name: Test

Component Name: App.js

---------------------------------------------------------------------------------------------

import React, { Component } from 'react';
import {
StyleSheet,
View,
Image,
Text,
Platform,
Alert,
Button
} from 'react-native';


class App extends Component {
onPressbtn() {
Alert.alert('Welcome To React Native King')
}
onPressbtn2() {
Alert.alert('Welcome To React Native King 2')
}

render() {
return (
<View style={styles.container}>
<View style={styles.btnContainer}>
<Button
onPress={this.onPressbtn}
title="Press Me"
/>
</View>
<View style={styles.btnContainer}>
<Button
onPress={this.onPressbtn}
title="Press Me"
color="red"
/>
</View>
<View style={styles.btnContainer2}>
<Button
onPress={this.onPressbtn2}
title="Ok"
color="green"
/>
</View>

</View>

)
}

}


const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
btnContainer: {
margin: 15,
},
btnContainer2: {
width: 50,
justifyContent: 'center',
borderWidth: 1,
borderColor: 'red'
}
})

export default App;

Comments

Post a Comment

Popular posts from this blog

React Native FlatList

Image
 App Name: Test  Component Name: App.js ------------------------------------------------------------------------------------ import React , { useState } from 'react' ; import { StyleSheet , Text , View , FlatList , } from 'react-native' ; // class App extends Component { export default function App (){ const [ people , ] = useState ([ { name : 'ReactNative King' , id : '1' }, { name : 'ReactNative King' , id : '2' }, { name : 'ReactNative King' , id : '3' }, { name : 'ReactNative Kingaun' , id : '4' }, { name : 'ReactNative King' , id : '5' }, { name : 'ReactNative King' , id : '6' }, { name : 'ReactNative King' , id : '7' }, ]); // render() { return ( < View style = { styles . container } > < FlatList keyEtractor = { ( item ) => item . i...
Read more

React Native class component

Image
class component: class component access react lifecycle methods and render and state props functionality. app name : test component name: App.js ----------------------------------------------------------------------------------------------------------------------- /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React , { Component } from 'react' import { View , Text , Button , } from 'react-native' ; class App extends Component { render () { function hello (){ alert ( "Welcome class component ReactNative King" ) } return ( < View > < Text > Class Component </ Text > < Button title = "Click Me " onPress = { hello } /> </ View > ) } } export default App ;
Read more