Gain insights into building applications with React Native Expo. Learn essential development concepts to create career opportunities and enhance your skills using familiar web technologies.

final.tar.gz

React Native

firstapp

components

states

style

flex

sound

camera

forms

forms_bonus

forms_bonus-solution

navigation

stack_challenge_solution

drawer_navigation

effect

storage

todo

React Native-test

You’ll learn to build applications using React Native Expo. It’s an amazing technology for web developers to learn building apps using technologies they would already be familiar with. It would be an amazing opportunity for companies to train their developers on this instead of hiring new app developers. 

This course contains a complete package with the most commonly used concepts in application development. It would create a foundation for you to explore this technology further.

Taking this course would open doors to many opportunities out there to progress further in your career as application developer.

Building Applications with React Native

# Basic components

Let’s discuss a few components that are fundamental for building any application.

> **Note:** We’ll learn about different components as we progress further in the course.
 

node_modules/
.expo/
dist/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/

# macOS
.DS_Store


import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Image, TouchableOpacity, TextInput } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>This is a text field</Text>
      {/* Add one more text field */}
      <Button
        title="Press me"
        onPress={() => alert('Simple Button pressed')}
      />
      {/* Add a button */}
      <Image
        source={require('./assets/favicon.png')}
        />
      {/* Add an image using splash.png */}
      <TouchableOpacity onPress={() => alert('You tapped the button!')}>
        <Text>TouchableOpacity</Text>
      </TouchableOpacity>
      {/* Add another touchable */}

      <TextInput
        style={styles.input}
      />
      {/* Add a text input */}
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    width: 200,
    padding: 10,
  },
});


module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};


React

Dart

GoJS React

Typescript React

Vue.js

> **Note:** Once the server starts, click the URL next to “Your app can be found at:” to view the output.

> **Tip:** When using mobile devices, use `Alert.alert` in place of `alert`.

# The `View` component 
The `View` component is used to group other components. It is similar to `div` in HTML. It is sort of a container that supports flexbox, accessibility, and other features.

```js
<View></View>
```

# The `Text` component
The `Text` component is used to display text. It is similar to p in HTML. In JSX, text can only be displayed in a `Text` component.
```js
<Text>This is a text field</Text>
```
# The `Button` component
The `Button` component is used to display a generic button. It is similar to `button` in HTML. It is given a title and an `onPress` event. The `onPress` event is called when the button is pressed. The title is the text that is displayed on the button.

# The `Alert` component
The `Alert` component is used to display a simple alert message. It is similar to alert in HTML. It is given a title and an `onPress` event. The `onPress` event is called when the alert is dismissed. The title is the text that is displayed on the `alert`.
```js
<Button
    title="Press me"
    onPress={() => Alert.alert('Simple Button pressed')}
/>
```

# The `Image` component 
The `Image` is a component used to display an image. It is similar to `img` in HTML. It is given a `source`. The `source` is the path to the image.

```js
<Image
    source={require('./assets/favicon.png')}
/>
```

# The `TouchableOpacity` component
The `TouchableOpacity` component is used to display a button. It is similar to `button` in HTML. It is given an `onPress` event. The `onPress` event is called when the touchable is pressed. The `TouchableOpacity` is given a child `Text` component. The child component is the component that is displayed on the `TouchableOpacity`.


```js
<TouchableOpacity onPress={() => Alert.alert('You tapped the button!')}>
    <Text>TouchableOpacity</Text>
</TouchableOpacity>
```

# The `TextInput` component
The `TextInput` component is used to create a text input. It is similar to `input` in HTML. It is the fundamental block of a form.
```js
<TextInput
    style={styles.input}
/>
```

# The `View` component 
The `View` component is used to group other components. It is similar to `div` in HTML. It is sort of a container that supports flexbox, accessibility, and other features.

```js
<View></View>
```

# The `Text` component
The `Text` component is used to display text. It is similar to p in HTML. In JSX, text can only be displayed in a `Text` component.
```js
<Text>This is a text field</Text>
```
# The `Button` component
The `Button` component is used to display a generic button. It is similar to `button` in HTML. It is given a title and an `onPress` event. The `onPress` event is called when the button is pressed. The title is the text that is displayed on the button.

# The `Alert` component
The `Alert` component is used to display a simple alert message. It is similar to alert in HTML. It is given a title and an `onPress` event. The `onPress` event is called when the alert is dismissed. The title is the text that is displayed on the `alert`.
```js
<Button
    title="Press me"
    onPress={() => Alert.alert('Simple Button pressed')}
/>
```

# The `Image` component 
The `Image` is a component used to display an image. It is similar to `img` in HTML. It is given a `source`. The `source` is the path to the image.

```js
<Image
    source={require('./assets/favicon.png')}
/>
```

# The `TouchableOpacity` component
The `TouchableOpacity` component is used to display a button. It is similar to `button` in HTML. It is given an `onPress` event. The `onPress` event is called when the touchable is pressed. The `TouchableOpacity` is given a child `Text` component. The child component is the component that is displayed on the `TouchableOpacity`.


```js
<TouchableOpacity onPress={() => Alert.alert('You tapped the button!')}>
    <Text>TouchableOpacity</Text>
</TouchableOpacity>
```

# The `TextInput` component
The `TextInput` component is used to create a text input. It is similar to `input` in HTML. It is the fundamental block of a form.
```js
<TextInput
   >
```

Explore and practice using different components, such as Text, View, etc.

Welcome to the Course

Let's Get Started With React Native

Creating Our First Application

Handling Forms

Assessment on the Basics of React Native

Navigating Between Screens

Build a Music Player Application Using React Native

The useEffect Hook

Assessment on Navigating the Components and their Lifecycle

AsyncStorage

The Todo List Application

To-do List Assessment

Connecting To External API's

Assessment on APIs

State Management

Firebase

Password Manager

Final Quiz

Conclusion

Exploring Basic Components

Basic components

The `View` component