React Native - App


Advertisements

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

Useful Video Courses


Video

ReactJS Online Training

20 Lectures 1.5 hours

Anadi Sharma

Video

Create Virtual Reality Apps using React VR & React 360

61 Lectures 6.5 hours

A To Z Mentor

Video

React for Absolute Beginners

40 Lectures 4.5 hours

Eduonix Learning Solutions

Video

React and Redux: Learn By Building Real World Projects

56 Lectures 12.5 hours

Eduonix Learning Solutions

Video

Step By Step React Native Hybrid Mobile App With Spring Boot

62 Lectures 4.5 hours

Senol Atac

Video

React Full Stack Web Development With Spring Boot

67 Lectures 4.5 hours

Senol Atac

Advertisements