React Native Tutorial on React Native App

if you open the default app you can observe that the app.js file looks like

import react from 'react';
import { stylesheet, text, view } from 'react-native';

export default class app extends react.component {
   render() {
      return (
         <view style = {styles.container}>
            <text>open up app.js to start working on your app!</text>
            <text>changes you make will automatically reload.</text>
            <text>shake your phone to open the developer menu.</text>
         </view>
      );
   }
}

const styles = stylesheet.create({
   container: {
      flex: 1,
      backgroundcolor: '#fff',
      alignitems: 'center',
      justifycontent: 'center',
   },
});

output

working on app

hello world

to display a simple message saying “welcome to tutorialspoint” remove the css part and insert the message to be printed wrapped by the <text></text> tags inside <view></view> as shown below.

import react from 'react';
import { stylesheet, text, view } from 'react-native';

export default class app extends react.component {
   render() {
      return (
         <view>
            <text>welcome to tutorialspoint</text>
         </view>
      );
   }
}
hello world