Begin with the react-native project

import React from 'react';import { StyleSheet, Text, View } from 'react-native';export default function App() {   return (      <View style={styles.container}>         <Text>Open up App.js to start working on your app!</Text>      </View>   );}const styles = StyleSheet.create({   container: {      flex: 1,      backgroundColor: '#fff',      alignItems: 'center',      justifyContent: 'center',   },});
Current view of the app
import { StyleSheet, Text, View } from ‘react-native’
export default function App() {   return (      <View style={styles.container}>         <Text>Open up App.js to start working on your app!</Text>      </View>   );}
const styles = StyleSheet.create({   container: {      flex: 1,      backgroundColor: ‘#fff’,      alignItems: ‘center’,      justifyContent: ‘center’,   },});
import { StyleSheet, Text, View, Button } from ‘react-native’
<Button title=”Change text” />
import React, {useState} from ‘react’;
const [outputText, setOutputText] = useState(‘Open up App.js to start working on your app!’)
<Text>{outputText}</Text>
onPress={() => setOutputText(‘The text changed’)}
<Button title=”Change text” onPress={() => setOutputText(‘The text changed’)} />
import React, {useState} from ‘react’;import { StyleSheet, Text, View, Button } from ‘react-native’;
export
default function App() {
const [outputText, setOutputText] = useState(‘Open up App.js to start working on your app!’)
return
(
<View style={styles.container}> <Text>{outputText}</Text> <Button title=”Change text” onPress={() => setOutputText(‘The text changed’)} /> </View> );}
const
styles = StyleSheet.create({
container: { flex: 1, backgroundColor: ‘#fff’, alignItems: ‘center’, justifyContent: ‘center’, },});
Before Press the Button
After Press the Button

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Reshaka Weerasinghe

Reshaka Weerasinghe

Undergraduate at faculty of Information Technology, University of Moratuwa | Co-founder of Kannys Lab